vue项目中使用Clipboard复制文本内容详解
Vue
2024-03-15 19:48:26
网站开发中关于文本复制是前端常见的开发需求之一,通过点击按钮将指定文本内容复制到剪切板中。
那么在vue项目开发中,可以如何实现文本复制的功能呢?
在vue中关于文本的复制,就需要提到Clipboard插件。使用Clipboard可以将指定文本内容复制到电脑或手机剪切板中。
Clipboard具体使用流程如下:
一、安装Clipboard插件
npm install clipboard --save
二、html内容部分
<el-button class="copy-btn" data-clipboard-text="复制文本内容">复制</el-button>
三、javascript内容部分
import Clipboard from 'clipboard';
export default {
data() {
return {
};
},
mounted() {
const clipboard = new Clipboard('.copy-btn'); // .copy-btn为按钮元素的class名称或选择器
clipboard.on('success', (e) => {
console.log('复制成功!');
e.clearSelection(); // 清除选中文本
});
clipboard.on('error', () => {
console.warn('无法复制到剪贴板!');
});
},
}
注意项:
1、data-clipboard-text中定义需要复制的文本内容。
2、需注意指定class类名
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
881篇文章
1064人已阅读