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

最新推荐文章于 2023-12-12 21:33:06 发布

由本

最新推荐文章于 2023-12-12 21:33:06 发布

阅读量1.4k

点赞数 2

分类专栏： Vue 文章标签：点击按钮复制内容到手机粘贴板

本文链接：https://blog.csdn.net/qq_45043019/article/details/101673919

版权

21 篇文章 0 订阅

订阅专栏

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

只需简单五步↓

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和安卓的兼容问题

由本

关注