vue项目实现剪切板功能(vue-clipboard2)

小蘑菇

方法/步骤:

1. 安装vue-clipboard2插件

npm install --save vue-clipboard2 

image.png

2. 查看配置文件package.json,检查vue-clipboard2是否安装成功
image.png

3. 启动服务 npm run dev
image.png

4. main.js添加

import Vue
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

image.png

5. copy组件

v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError"

image.png

6. 查看效果
点击按钮,弹框显示了copy的内容,后两张图是在微信的输入框中测验刚刚的copy是否真的复制到了剪切板中。
image.png
image.png
image.png

注:以上方式:已测过,可用

阅读 141
537 声望
648 粉丝
0 条评论
你知道吗?

537 声望
648 粉丝
宣传栏