vue移动端项目实现粘贴复制文本功能

有些在移动端中需求是长按文本或者点击复制按钮进行赋值文本，我先给你们说说长按进行复制吧

长按文本进行复制
1 先要引入插件clipboard

npm install clipboard --save

2 使用的页面进行引入

import Clipboard from 'clipboard'

HTML代码

<div  class="code"  :data-clipboard-text="userInfo.account"  @click="copy">
        <div>{{userInfo.account}}</div>
  </div>

:data-clipboard-text是引入clipboard的方法名，点击文本复制哪个后边就写哪个参数名

js逻辑代码

copy () {
      var clipboard = new Clipboard('.code')//创建一个新的
      //这里有一个重要的地方。我们创建的clipboard后边括号里面的要跟上面起的class类名对得上
      clipboard.on('success', e => {
        console.log('复制成功', e)
        Toast({
          message: '复制成功'
        })
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        Toast({
          message: '手机权限不支持复制功能'
        })
        console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
     }

这样就可以实现长按文本进行复制了

点击复制按钮进行复制文本内容

当然也是要引入插件并引入使用

npm install clipboard --save
//在用的vue页面进行引入
import Clipboard from 'clipboard'

HTML代码

  <div class="div_box_deilysharedetails_serve">
      <div class="div_box_deilysharedetails_servetitle" v-html="servetitle">
        {{ servetitle }}
      </div>
      <div>
        <van-button
          type="default"
          size="mini"
          plain
          round
          :data-clipboard-text="servetitle"
          @click="copyFn"
          id="copy_title"
          >复制</van-button
        >
      </div>
    </div>

JS代码

其实和上个方法的js代码一样的，要注意创建新的Clipboard后边跟的类名哦
 copyFn() {
      var clipboard = new Clipboard("#copy_title");
      clipboard.on("success", (e) => {
        Toast("复制成功");
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        Message({
          message: "该浏览器不支持复制",
          type: "warning",
        });
        clipboard.destroy();//清除缓存
      });
      gioTrack("shareDailyCount");
    },