vue H5如何实现copy功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.order-message-row{
font-size: 40px;
}
</style>
</head>
<body>
<div id="app">
<div class="order-message-row">
<div class="order-message-span">订单编号</div>
<div class="order-message-number">{{orderNumber}}</div>
<van-button @click="copyOrderNumber" type="primary">复制按钮</van-button>
</div>
</div>
</body>
<script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
<!--组件-->
<script>
var vm = new Vue({
el: '#app',
data() {
return {
orderNumber:"sssssssssssssssss"
}
},
created() {
},
mounted() {
},
methods: {
//订单详情粘贴板
copyOrderNumber() {
console.log("1223")
const input = document.createElement('input');
input.value = this.orderNumber; // 获取要复制的文本
document.body.appendChild(input);
input.select(); // 选中文本
document.execCommand('copy'); // 执行复制操作
document.body.removeChild(input); // 移除临时的输入框
alert('订单编号已复制到剪贴板'); // 可选：给用户一个反馈
},
}
}
)
</script>
</html>
粘贴板图
完成 ！！！！