【vue】将el-dialog 封装为一个组件2

描述

点击父组件《立即购买》按钮，弹窗显示企业列表，点击弹窗的《关闭》按钮关闭弹窗

 

知识点

计算属性，set，get,父子组件通信，

子组件

<template>
    <div class="select-en-container">
        <el-dialog
            title="title"
            :visible.sync="isShow"
            :show-close="true"
            :before-close="handleCancel"
            :close-on-click-modal="false"
            width="800px"
            custom-class="getEnterprise-box-dialog"
        >
            XXXXXXX
            <div slot="footer" class="dis-flex flex-justify-end">
                <div slot="footer" class="dis-flex flex-justify-end">
                    <el-button class="dialog-footer-cancel" @click.native="handleCancel">取消</el-button>
                    <button
                        class="dialog-footer-confirmed theme-bg-h-hover"
                        type="primary"
                        v-debounce
                        @click="handleSelectEnterpriseSure"
                    >
                        确定
                    </button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'selectEnterprise',
    data() {
        return {
           
        }

    },
  
    props: {
        itemData: {
            type: Object,
            default() {
                return {};
            },
        },
        isVisibleDialog: {
            type: Boolean,
            default() {
                return false;
            },
        },
        from: {
            type: String,
            default() {
                return 'XX';
            },
        },
        title: {
            type: String,
            default() {
                return '';
            },
        },
      
    },
    computed: {
        isShow: {
            get(){
                return  this.isVisibleDialog
            },
            set(v){
                this.isVisibleDialog = v;
            }

        },
    },
    watch: {
        isVisibleDialog(){
            if(this.isVisibleDialog){
                this.getData();
            }
        }

    },
    
    methods: {
        //企业列表
        getData() {
          XXXX
        },
        handleCancel(){
            this.$parent.selectEn.isVisibleDialog = false;
        },
        
        handleSelectEnterpriseSure(){
     　　　　this.$parsent.selectEn.isVisibleDialog = false;
        
        },
    },
};
</script>

父组件

<template>
　　
    <div class="buy-btn" @click="handleBuyDialog">立即购买</div>
    <div class="father-container"> <select-enterprise title="选择企业" from="buy" :isVisibleDialog="selectEn.isVisibleDialog" :item-data="data" /> </div> </template> 

<script> 
    export default { 
    name: "",  
    data() {
        return {  
            selectEn { 
                isVisibleDialog: false, 
            },
　　        data: []
            
          }
     },
 
    created() {
        
    },
    mounted() {
    },
    methods: {
      
        handleBuyDialog(){  
         　　this.selectEn.isVisibleDialog = true;
        },
        
    },
   
};
</script>

 

 

 

 

 

搜索

复制