VUE 实现复制内容到剪贴板功能
程序员文章站
2022-04-13 22:23:29
注: 依赖第三方插件 clipboard 一、安装插件 二、全局注入(main.js) 三、使用 四、效果图 ......
注: 依赖第三方插件 clipboard
一、安装插件
npm install vue-clipboard2 --save
二、全局注入(main.js)
import vueclipboard from 'vue-clipboard2' vue.use(vueclipboard)
三、使用
<ul class="file-list"> <li v-for="(f, index) of files" :key="index"> <span>[文件{{index + 1}}] {{f}}</span> <span class="copy-btn" v-clipboard:copy="f" v-clipboard:success="oncopy" v-clipboard:error="onerror">复制</span>
</li>
</ul>
// 复制成功时的回调函数
oncopy (e) { this.$message.success("内容已复制到剪切板!") },
// 复制失败时的回调函数
onerror (e) {
this.$message.error("抱歉,复制失败!")
}
四、效果图
上一篇: vue-router 用户登陆
下一篇: OO——电梯作业总结