dzhh-frontend/.svn/pristine/f5/f57d849bc5cc6dcbd2a7ec448da9a134590dbc42.svn-base

<template>
  <a-modal
    title="配置地址"
    :visible="onlineUrlVisible"
    @cancel="handleOnlineUrlClose">
    <template slot="footer">
      <a-button @click="handleOnlineUrlClose">关闭</a-button>
      <a-button type="primary" class="copy-this-text" :data-clipboard-text="url" @click="onCopyUrl">复制</a-button>
    </template>
    <template v-if="typeof url === 'string'">
      <p>{{ url }}</p>
    </template>
    <template v-for="(item,i) in url">
      <p :key="i"><span>{{item.label}}</span><span>{{ item.url }}</span></p>
    </template>
  </a-modal>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  name: 'ConfigUrlModal',
  props: {
    url: {
      type: [String, Array],
      default: () => []
    }
  },
  data() {
    return {
      onlineUrlVisible: false
    }
  },
  computed: {

  },
  mounted() {

  },
  methods: {
    onCopyUrl() {
      var clipboard = new Clipboard('.copy-this-text')
      clipboard.on('success', () => {
        clipboard.destroy()
        this.$message.success('复制成功')
        this.handleOnlineUrlClose()
      })
      clipboard.on('error', () => {
        this.$message.error('该浏览器不支持自动复制')
        clipboard.destroy()
      })
    },
    handleOnlineUrlClose() {
      this.onlineUrlVisible = false
    },
    setOnlineUrlVisible(value) {
      this.onlineUrlVisible = value
    }
  }
}
</script>