smsb-web-develop/src/components/dialog/EventTargetDialog/index.vue

<template>
  <confirm-dialog
    ref="confirmDialg"
    size="lg fixed"
    v-bind="$attrs"
    v-on="listeners"
  >
    <template #default>
      <event-target-picker
        ref="eventTargetPicker"
        class="l-flex__fill"
        :ratio="ratio"
      />
    </template>
  </confirm-dialog>
</template>

<script>
export default {
  name: 'EventTargetDialog',
  props: {
    ratio: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      eventTarget: null
    }
  },
  computed: {
    listeners () {
      return {
        ...this.$listeners,
        confirm: this.onConfirm
      }
    }
  },
  methods: {
    show (eventTarget) {
      this.eventTarget = eventTarget || {}
      this.$refs.confirmDialg.show()
    },
    onConfirm (done) {
      const value = this.$refs.eventTargetPicker.getValue()
      if (value) {
        this.$emit('confirm', {
          value,
          snapshot: this.$refs.eventTargetPicker.getSnapshot(),
          done
        })
      }
    }
  }
}
</script>