1.在component文件夹下创建目录copyButton，右键新建Component自动生成文件
2.html
<!--component/copyButton.wxml--><view class="button-box"><!-- vant提示组件 --><van-toast id="van-toast" /><!-- 使用catchtap阻止冒泡；data-copy传入的值就是组件接收的值--><view class="copy-btn" catchtap="copywxtap" data-copy='{{copyValue}}'>复制</view></view>
3.css
/* component/copyButton.wxss *//* 复制按钮 */.copy-btn {width: 73rpx;height: 32rpx;line-height: 32rpx;text-align: center;background: #FFECEC;border-radius: 16px;color: #FF4E4E;font-size: 24rpx;display: inline-block;margin-left: 24rpx;}
4.js
// component/copyButton.jsimport Toast from '../../wxcomponent/vant/dist/toast/toast';Component({/*** 组件的属性列表*/properties: {copyValue: {type: String,value: ''}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {// 点击复制copywxtap:function(e){var code = e.currentTarget.dataset.copy;console.log('复制的内容-----',code);wx.setClipboardData({data: code,success: function (res) {// wx.showToast({// title: '复制成功',// });Toast('复制成功')},fail:function(res){// wx.showToast({// title: '复制失败',// });Toast('复制失败')}})},}})
5.在页面中注册组件
在对应页面的json文件中定义：
"usingComponents": {"copyButton":"component/copyButton/copyButton",}
6.在全局注册公共组件
app.json文件中定义:
"usingComponents": {"copyButton":"component/copyButton/copyButton",}
7.在页面中使用
<copyButton copyValue="需要传入的值"/>
