vue 复制功能
Vue 功能 复制
2023-09-11 14:22:18 时间
1.下载clipboard.js
npm install clipboard --save
2.引入
挂载到vue 上
import clipboard from 'clipboard' Vue.prototype.Clipboard = clipboard
3. 使用
<div style="align-self: flex-end;"> <span id="tag-read" style="display:block;cursor:pointer;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" :data-clipboard-text="msg" @click="copy">{{msg}}</span> </div>
copy () { let clipboard = new this.Clipboard('#tag-read') const _this = this clipboard.on('success', e => { _this.$message.success('复制成功') clipboard.destroy() }) clipboard.on('error', e => { _this.$message.success('该浏览器不支持复制') clipboard.destroy() }) },
效果:
相关文章
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- vue中v-for数组和对象的循环
- vue开发 - 将方法绑定到window对象,给app端调用
- vue-loader的简单例子
- vue- element-ui table复选框翻页记忆与清除
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- vue_axios请求封装、异常拦截统一处理
- vue-cli是什么?和 webpack是什么关系?
- vue.js 3.0.5:用vue-i18n开发i18n国际化功能(vue-i18n@9.2.0)
- 运行vue项目eslint 校验错误
- 百度地图vue中多个标点和区域面
- vue v-for动画bug
- vue中使用百度地图,悬浮窗搜索功能
- 使用Vue-Router 2实现路由功能
- Vue Router路由变化router-view视图不刷新
- 纯Vue实现网页日常任务清单小功能(数据存储在浏览器)
- Vue学习之--------脚手架的分析、Ref属性、Props配置(2022/7/28)
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- Vue中vue-i18n结合element-ui实现国际化
- 114:vue+openlayers 实现视图联动功能(代码示例 )
- 071:vue+openlayers轨迹路线动画(示例代码)
- Vue(八)vue 脚手架、脚手架创建项目示例
- 【表格动态列】Vue + ElementUI实现表格多行表头以及表格动态列的功能
- vue悬停改变背景颜色