Vue2中實現dialog的封裝方式

更新時間：2024年01月11日 09:19:42 作者：聶大哥

這篇文章主要介紹了Vue2中實現dialog的封裝方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

組件內部只有一個dialog

dialog的控制可見變量最好寫在該組件內，不要寫在父組件通過傳props的方式來實現，不然還要在父組件再維護一個變量，也是不夠特別優(yōu)雅。

<template>
        <el-dialog 
            title="新增"
            :visible="visibleDia"
            @close="closeDia"
            fullscreen
        >
        
            <!-- 彈窗內容自定義 -->

            <div slot="footer">
                <el-button @click="saveInfo" type="primary">保存</el-button>
                <el-button @click="closeDia" type="primary" plain>取消</el-button>
            </div>
        </el-dialog>
</template>

<script>
export default {
    name: 'SaveDialog',
    data() {
        return {
            visibleDia: false,
        }
    },
    methods: {
        openDia() {
            this.visibleDia = true
        },
        closeDia() {
            this.visibleDia = false
        },
        saveInfo() {
        // 告訴父組件，保存成功
			this.$emit('saveSuccess', true)
			this.closeDia()
		}
    }
}
</script>

父組件調用

父組件調用彈窗組件時綁定一個ref屬性，可通過$refs調用此節(jié)點里的openDia方法，即可打開彈窗；

關閉彈窗為彈窗組件內的邏輯，等事件處理完進行自關閉即可。

<template>
    <div>


		<!-- 頁面其他內容 -->
		
		<el-button @click="handleAdd">新增</el-button>
		
		<save-dialog
			ref="saveDialog"
			@saveSuccess="saveSuccess"
		 />
    </div>    
</template>

<script>
import SaveDialog from './SaveDialog.vue'
export default {
    name: 'Index',
    components: { SaveDialog },
    methods: {
        handleAdd() {
            this.$refs.saveDialog.openDia()
        },
        saveSuccess() {
        	// 此方法被調用時，說明彈窗的新增內容已完成
		}
    }
}
</script>