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

最新推荐文章于 2024-05-10 21:46:03 发布

原创最新推荐文章于 2024-05-10 21:46:03 发布 · 1k 阅读

6 ·

CC 4.0 BY-SA版权

不许偷代码哦，一键三连以后我的代码就是你的代码！！！

文章标签：

#javascript #开发语言 #ecmascript #前端 #前端框架

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

如何使用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('无法复制到剪贴板！');
    });
  }