Vue组件封装

简单实现效果：
本文主要记录封装Vue组件
直接上源码
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <link rel="stylesheet" href="index.css" type="text/css" />
  9     <title>Document</title>
 10 </head>
 11 
 12 <body>
 13     <div id="app1">
 14 
 15     </div>
 16     <div id="app2">
 17         <p @click="showBox">点击打开MessageBox</p>
 18     </div>
 19 
 20     <div class="messagebox"></div>
 21 
 22     <div class="submitbox"></div>
 23 
 24     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
 25 
 26     <script>
 27         //消息提示
 28         let config = {
 29             data() {
 30                 return {
 31                     title: "标题名称",
 32                     content: "这是一段内容",
 33                     flag: false
 34                 }
 35             },
 36             template: '<div><div v-show="flag" id="messagebox"><h4>{{title}}</h4><p>{{content}}</p><b @click="close">×</b><button @click="close">确定</button></div></div>',
 37             methods: {
 38                 close() {
 39                     this.flag = false;
 40                 }
 41             }
 42         }
 43 
 44         let MessageBoxConstructor = Vue.extend(config);
 45         let MessageBox = new MessageBoxConstructor();
 46         MessageBox.$mount(".messagebox");
 47         // console.log(MessageBox)
 48 
 49         //提交内容
 50         let config2 = {
 51             data() {
 52                 return {
 53                     title: "提示",
 54                     content: "请输入用户名",
 55                     username: '',
 56                     flag: false
 57                 }
 58             },
 59             template: '<div><p @click="open">点击打开submitbox</p><div  v-show="flag" id="messagebox"><h4>{{title}}</h4><p>{{content}}</p><input v-model="username" type="text"/><b @click="cancel">×</b><button @click="cancel" class="cancel">取消</button><button @click="sure">确定</button></div></div>',
 60             methods: {
 61                 open() {
 62                     this.flag = true;
 63                     this.username = "";
 64                 },
 65                 sure() {
 66                     if (this.username) {
 67                         console.log("确定", this.username)
 68                         this.flag = false;
 69                     }
 70                 },
 71                 cancel() {
 72                     this.flag = false;
 73                     console.log("取消")
 74                 }
 75             }
 76         }
 77 
 78         var SubmitBoxConstructor = Vue.extend(config2);
 79         let SubmitBox = new SubmitBoxConstructor();
 80         SubmitBox.$mount(".submitbox")
 81 
 82 
 83         var App1 = new Vue({
 84             el: '#app1',
 85             methods: {
 86                 showBox() {
 87                     MessageBox.flag = true;
 88                 }
 89             }
 90         })
 91 
 92         var App2 = new Vue({
 93             el: '#app2',
 94             methods: {
 95                 showBox() {
 96                     MessageBox.flag = true;
 97                 }
 98             }
 99         })
100         // App2.$mount('#app2');
101 
102     </script>
103 </body>
104 
105 </html>
猜你喜欢
