Vue自定义组件遇到问题总结 toast频繁点击问题

• 简单 功能比较单一
• 可扩展性 props slot
• 可维护性 （组件里面的字体颜色等等 可以使用变量

1. 组件双向绑定 v-model
   自定义组件使用v-model ，props 默认value 接收，事件默认input ; 当然也可以自定义 model: {
   prop: xxx,
   event: xxx
   }
   比如我想创建一个弹窗组件

modal.vue:

<template>
<div v-show="value">
<div>
<slot>
<div @click="$emit('input', false)">自定义内容</div>
</slot>
</div>
</div>
</template>
export default {
 props: {
   value: {
   type: Boolean,
   default: false 
   }
 }
}

在使用的时候 就是直接引入modal.vue ,
index.vue

<template>
<div v-show="value">
<div>
<modal v-model="show"></modal>
</div>
</div>
</template>
import modal from './modal.vue'
export default {
components: {
  modal
},
data() {
   return {
   show: false
   }
}
}

2. 自定义vue插件，挂在到vue 原型上 ，vue的实力都可以使用
   步骤：

• 先创建toast.vue 界面 把样式调试完整
• 创建toast.js文件，引入toast.vue

import toast from ./toast.vue
var constr, instanceObj,mountVobj,domEl;
var timer=null;
Toast.install=function(Vue){
  Vue.prototype.$toast = function(msg){
     if(!constr) {
       constr = Vue.extend(toast); //创建vue 构造器
       instanceObj = new constr(); //创建实力对象
       mountVobj = instanceObj.$mount(); //挂载
       domEl = mountVobj.$el; //获取dom元素
       document.body.appendChild(domEl); //拼接到body上
     }
     if(mountVobj.show || timer) {
     //toast 频繁点击问题
        clearTimer(timer)
        timer = null
     }
     timer = setTimout(function() {
        clearTime(timer)
        timer = null
        mountVobj.updateShowStatus(false)
     }, 2000)

      
  }
}

如果对你有帮助，麻烦点个赞 谢谢~~