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

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

成都创新互联是一家专注于成都网站设计、成都网站制作与策划设计,榆次网站建设哪家好?成都创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:榆次等地区。榆次做网站价格咨询:028-86922220

简单介绍一下vue中常用dialog组件的封装:

实现动态传入内容,实现取消,确认等回调函数。

首先写一个基本的弹窗样式,如上图所示。

在需要用到弹窗的地方中引入组件:

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

点击一个按钮显示弹窗,并保证关闭弹窗后再次点击依旧显示

在弹窗组件中定义一个value值:v-model="sendVal",sendVal初始值为false。

在打开弹窗的方法中赋值:

openMask(){
  this.sendVal = true;
}

在dialog.vue组件中做如下操作:

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

定义一个showMask变量用于控制是否显示弹窗

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;
},

此刻已经可以实现弹窗的显示与退出。

下面我们要实现的是动态添加标题,内容等,在组件标签中加入title,content:

可以运用vue的数据双向绑定,更换title,content。

在dialog.vue中获取内容:

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

{{title}}

我们可以运用同样的原理来获取不同按钮中的自定名称。

下面我们利用传入的不同type来确定不同的按钮,并提供不同的回调函数。

如传入type为danger,我们可以在dialog.vue中props获取type,并定义一个如下按钮:

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

在标签中定义danger的回调并做一些操作:



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}}

点击此处去github下载弹窗代码: https://github.com/wwjhzc/vue-dialog

总结

以上所述是小编给大家介绍的使用vue实现各类弹出框组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


标题名称:使用vue实现各类弹出框组件
转载源于:http://pwwzsj.com/article/gcoiso.html