vue自定义组件dialog

自定义组件  dialog.vue源码：

<template>

    <div class="dialog" v-show="showMask">

        <div class="dialog-container">

            <div class="dialog-title">{{title}}</div>

            <div class="content" v-html="content"></div>

            <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>

            <div class="close-btn" @click="closeMask"><i class="iconfont icon-close"></i></div>

        </div>

        

    </div>

</template>

<script>

export default {

    props: {

        value: {},

        // 类型包括 defalut 默认， danger 危险， confirm 确认，

        type:{

            type: String,

            default: 'default'

        },

        content: {

            type: String,

            default: ''

        },

        title: {

            type: String,

            default: ''

        },

        cancelText: {

            type: String,

            default: '取消'

        },

        dangerText: {

            type: String,

            default: '删除'

        },

        confirmText: {

            type: String,

            default: '确认'

        },

    },

    data(){

        return{

            showMask: false,

        }

    },

    methods:{

        closeMask(){

            this.showMask = false;

        },

        closeBtn(){

            this.$emit('cancel');

            this.closeMask();

        },

        dangerBtn(){

            this.$emit('danger');

            this.closeMask();

        },

        confirmBtn(){

            this.$emit('confirm');

            this.closeMask();

        }

    },

    mounted(){

        this.showMask = this.value;

    },

    watch:{

        value(newVal, oldVal){

            this.showMask = newVal;

        },

        showMask(val) {

            this.$emit('input', val);

        }

    },

}

</script>

<style lang="less" scoped>

    .dialog{

        position: fixed;

        top: 0;

        bottom: 0;

        left: 0;

        right: 0;

        background: rgba(0, 0, 0, 0.6);

        z-index: 9999;

        .dialog-container{

            width: 500px;

            height: 380px;

            background: #ffffff;

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            border-radius: 8px;

            position: relative;

            .dialog-title{

                width: 100%;

                height: 60px;

                font-size: 18px;

                color: #696969;

                font-weight: 600;

                padding: 16px 50px 0 20px;

                box-sizing: border-box;

            }

            .content{

                color: #797979;

                line-height: 26px;

                padding: 0 20px;

                box-sizing: border-box;

            }

            .inp{

                margin: 10px 0 0 20px;

                width: 200px;

                height: 40px;

                padding-left: 4px;

                border-radius: 4px;

                border: none;

                background: #efefef;

                outline: none;

                &:focus{

                    border: 1px solid #509EE3;

                }

            }

            .btns{

                width: 100%;

                height: 60px;

                // line-height: 60px;

                position: absolute;

                bottom: 0;

                left: 0;

                text-align: right;

                padding: 0 16px;

                box-sizing: border-box;

                & > div{

                    display: inline-block;

                    height: 40px;

                    line-height: 40px;

                    padding: 0 14px;

                    color: #ffffff;

                    background: #f1f1f1;

                    border-radius: 8px;

                    margin-right: 12px;

                    cursor: pointer;

                }

                .default-btn{

                    color: #787878;

                    &:hover{

                        color: #509EE3; 

                    }

                }

                .danger-btn{

                    background: #EF8C8C;

                    &:hover{

                        background: rgb(224, 135, 135);

                    }

                    &:active{

                        background: #EF8C8C;

                    }

                }

                .confirm-btn{

                    color: #ffffff;

                    background: #509EE3;

                    &:hover{

                        background: #6FB0EB;

                    }

                }

            }

            .close-btn{

                position: absolute;

                top: 16px;

                right: 16px;

                width: 30px;

                height: 30px;

                line-height: 30px;

                text-align: center;

                font-size: 18px;

                cursor: pointer;

                &:hover{

                    font-weight: 600;

                }

            }

        }

    }

</style>

自定义组件使用：

<template>

    <div class="main">

        <div @click="openMask">打开弹窗</div>

 

        <dialog-bar v-model="sendVal" type="danger" title="我是标题" content="我是内容" 

               v-on:cancel="clickCancel()" @danger="clickDanger()" 

               @confirm="clickConfirm()" dangerText="Delete">

        </dialog-bar>

    </div>

</template>

<script>

import dialogBar from './components/fly-ui-libs/dialog/dialog.vue'

export default {

   components:{

        'dialog-bar': dialogBar,

    },

    data(){

        return{

            sendVal: false,

        }

    },

    methods:{

        openMask(index){

            this.sendVal = true;

        },

        clickCancel(){

            console.log('点击了取消');

        },

        clickDanger(){

            console.log('这里是danger回调')

        },

        clickConfirm(){

            console.log('点击了confirm');

        }

    }

}

</script>

<style lang="less" scoped>

</style>