vue自定义全局组件-弹框案例

我不是女神ヾ 2022-12-30 03:58 343阅读 0赞

vue自定义全局组件  
说明：本案例是封装的一个弹框页面，因为只想要一个遮罩，内容自定义。因为ElementUI上已经提供了一个弹框组件，但觉得elementUI的组件内容有点多，所有自己就封装了全局组件。自己封装的参考了elementUI组件的源码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]

主要步骤如下
    1，创建一个文件夹my-dialog
    2，在my-dialog文件夹下创建MyDialog.vue和index.js
    3，index.js需要引入MyDiloag并封装和抛出
    4，在main.js中引入index.js

主要代码如下  
1, **MyDialog.vue**

<template>
        <transition
                name="dialog-fade"
                @after-enter="afterEnter"
                @after-leave="afterLeave">
            <div v-show="visible">
                <div class="md-wapper" >
                </div>
                <div class="md-content" @click.self="handleOut">
                    <slot></slot>
                </div>
            </div>
        </transition>
    </template>
    
    <script>
        export default {
            name: "MyDialog",
            data(){
                return{
                }
            },
            props:{
                visible: {
                    type: Boolean,
                    default: false
                },
                closeOnClickModal: {
                    type: Boolean,
                    default: true
                },
            },
            methods:{
                afterEnter(){
    
                },
                afterLeave(){
    
                },
                handleOut(){
                    // this.visible =false
                    if(this.closeOnClickModal){
                        this.$emit("closeMyDialog")
                    }
                }
            },
    
        }
    </script>
    
    <style scoped lang="less">
        .md-wapper{
            z-index: 10;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: .5;
            background: #000;
        }
        .md-content{
            z-index: 11;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    </style>

2, index.js

import MyDialog from './MyDialog';
    
    MyDialog.install = function(Vue) {
        Vue.component(MyDialog.name, MyDialog);
    };
    
    export default MyDialog;

3,在main.js中引入

// 引入自定义弹框组件
    import MyDialog from '@/common/my-dialog/index'
    Vue.use(MyDialog)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]

4，在项目中使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20221120/36b7fb1186f647f08e903542246dc6a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201224094535133.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201224101841864.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70