buttondialog.vue

<!--定義一個有按鈕的對話框 相當于dialog和按鈕組合使用--> <template><!-- 有按鈕的對話框 這個位置的代碼會被包裹過去--><!--close-on-click-modal 是否可以通過點擊 modal 關閉 Dialog append-to-body控制不能出現遮擋層--><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 @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: {/*定義一個標題*/title: { type: String, required: false }, // 標題/*是否為全屏顯示*/fullscreen: { type: Boolean, default: false, required: false }, // 是否為全屏顯示/*是否可以通過model關閉*/closeOnClickModal: { type: Boolean, default: true, required: false }, // 見 element ui 參數/*確定按鈕顯示文字*/okButtonText: { type: String, default: "確 定", required: false }, // 確定按鈕顯示文字/*取消按鈕顯示文字*//*cancelButtonText: { type: String, default: "取 消", required: false }, // 取消按鈕顯示文字*//*顯示按鈕顯示文字*/buttonList: { type: Array, required: false }, // 顯示按鈕列表；如果設置了該參數，默認的按鈕會被覆蓋/*設置寬度*/width: { type: String, required: false, default: "50%" }, // 寬度/*關閉時候銷毀dialog里的元素*/destroyOnClose: { type: Boolean, default: false, required: false }, // 見 element ui 參數/*控制按鈕禁用*/disabled:{type:Boolean},/*控制是否有關閉按鈕*/ShowClose:{type:Boolean,default:false}},data() {return {visible: false,};},methods: {/*控制dialog的顯示*/show() {this.visible = true;},/*控制dialog的關閉*/close() {this.visible = false;this.$emit("close");},/*控制dialog的調用父組件的方法*/ok() {this.$emit("ok");},/*控制組件調用父級的方法*/cancel() {this.$emit("cancel");this.close();}} }; </script><style scoped></style>

?

總結

以上是生活随笔為你收集整理的工作118:封装一个带有对话框的button组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。