uni-app运行H5项目遇到的bug和实现复制功能。_uni.setclipboarddata 无效

1.报错的图片:

2.uni.setClipboardData(OBJECT)

//示例如下
uni.setClipboardData({
    data: 'hello',
    success: function () {
        console.log('success');
    }
});
1
2
3
4
5
6
7

3.实际项目中还是不能使用。

4.解决方法:
步骤如下:
1.安装 npm i clipboard --save
2.封装一个方法()

clipboard.js(这是一个js文件封装方法)

import Clipboard from 'clipboard'

 

export function handleClipboard (text, event, onSuccess, onError) {

  event = event || {}

  const clipboard = new Clipboard(event.target, {

    text: () => text

  })

  clipboard.on('success', () => {

    onSuccess()

    clipboard.off('error')

    clipboard.off('success')

    clipboard.destroy()

  })

  clipboard.on('error', () => {

    onError()

    clipboard.off('error')

    clipboard.off('success')

    clipboard.destroy()

  })

  clipboard.onClick(event)

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

3.页面中使用
vue

<view class="content_copy" @click="copy('需要复制的内容')">复制</view>

1
2

js

//引入这个js 并且调用这个方法{handleClipboard}
import {handleClipboard} from '../../utils/clipboard.js'
export default{
//自定义方法在methods中使用
 methods:{
             //复制
			 copy(data) {//这是一个点击事件
			   // #ifdef H5
			  handleClipboard(data, event, () => { //调用封装的复制方法
			    uni.showToast({//弹出
					// icon: 'none',//不显示图标
					icon: 'success',//显示图标
					title: '复制成功'
				})
			 }, ()=>{
				 uni.showToast({
			     icon: 'none',//不显示图标
			     title: '复制失败',
		       })
			})
			// #endif		 
		  },
   }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

icon图标的选项看自己项目的需求来定义。

(vue、uni-app、h5)
总结:需要注意的是本地是否npm下载此插件成功，之后在创建js文件夹调用此方法实现功能。