<!--定義一個(gè)有按鈕的對(duì)話框 相當(dāng)于dialog和按鈕組合使用--> <template><!-- 有按鈕的對(duì)話框 這個(gè)位置的代碼會(huì)被包裹過(guò)去--><!--close-on-click-modal 是否可以通過(guò)點(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><!--向別的位置包裹代碼 上面的代碼會(huì)被包裹過(guò)去--><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",/*通過(guò)父子組件傳值可以通過(guò)父子組件傳值*/props: {/*定義一個(gè)標(biāo)題*/title: { type: String, required: false }, // 標(biāo)題/*是否為全屏顯示*/fullscreen: { type: Boolean, default: false, required: false }, // 是否為全屏顯示/*是否可以通過(guò)model關(guān)閉*/closeOnClickModal: { type: Boolean, default: true, required: false }, // 見(jiàn) element ui 參數(shù)/*確定按鈕顯示文字*/okButtonText: { type: String, default: "確 定", required: false }, // 確定按鈕顯示文字/*取消按鈕顯示文字*/cancelButtonText: { type: String, default: "取 消", required: false }, // 取消按鈕顯示文字/*顯示按鈕顯示文字*/buttonList: { type: Array, required: false }, // 顯示按鈕列表；如果設(shè)置了該參數(shù)，默認(rèn)的按鈕會(huì)被覆蓋/*設(shè)置寬度*/width: { type: String, required: false, default: "50%" }, // 寬度/*關(guān)閉時(shí)候銷毀dialog里的元素*/destroyOnClose: { type: Boolean, default: false, required: false }, // 見(jiàn) 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)用父級(jí)的方法*/cancel() {this.$emit("cancel");this.close();}} }; </script><style scoped></style>

父子組件傳值

通過(guò)mode控制按鈕禁用

<button-dialog :disabled="!mode" :ListShow="false" ref="dialog" width="600px" @ok="confirm"><h2 class="login-h1">請(qǐng)選擇登錄角色</h2><div class="container" ><el-radio-group v-model="mode"><div class="login-btn"><el-radio-button class="login-btn" label="0">營(yíng)銷端</el-radio-button></div><div class="login-btn"><el-radio-button class="login-btn" label="1">業(yè)務(wù)端</el-radio-button></div></el-radio-group></div></button-dialog>

?

總結(jié)

以上是生活随笔為你收集整理的工作234：按钮禁用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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