【Vue】vue移动端h5网页写入手机剪贴板内容，vue-clipboard2插件一键复制实战

项目场景：

提示：这里简述项目相关背景：

vue移动端项目，在手机端打开网页，一键复制指定内容变量

参考链接1

---

问题描述

提示：这里描述项目中遇到的问题：

复制复制，复制变量到剪贴板

---

解决方案：

1、下载插件

npm install vue-clipboard2 --save

2、引入

在main.js中引入

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

3、在方法中使用

Dialog.alert({
    
    
	title: '请复制链接到浏览器下载',
	message: "你的链接",
	confirmButtonText: "一键复制"
}).then(() => {
    
    
	this.$copyText("你要写入剪贴板的内容").then((e) => {
    
    
			Toast('链接复制成功');
		}, (e) => {
    
    
			Toast('链接复制失败');
		});
	});

可以用变量，可以写在methods方法里面任何的地方。

案例如下

选中的就是你的写入剪贴板内容

let u = navigator.userAgent; // 获取手机型号
let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

判断设备型号。