Clipboard

clipboard,复制到剪贴板,兼容H5,APP和小程序依然使用平台自带api

组件脚本

  1. /**
  2. * 复制文本 兼容H5
  3. * 来自 ThorUI www.thorui.cn | 文档地址: www.donarui.com
  4. * @author echo.
  5. * @version 1.0.0
  6. **/
  7. // #ifdef H5
  8. importClipboardJSfrom"@/components/utils/clipboard.min.js"
  9. // #endif
  10. const thorui ={
  11. getClipboardData:function(data, callback){
  12. // #ifdef APP-PLUS || MP
  13. uni.setClipboardData({
  14. data: data,
  15. success(res){
  16. uni.getClipboardData({
  17. success(res){
  18. ("function"==typeof callback)&& callback(true)
  19. },
  20. fail(res){
  21. ("function"==typeof callback)&& callback(false)
  22. }
  23. })
  24. },
  25. fail(res){
  26. ("function"==typeof callback)&& callback(false)
  27. }
  28. })
  29. // #endif
  30. // #ifdef H5
  31. letevent= window.event||{}
  32. let clipboard =newClipboardJS("",{
  33. text:()=> data
  34. })
  35. clipboard.on('success',(e)=>{
  36. ("function"==typeof callback)&& callback(true)
  37. clipboard.off('success')
  38. clipboard.off('error')
  39. clipboard.destroy()
  40. });
  41. clipboard.on('error',(e)=>{
  42. ("function"==typeof callback)&& callback(false)
  43. clipboard.off('success')
  44. clipboard.off('error')
  45. clipboard.destroy()
  46. });
  47. clipboard.onClick(event)
  48. // #endif
  49. }
  50. };
  51. module.exports ={
  52. getClipboardData: thorui.getClipboardData
  53. };

使用示例

  1. <script>
  2. const thorui = require("@/components/utils/clipboard.thorui.js")
  3. exportdefault{
  4. components:{
  5. },
  6. data(){
  7. return{
  8. }
  9. },
  10. methods:{
  11. clipboard:function(data){
  12. thorui.getClipboardData(data,(res)=>{
  13. // #ifdef H5
  14. if(res){
  15. this.tui.toast("复制成功")
  16. }else{
  17. this.tui.toast("复制失败")
  18. }
  19. // #endif
  20. })
  21. }
  22. }
  23. }
  24. </script>

预览图

clipboard 复制到剪贴板 - 图1