点击按钮实现复制

2020-02-27  本文已影响0人  人生的旅行
  1. 安装 npm i clipboard -S
  2. 在需要使用的页面中引入 import clipboard from 'clipboard'
  3. 在mouted钩子中实例化clipboard
    上代码:
    html部分:
   <div class="share-way-list">
          <div class="share-way">
            <input type="text" v-model="link" id="copy_link">
            <img class="linkBtn" src="../assets/images/icon_link.png" @click="copyLick" data-clipboard-target="#copy_link" alt />
          </div>
   </div>

js部分:

// 完成挂载,相当于dom ready
  mounted () {
    let self = this
    self.clipboard = new Clipboard('.linkBtn', {
      text: () => self.link // 返回需要复制的内容
    })
    // this.clipboard = new Clipboard('.linkBtn')
    window.myapi.do_post('frontSystem/isSystemManager/' + self.$store.state.currentSystemId).then(res => {
      if (res.data === false) {
        self.isShare = false
      }
    })
  },
 methods: {
   copyLick () {
      let _this = this
      this.clipboard.on('success', function () {
        // console.log(_this.link)
        _this.$toast('复制成功')
      })
      this.clipboard.on('error', function () {
        _this.$toast('复制失败,请重试')
      })
    }
}
上一篇下一篇

猜你喜欢

热点阅读