使用vue实现各类弹出框组件

import dialogBar from './dialog.vue'
components:{
  'dialog-bar': dialogBar,
},

openMask(){
  this.sendVal = true;
}

props: {
  value: {}  // 注意此处获取的value对应的就是组件标签中的v-model
}

mounted(){
  this.showMask = this.value;  // 在生命周期中，把获取的value值获取给showMash
},
watch:{
  value(newVal, oldVal){
    this.showMask = newVal;   // 监测value的变化，并赋值。
  },
  showMask(val) {
    this.$emit('input', val);  // 此处监测showMask目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
  }
},

closeMask(){
  this.showMask = false;
},

props: {
value: {},
  content: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
},

{{title}}

  {{dangerText}}


dangerBtn(){
  this.$emit('danger');  // 发送一个danger事件作为回调函数
  this.closeMask();  // 关闭弹窗
},

clickDanger(){
  console.log("这里是回调函数")
},

 props: {
    value: {},
    // 类型包括 defalut 默认， danger 危险， confirm 确认，
    type:{
      type: String,
      default: 'default'
    },
    content: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    dangerText: {
      type: String,
      default: '删除'
    },
  },


  

    {{cancelText}}
  
  

    {{dangerText}}
  
  

    {{confirmText}}