vue 适配微信浏览器 实现点击按钮复制文本 clipboard
之前写的复制功能发现用微信打开的浏览器页面不生效,所以又换了种方法实现首先,安装 clipboardnpm install clipboard --save然后,引入 clipboardimport Clipboard from 'clipboard'对被点击的文本或按钮绑定动态变量id="btn" :data-clipboard-text="scope.row.courseNo"<!--
·
之前写的复制功能发现用微信打开的浏览器页面不生效,所以又换了种方法实现
首先,安装 clipboard
npm install clipboard --save
然后,引入 clipboard
import Clipboard from 'clipboard'
对被点击的文本或按钮绑定动态变量 id="btn" :data-clipboard-text="scope.row.courseNo"
<!-- 这里scope.row.courseNo是我要复制的内容 -->
<template slot-scope="scope">
<span id="btn" :data-clipboard-text="scope.row.courseNo" @click="copyValue()">{{ scope.row.courseNo }}</span>
</template>
方法
copyValue() {
const Message = this.$message
var clipBoard = new Clipboard('#btn')
clipBoard.on('success', function() {
clipBoard.destroy() // 销毁上一次的复制内容
clipBoard = new Clipboard('#btn')
Message.success('复制成功')
})
clipBoard.on('error', function() {
Message.info('复制失败,请手动复制')
})
},
这样就ok啦~
更多推荐
已为社区贡献5条内容
所有评论(0)