web/src/components/crm-info/IframeDialog.vue

<template>
  <div class="Iframe-dialog">
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      >
      <iframe :src="iframeSrc" width="100%" height="500" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import { Dialog } from 'element-ui'
export default {
  name: 'Iframe-dialog',
  components: {
    [Dialog.name]: Dialog
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    iframeSrc: {
      type: String,
      default: ''
    }
  },
  watch: {
    showDialog: {
      handler (newval) {
        this.dialogVisible = newval
        if (!newval) {
          this.getEmployInfo()
        }
      },
      immediate: true
    },
    dialogVisible (newval) {
      this.$emit('setDialogStatus', newval)
    }
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    getEmployInfo () {
      this.$emit('getEmployInfo')
    }
  }
}
</script>
<style lang="scss" scoped>
.Iframe-dialog{}
</style>