// 模態框組件，統一化，方便管理 ~~~ <template> <Modal v-model="show" v-bind="$attrs" v-on="$listeners"> <div slot="header" class="modal-header"> <span class="title">{{ $attrs.title }}</span> </div> <slot></slot> <div slot="footer" class="modal-footer"> <ErsButton type="primary" class="close-btn" @click="handleClose" >取消</ErsButton > <ErsButton @click="handleConfirm" :loading="loading" :disabled="isDisabled" >確定</ErsButton > </div> </Modal> </template> <script> export default { inheritAttrs: false, name: "ErsModal", props: { // 彈窗標題 // modalTitle: { // type: String, // default: () => "" // }, // v-model value: { type: Boolean, default: () => false }, // 點擊確定后，是否在外部控制彈窗消失 closeByOuter: { type: Boolean, default: () => false }, loading: { type: Boolean, default: () => false }, isDisabled: { type: Boolean, default: () => false } }, data() { return { show: this.value }; }, watch: { show(n) { this.$emit("input", n); }, value(n) { this.show = n; } }, methods: { handleClose() { this.$emit("on-close"); this.show = false; }, handleConfirm() { this.$emit("on-confirm"); if (!this.closeByOuter) { this.show = false; } } } }; </script> <style scoped lang="scss"> .modal-header { .title { @include scw(1.04rem, #ffffff, 700); } } // .modal-footer { // .close-btn { // display: inline-block; // vertical-align: middle; // @include TBase; // cursor: pointer; // margin-right: 2rem; // &:hover { // color: $primary-color; // } // } // } </style> ~~~