项目需求:为增强用户体验感,点击“复制”按钮时,可实现复制指定的文字或者元素到粘贴板上;
在input、textarea标签时可实现剪切功能。
使用插件:clipboard
插件属性:data-clipboard-text:指定需要复制的内容;
data-clipboard-target:指定复制内容的元素;
data-clipboard-action:指定动作(默认复制)。值为“copy”时,实现复制功能;值为“cut”时,实现“剪切”功能。
插件使用步骤:
安装:npm install clipboard --save
引入:import Clipboard from 'clipboard'
初始化创建实例:let clipboard=new Clipboard('元素')
回调:
成功:clipboard.on('success',function(){});
失败:clipboard.on('error',function(){});
代码:
我的项目只需要复制文本,所以例子是实现文本的。如果要实现复制元素更改下属性即可。
复制文本和复制元素的可视化区别就是:复制文本时,被复制的文本不会有任何反应;复制元素时,被复制元素是选中状态。