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
}
}