有些在移动端中需求是长按文本或者点击复制按钮进行赋值文本,我先给你们说说长按进行复制吧
长按文本进行复制
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");
},