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

代码:

npm 安装命令
安装成功后可在package.json看见版本号
在需要使用的页面引入插件
添加复制属性、实现复制方法
定义方法,绑定元素

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容