自定义Vue插件

女爷i 2022-03-15 09:35 254阅读 0赞

今天咱们来玩一下vue中的自定义组件，此案例直接通过script引入js的形式定义组件  
我是简单的写了一个弹出框的小插件

css样式–这就不需要解释了吧，强撸

html结构

<div id="app">
        <button @click="showDialog">自定义弹框</button>
    </div>

组件核心js

var Alert = {}
        //1.0  此处的install方法 是vue中规定好的
        Alert.install = function(){
          //2.0 通过extend来定义自己的组件模板，最终会得到组件模板构造函数
          var AlertConstructor = Vue.extend({
            template:'<div v-if="isShow" class="dialog"><p>{
       {msg}}</p><button @click="close">x</button></div>',
            data(){
              return {
                msg:'hello',
                isShow:false
              }
            },
            methods:{
              close(){
                this.isShow = false
              }
            }
          })
          //  3.0 通过new AlertConstructor 会得到组件对象
          var Instance = new AlertConstructor({
            el:document.createElement('div')
          })
          //  4.0 将$alert方法挂载到原型上，外界可以访问到，并且将自己定义的组件append到body中
          Vue.prototype.$alert = function(text){
            document.body.appendChild(Instance.$el)
            Instance.isShow = true
            Instance.msg = text
          }
        }
        Vue.use(Alert)
        var vm = new Vue({
          el:'#app',
          methods:{
            showDialog(){
              vm.$alert('错误提示框')
            }
          }
        })