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>