用vue实现各类弹出框组件

绝地灬酷狼 2022-05-09 12:34 637阅读 0赞

简单介绍一下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][https_github.com_wwjhzc_vue-dialog]   
作者：rookie.he（kuke\_kuke）   
博客链接：[http://blog.csdn.net/qq\_33599109][http_blog.csdn.net_qq_33599109]   
欢迎关注支持，谢谢！

[https_github.com_wwjhzc_vue-dialog]: https://github.com/wwjhzc/vue-dialog
[http_blog.csdn.net_qq_33599109]: http://blog.csdn.net/qq_33599109