<template>
  <div v-show="showDialog" class="lx-dialog">
    <div @click="hideDialog" class="mask"></div>
    <div class="lx-dialog__body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'lxDialog',
  props: {
    src: {
      type: String,
      default: ''
    },
    visible: Boolean
  },
  data() {
    return{
      showDialog: this.visible
    }
  },
  watch: {
    visible(val) {
      this.showDialog = val
    }
  },
  mounted() {
    this.$on('hideDialog', () => {
      console.log('hideDialog')
    })
  },
  methods: {
    hideDialog() {
      this.showDialog = false
      this.$emit('update:visible', false);
    }
  },
}
</script>

