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

前端  /  管理员 发布于 4年前   764

简单介绍一下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配置nprogress实现页面顶部进度条
• Vue使用NProgress进度条的方法
• 在vue项目中使用Nprogress.js进度条的方法
• 基于vue 实现表单中password输入的显示与隐藏功能
• vue自定义表单生成器form-create使用详解
• vue使用video.js进行视频播放功能
• 基于Vue SEO的四种方案(小结)
• Vue使用NProgress的操作过程解析