用vue实现各类弹出框组件

版权声明:本文为博主原创文章 https://blog.csdn.net/qq_33599109/article/details/79883766

这里写图片描述

简单介绍一下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
作者:rookie.he(kuke_kuke)
博客链接:http://blog.csdn.net/qq_33599109
欢迎关注支持,谢谢!

展开阅读全文

没有更多推荐了,返回首页