使用vue实现各类弹出框组件
2019-07-03 10:15
603 查看
简单介绍一下vue中常用dialog组件的封装:
实现动态传入内容,实现取消,确认等回调函数。
首先写一个基本的弹窗样式,如上图所示。
在需要用到弹窗的地方中引入组件:
import dialogBar from './dialog.vue' components:{ 'dialog-bar': dialogBar, }, <dialog-bar></dialog-bar>
点击一个按钮显示弹窗,并保证关闭弹窗后再次点击依旧显示
在弹窗组件中定义一个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:
<dialog-bar title="我是标题" content="我是内容"></dialog-bar>
可以运用vue的数据双向绑定,更换title,content。
在dialog.vue中获取内容:
props: { value: {}, content: { type: String, default: '' }, title: { type: String, default: '' }, }, <div class="dialog-title">{{title}}</div> <div class="content" v-html="content"></div>
我们可以运用同样的原理来获取不同按钮中的自定名称。
下面我们利用传入的不同type来确定不同的按钮,并提供不同的回调函数。
<dialog-bar title="我是标题" content="我是内容" type="danger" dangerText="这是删除按钮"></dialog-bar>
如传入type为danger,我们可以在dialog.vue中props获取type,并定义一个如下按钮:
<div v-if="type == 'danger'" class="danger-btn" @click="dangerBtn"> {{dangerText}} </div> dangerBtn(){ this.$emit('danger'); // 发送一个danger事件作为回调函数 this.closeMask(); // 关闭弹窗 },
在标签中定义danger的回调并做一些操作:
<dialog-bar title="我是标题" content="我是内容" type="danger" dangerText="这是删除按钮" @danger="clickDanger()"></dialog-bar> 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: '删除' }, }, <div class="btns"> <div v-if="type != 'confirm'" class="default-btn" @click="closeBtn"> {{cancelText}} </div> <div v-if="type == 'danger'" class="danger-btn" @click="dangerBtn"> {{dangerText}} </div> <div v-if="type == 'confirm'" class="confirm-btn" @click="confirmBtn"> {{confirmText}} </div> </div>
点击此处去github下载弹窗代码: https://github.com/wwjhzc/vue-dialog
总结
以上所述是小编给大家介绍的使用vue实现各类弹出框组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
- 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
- 基于elementUI使用v-model实现经纬度输入的vue组件
- Vue.js使用-组件示例(实现数据的CRUD)
- 使用cdn引入vue,vue组件在html上简单的实现(仅限于自己瞎玩)
- ymPrompt消息提示组件实现弹出层使用小结
- 2018.01.29.使用vue组件modal制作登陆弹窗,并实现背景灰蒙透明效果
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
- 使用canvas实现一个vue弹幕组件功能
- 使用canvas实现一个vue弹幕组件功能
- vue2.0使用动态组件实现tab切换效果(vue-cli)
- vue 使用eventBus实现同级组件的通讯
- vue2.0使用swiper组件实现轮播
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
- vue组件实现弹出框点击显示隐藏效果
- 详解vue使用vue-layer-mobile组件实现toast,loading效果
- 使用Vue父子组件通信实现todolist的功能示例代码
- vue实现图片预览组件的封装与使用
- VUE 使用 element-ui 的 el-autocomplete 组件实现输入框自动提示查询功能 超简单!!!