zl程序教程

您现在的位置是:首页 >  前端

当前栏目

vue 复制功能

Vue 功能 复制
2023-09-11 14:22:18 时间

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()
        })
      },

效果: