点击复制内容到手机粘贴板(简洁易懂-只需五步)

点击按钮复制内容到手机粘贴板

只需简单五步

第一步

npm install clipboard --save

第二步

在需要的页面引入(注:路径根据文件…/) 代码如下↓

<script>
import ClipboardJS from '../../../node_modules/clipboard/dist/clipboard.js'
export default {
}
</script>

第三步

在点击复制触发的函数里new一个实例出来并挂到this上 代码如下↓

this.clipboardJS = new ClipboardJS('.btn')
//.btn为点击复制按钮的类名

第四步

在按钮上添加类名btn并添加如下代码data-clipboard-text=“需要复制的内容” 代码如下↓

<button class="btn" :data-clipboard-text="kaquan.value">点击复制卡券码</button>

第五步

按钮上添加类名needsclick 解决ios不兼容问题 按钮最终版代码如下↓

<button class="btn needsclick" :data-clipboard-text="kaquan.value">点击复制卡券码</button>

现在点击按钮就可以复制需要复制的内容到手机粘贴板上了,并且不会有ios和安卓的兼容问题

你可能感兴趣的:(Vue,点击按钮复制内容到手机粘贴板)