美文网首页
点击按钮实现复制

点击按钮实现复制

作者: 人生的旅行 | 来源:发表于2020-02-27 10:33 被阅读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('复制失败,请重试')
          })
        }
    }
    

    相关文章

      网友评论

          本文标题:点击按钮实现复制

          本文链接:https://www.haomeiwen.com/subject/rpfpzctx.html