弹窗组件

最新推荐文章于 2024-08-20 16:48:16 发布

nytzddd

最新推荐文章于 2024-08-20 16:48:16 发布

阅读量47

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/nytzddd/article/details/131560860

版权

文章介绍了如何开发一个Vue.js组件，该组件允许用户自定义弹窗的标题、内容以及确定和取消按钮的文本。用户还能编写自己的按钮点击事件处理代码。示例代码展示了如何在HTML和JS中实现这一功能，包括数据绑定和事件监听。

摘要由CSDN通过智能技术生成

开发一个弹窗组件，用户在使用该组件时可以根据项目需要自行设置弹窗的标题栏文本和弹窗显示的内容。同时要求该弹窗具备确定和取消两个按钮，并允许用户自行编写按钮的单击代码。

HTML代码如下：

    <div id="app">
        <my-dialog
            submit-text="提交"
            cancel-text="关闭"
            v-model="isShow"
            @deal="dialogDeal"
        >
            <template slot="title">
                <i class="iconfont iconfont-t"></i>{{dialogTitle}}
            </template>   
            <template slot="content">
                <p>内容：<input type="text" /></p>
            </template> 
        </my-dialog>

        <button @click="insertEmployee">一</button>
        <button @click="deleteEmployeee">二</button>

     </div>

JS代码如下：

Vue.component("myDialog",{
    template:`
        <div class="mask" v-if="isOk">
            <div class="dialog">
                <div class="title">
                    <div class="text">
                        <slot name="title"></slot>
                    </div>
                    <div class="close" @click="dialogClose">&times;</div>
                </div>
                <div class="content">
                    <slot name="content"></slot>
                </div>
                <div class="foot">
                    <div class="btn cancel" @click="isOk=false">{{cancelText}}</div>
                    <div class="btn submit" @click="submitClick">{{submitText}}</div>
                </div>
            </div>
        </div>
    `,
    data(){
        return {
            isOk:this.value
        }
    },
    props:["value","submitText","cancelText"],
    methods:{
        //关闭对话框
        dialogClose(){
            this.isOk=false;
        },

        //确定按钮的单击事件
        submitClick(){
            this.$emit("deal")
        }
    },
    watch:{
        value(newValue){
            this.isOk=newValue;
        },
        isOk(newValue){
            this.$emit("input",newValue);
        }
    }
})


let vm=new Vue({
    el:"#app",
    data:{
        isShow:false,
        dialogTitle:""
    },
    methods:{
        //一
        insertEmployee(){
            this.dialogTitle="一";
            this.isShow=true;
        },

        //二
        deleteEmployeee(){
            this.dialogTitle="二";
            this.isShow=true;
        },

        dialogDeal(){
            if(this.dialogTitle==="一"){
                console.log("一");
            }else{
                console.log("二")
            }
            this.isShow=false;

        }
    }

})