vue 复制功能

1.下载clipboard.js

npm install clipboard --save 

2.引入 

挂载到vue  上

import clipboard from 'clipboard'
 Vue.prototype.Clipboard = clipboard

3. 使用

      <div style="align-self: flex-end;">
              <span id="tag-read" style="display:block;cursor:pointer;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"  :data-clipboard-text="msg" @click="copy">{{msg}}</span>
            </div>
      copy () {
        let clipboard = new this.Clipboard('#tag-read')
        const _this = this
        clipboard.on('success', e => {
          _this.$message.success('复制成功')
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          _this.$message.success('该浏览器不支持复制')
          clipboard.destroy()
        })
      },

效果:

 

posted @ 2020-03-16 10:30  1点  阅读(154)  评论(0编辑  收藏  举报