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

方法/步骤:

1. 安装vue-clipboard2插件

npm install --save vue-clipboard2 

vue项目实现剪切板功能(vue-clipboard2)_第1张图片

2. 查看配置文件package.json,检查vue-clipboard2是否安装成功
vue项目实现剪切板功能(vue-clipboard2)_第2张图片

3. 启动服务 npm run dev
vue项目实现剪切板功能(vue-clipboard2)_第3张图片

4. main.js添加

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

vue项目实现剪切板功能(vue-clipboard2)_第4张图片

5. copy组件

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

vue项目实现剪切板功能(vue-clipboard2)_第5张图片

6. 查看效果
点击按钮,弹框显示了copy的内容,后两张图是在微信的输入框中测验刚刚的copy是否真的复制到了剪切板中。
vue项目实现剪切板功能(vue-clipboard2)_第6张图片
vue项目实现剪切板功能(vue-clipboard2)_第7张图片
vue项目实现剪切板功能(vue-clipboard2)_第8张图片

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

你可能感兴趣的:(vue.js)