VUE使用v-clipboard复制到剪切板(数据在复制的时候从后台获取)

v-clipboard类库地址： https://github.com/euvl/v-clipboard
用法：

<template>
  <div>
    <Modal
      width="600px"
      :title="`API Token`"
      v-model="modal.show"
      scrollable
      class-name="vertical-center-modal">
      <div>
        <Form :model="modal.form" label-colon :label-width="150" ref="formValidate">
          <formItem label="API Token">
            <span class="token">{{short}}</span>     
            <a class="copy-token" v-clipboard="() => short"  @click="copy">复制</a>
            <a @click="handleUpdateToken()">更新</a>
          </formItem>
        </Form>
      </div>
      <div slot="footer">
        <Button type="primary" @click="handleButtonClickClose">关闭</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import constants from '@/constants'
import { getToken, updateToken, } from "@/api/api-token";

export default {
  name: 'api_token_modal',
  props: {
    message: Object
  },
  components: {},
  data () {
    return {
      constants: constants,
      modal: {
        show: false,
        form: {
          id: 478,
          name: "lg",
          token: "xxx"
        },
      },
    }
  },
  computed: {},
  watch: {
    message: {
      handler (n, o) {

      }
    }
  },
  methods: {
    init () {
      let self = this
      ;(async function () {
        await self.getAllData()
      })().catch(e => {
        // 异步，顶层 promise 的 error 不会被外部捕捉，所以必须 catch
        throw e
      })
    },

    // 获取所有数据
    async getAllData () {
      let promises = []
      promises.push(this.getToken())
      await Promise.all(promises)
    },

    async getToken () {
      let res = await getToken()
      let data = res.data
      this.modal.form = data.data
    },

    // 更新token
    handleUpdateToken () {
      this.updateToken()
    },

    async updateToken () {
      let res = await updateToken()
      let data = res.data
      this.modal.form = data.data
    },

    handleButtonClickClose () {
      this.modal.show = false
    },

	copy () {
      this.getShortUrl()
    },
    
    async getShortUrl () {
      let res = await getShortUrl({ })
      this.short = res.data.data
      if(this.short){
        this.$clipboard(window.location.href+'&short_url='+this.short)
        this.$Message.success('复制成功')
      }else{
        this.$Message.error('复制失败')
      }
    },
  },
  mounted () {
    this.init()
  },
  beforeDestroy () {

  }
}
</script>
<style lang="less" scoped>
  .token {
    color: rgb(48, 188, 100);
    font-weight: bold;
  }

  .copy-token {
    margin: 0 20px 0 20px
  }
</style>