Vue项目实现文字/元素复制、剪切功能（一）

需求：为增强用户体验感，点击“复制”按钮时，可实现复制指定的文字或者元素到粘贴板上；

                   在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(){});

代码：

        

        

        

        

我的项目只需要复制文本，所以例子是实现文本的。如果要实现复制元素更改下属性即可。

复制文本和复制元素的可视化区别就是：复制文本时，被复制的文本不会有任何反应；复制元素时，被复制元素是选中状态。

tips:除了该文的插件外，还可以用vue-clipboard2