vue实现复制功能(项目使用)
2024-10-06 23:49:33
安装依赖
npm install --save vue-clipboard2
用法:
import Vue
import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard)
Demo:
<template id="demo">
<div class="container">
<input type="text" v-model="message">
<button type="button"
v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError">复制</button>
</div>
</template>
<script>
new Vue({
el: '#app',
template: '#demo',
data: function () {
return {
message: '啦啦啦,这是复制的内容!'
}
},
methods: {
onCopy: function (e) {
console.log('你刚刚复制: ' + e.text)
},
onError: function (e) {
console.log('无法复制文本!')
}
}
})
</script>
后记:vue简直把懒惰发挥到了极致,为棒棒的自己点赞
最新文章
- Highcharts使用指南
- STM32之PWM波形输出配置总结
- Android之Fragment(一)
- spring mvc返回json字符串数据,只需要返回一个java bean对象就行,只要这个java bean 对象实现了序列化serializeable
- Shell指令
- 《python源代码剖析》笔记 python中的Dict对象
- 64位windows8.1编译openjdk8
- Angular - - angular.Module
- 将Flask应用程序部署在nginx,tornado的简单方法
- CentOS6.5 [ERROR] /usr/libexec/mysqld: Can&#39;t create/write to file &#39;/var/lib/mysqld/mysqld.pid&#39; (Errcode: 2)
- Elasticsearch笔记四之配置参数与核心概念
- DS控件库 DS按钮多种样式
- Linux 系统假死的解决方案
- python3+Robot Framework+PyCharm环境部署及执行脚本
- Axis接口
- abaqus重新划分网格
- C#实现RSA加密与解密、签名与认证(转)
- January 04th, 2018 Week 01st Thursday
- H3C系列之三层交换机开启telnet管理的配置
- SQL Server 存储过程 (需整理)