uni-app 官网已提供了复制到剪切板的 API,不过很遗憾,它对 H5 不兼容。 没关系,我们可以对 H5 进行特殊处理已达到全端兼容,具体操作如下:
第一步:安装插件 ue-clipboard2
npm install --save vue-clipboard2
第二步:在 main.js 中引入并挂载
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
第三步:在组件中调用(结合官方 API),在需要触发的事件上绑定该方法即可。
copyText () {
// #ifdef H5
this.$copyText(this.text).then(
res => {
uni.showToast({
title: '复制成功'
})
}
)
// #endif
// #ifndef H5
uni.setClipboardData({
data: this.text,
success: () => {
uni.showToast({
title: '复制成功'
})
}
})
// #endif
}
}