vue复制到剪切板
VUE 中实现复制到剪切板,在电脑任何位置可复制功能
1、环境
vue 、 clipboard
2、使用步骤
1) 安装依赖包
npminstall vue-clipboard2--save
- 引入安装包
1、 脚手架搭建的用户
import Vue from 'vue'import VueClipboardfrom 'vue-clipboard2'Vue.use( VueClipboard )2、独立使用( 注意:vue-clipboard2需要再vue.js后面引入 )
- 页面中使用
1、 html结构
复制链接
2、JS操作 methods:{
// 复制成功
onCopy(e){
this.$message({
message:'复制成功!',
type:'success'
})
},
// 复制失败
onError(e){
this.$message({
message:'复制失败!',
type:'error'
})
},
}
3、实际项目中
3.1 clipboard 插件引入
文章图片
clipboard 插件的引入.jpg 3.2 clipboard方法的操作
文章图片
clipboardjs 方法的操作.jpg 【vue复制到剪切板】3.3 dom 结构中方法的绑定
文章图片
dom结构中方法的绑定.jpg
推荐阅读
- 2018-02-06第三天|2018-02-06第三天 不能再了,反思到位就差改变
- 一个小故事,我的思考。
- Docker应用:容器间通信与Mariadb数据库主从复制
- 第三节|第三节 快乐和幸福(12)
- 你到家了吗
- 遇到一哭二闹三打滚的孩子,怎么办┃山伯教育
- 死结。
- 赢在人生六项精进二阶Day3复盘
- 子龙老师语录
- 异地恋中,逐渐适应一个人到底意味着什么()