<!--定義一個有按鈕的對話框 相當(dāng)于dialog和按鈕組合使用--> <template><!-- 有按鈕的對話框 這個位置的代碼會被包裹過去--><!--close-on-click-modal 是否可以通過點(diǎn)擊 modal 關(guān)閉 Dialog append-to-body控制不能出現(xiàn)遮擋層--><el-dialog:title="title":show-close="ShowClose":fullscreen="fullscreen":close-on-click-modal="closeOnClickModal":visible.sync="visible":width="width":destroy-on-close="destroyOnClose"@close="close"append-to-body><!--向別的位置包裹代碼 上面的代碼會被包裹過去--><slot /><!--定義所在插槽的按鈕--><div slot="footer"><template v-if="buttonList"><el-buttonv-for="(button, index) in buttonList":key="index":type="button.type":icon="button.icon"@click="button.onClick">{{ button.text }}</el-button></template><!--定義其中的確定取消按鈕--><template v-else><el-button v-if="ListShow" @click="cancel">{{ cancelButtonText }}</el-button><el-button type="primary" @click="ok" :disabled="disabled">{{ okButtonText }}</el-button></template></div></el-dialog> </template> <script> export default {name: "ButtonDialog",/*通過父子組件傳值可以通過父子組件傳值*/props: {/*定義一個標(biāo)題*/title: { type: String, required: false }, // 標(biāo)題/*是否為全屏顯示*/fullscreen: { type: Boolean, default: false, required: false }, // 是否為全屏顯示/*是否可以通過model關(guān)閉*/closeOnClickModal: { type: Boolean, default: true, required: false }, // 見 element ui 參數(shù)/*確定按鈕顯示文字*/okButtonText: { type: String, default: "確 定", required: false }, // 確定按鈕顯示文字/*取消按鈕顯示文字*/cancelButtonText: { type: String, default: "取 消", required: false }, // 取消按鈕顯示文字/*顯示按鈕顯示文字*/buttonList: { type: Array, required: false }, // 顯示按鈕列表；如果設(shè)置了該參數(shù)，默認(rèn)的按鈕會被覆蓋/*設(shè)置寬度*/width: { type: String, required: false, default: "50%" }, // 寬度/*關(guān)閉時候銷毀dialog里的元素*/destroyOnClose: { type: Boolean, default: false, required: false }, // 見 element ui 參數(shù)/*控制按鈕禁用*/disabled:{type:Boolean},/*控制是否有關(guān)閉按鈕*/ShowClose:{type:Boolean,default:false},ListShow:{type:Boolean,default:true}},data() {return {visible: false,};},methods: {/*控制dialog的顯示*/show() {this.visible = true;},/*控制dialog的關(guān)閉*/close() {this.visible = false;this.$emit("close");},/*控制dialog的調(diào)用父組件的方法*/ok() {this.$emit("ok");},/*控制組件調(diào)用父級的方法*/cancel() {this.$emit("cancel");this.close();}} }; </script><style scoped></style>

?

總結(jié)

以上是生活随笔為你收集整理的工作233：定义有对话框的按钮的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。