clipboard报错Uncaught TypeError: element.hasAttribute is not a function

本文介绍了如何在Vue项目中安装和使用clipboard插件,展示了如何在HTML结构中绑定元素进行复制操作,同时提到了一个常见错误——文本类型问题,指出必须确保传递给clipboard的文本是字符串类型。
摘要由CSDN通过智能技术生成

如何使用clipboard

安装clipboard

npm install clipboard --save

引入Clipboard

import Clipboard from 'clipboard';

html结构

 <div class="details-intro">订单备注: 12313</div>
<span class="details-intro-span">复制</span>

绑定元素

注意一定要写在组件加载完毕之后,不然会找不到节点

export default {
  name: '',
  components: {},
  props: {},
  data () {
    orderId: '15151515'
	},
	mounted () {
    // 创建Clipboard对象
    const clipboard = new Clipboard('.details-intro-span', {
      text: () => this.$data.orderId
    });
    console.log(clipboard);
    // 添加成功事件处理函数
    clipboard.on('success', (e) => {
      console.log('已复制到剪贴板!');

      // 清除选区(如果有)
      e.clearSelection();
    });

    // 添加失败事件处理函数
    clipboard.on('error', () => {
      console.warn('无法复制到剪贴板!');
    });
  }

这种cv过去直接可以用

Uncaught TypeError: element.hasAttribute is not a function

这个错误
在这里插入图片描述
是因为赋值的文本不能是number类型,必须是字符串类型
在这里插入图片描述
注意注意了,不管你要传什么值都得用引号包裹起来 ’ ’
在这里插入图片描述
在这里插入图片描述
现在就好了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值