<template>
  <div class="dialog">
    <div class="preview">点击预览可以查看弹窗效果</div>
    <van-dialog
      v-model="showDialog"
      :title="title"
      :get-container="getContainer"
      :overlay-style="{position:'absolute'}"
      style="position: absolute"
    >
      <div style="padding: 10px" v-html="content" />
    </van-dialog>
  </div>
</template>

<script>
// import { Dialog } from 'vant'

export default {
  name: 'DkDialog',
  components: {
    // vanDialog: Dialog.Component
  },
  props: {
    title: { default: '标题', type: String },
    show: { default: false, type: Boolean },
    content: { default: '', type: String },
    confirmText: { default: '确定', type: String },
    copy: { default: '0', type: [Number, String] },
    copyType: { default: 'text', type: String },
    copyText: { default: '复制的内容', type: String },
    copyHtml: { default: '复制的富文本', type: String }
  },
  data() {
    return {
      showDialog: false
    }
  },
  computed: {},
  watch: {
    show() {
      this.showDialog = true
    }
  },
  mounted() {

  },
  methods: {
    getContainer() {
      return document.querySelector('.phone-body')
    }
  }
}
</script>

<style scoped lang="scss">
.dialog {
  .preview {
    text-align: center;
    background: #fff;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
