github.com/easysoft/zendata@v0.0.0-20240513203326-705bd5a7fd67/ui/src/components/DesignModal.vue (about) 1 <template> 2 <div id="design-page"> 3 <a-modal 4 :title="$t('msg.design.title')" 5 width="100%" 6 dialogClass="full-screen-modal" 7 :visible="visible" 8 :closable=true 9 :footer="null" 10 @cancel="cancel" 11 > 12 <design-component 13 ref="designPage" 14 :type="type" 15 :modelProp="modelProp" 16 :time="time" > 17 ></design-component> 18 </a-modal> 19 </div> 20 </template> 21 22 <script> 23 import DesignComponent from "./Design" 24 25 export default { 26 name: 'DefDesignModalComponent', 27 components: { 28 DesignComponent, 29 }, 30 data() { 31 return { 32 }; 33 }, 34 props: { 35 type: { 36 type: String, 37 required: true 38 }, 39 visible: { 40 type: Boolean, 41 required: true 42 }, 43 modelProp: { 44 type: Object, 45 default: () => null 46 }, 47 time: { 48 type: Number, 49 default: () => 0 50 }, 51 }, 52 53 computed: { 54 }, 55 created () { 56 this.$watch('visible', () => { 57 console.log('visible changed', this.visible) 58 if (this.visible) { 59 document.addEventListener("click", this.clearMenu) 60 } else { 61 document.removeEventListener('click', this.clearMenu); 62 } 63 }) 64 }, 65 mounted: function () { 66 console.log('mounted') 67 }, 68 beforeDestroy() { 69 console.log('beforeDestroy') 70 }, 71 methods: { 72 cancel() { 73 console.log('cancel') 74 this.$emit('cancel') 75 }, 76 } 77 } 78 </script> 79 80 <style lang="less" scoped> 81 </style>