vue 获取当前点击元素自定义属性

可以通过 $event 对象获取当前点击元素的自定义属性，具体代码如下：

<template>
  <div>
    <button @click="handleClick" data-id="123">点击</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      const id = event.target.dataset.id;
      console.log(id); // 输出 123
    },
  },
};
</script>

在上面的代码中，我们给 button 元素添加了一个自定义属性 data-id，并且在点击事件的回调函数中通过 $event.target 获取当前点击的元素，并通过 dataset.id 获取自定义属性的值。

相关问题

vue2 的自定义属性

在Vue 2中，自定义属性通常用于注入组件内部的一些配置或者状态，它们是以`v-`开头，例如`v-bind`, `v-model`, `v-on`等。然而，除了官方提供的那些属性之外，开发者还可以创建自己的自定义指令来扩展组件的行为。

自定义属性一般有以下几个步骤：

1. 定义指令：在组件的选项对象里，使用`directives`属性定义一个对象，键是自定义属性名，值是一个对象，包含了指令的名称（通常是驼峰式命名）、处理器函数（handler function）以及相关的选项。

   directives: {
     customAttribute: {
       bind: function (el, binding, vnode) {
         // 当绑定发生时，这里会执行
       },
       update: function (el, binding, vnode) {
         // 当绑定值更新时，这里会执行
       },
       unbind: function (el, binding, vnode) {
         // 当解绑时，这里会执行
       }
     }
   }

2. 使用自定义属性：在模板中，使用自定义的`v-customAttribute`语法将值绑定到元素上。

   <div v-customAttribute="myCustomValue"></div>

3. 处理器函数：这里的处理器函数可以访问`binding.value`获取绑定的值，`el`表示当前元素，`vnode`提供了一些关于虚拟DOM的信息。

注意，虽然你可以使用自定义属性，但为了保持代码的清晰性和兼容性，建议尽量使用Vue提供的标准属性如`v-bind`, `v-model`, 和 `v-on`。

vue mousedown 给鼠标设置自定义图片

可以通过设置样式来实现给鼠标设置自定义图片，具体步骤如下：

1. 在需要设置自定义鼠标图片的元素上绑定 mousedown 事件。
2. 在 mousedown 事件的回调函数中，通过 event 对象获取当前鼠标的坐标位置，并创建一个新的 img 元素，设置它的 src 属性为需要的自定义图片。
3. 设置新创建的 img 元素的样式，包括 position、z-index、width、height、top 和 left 等属性，使其覆盖在鼠标位置上。
4. 将新创建的 img 元素添加到 body 元素中。
5. 在 mouseup 事件的回调函数中，移除新创建的 img 元素。

以下是示例代码：

<template>
  <div class="container" @mousedown="handleMouseDown">
    <!-- 点击这个元素时会出现自定义鼠标图片 -->
    Click me!
  </div>
</template>

<script>
export default {
  methods: {
    handleMouseDown(event) {
      // 获取当前鼠标位置
      const x = event.pageX;
      const y = event.pageY;

      // 创建新的 img 元素
      const img = document.createElement('img');
      img.src = 'your-custom-image-url.png';

      // 设置样式
      img.style.position = 'absolute';
      img.style.zIndex = '9999';
      img.style.width = '30px';
      img.style.height = '30px';
      img.style.top = `${y}px`;
      img.style.left = `${x}px`;

      // 添加到 body 元素中
      document.body.appendChild(img);

      // 监听 mouseup 事件，移除新创建的 img 元素
      document.addEventListener('mouseup', () => {
        img.remove();
      }, { once: true });
    },
  },
};
</script>

在上面的示例代码中，我们在 container 元素上绑定了 mousedown 事件，并在事件回调函数中创建了一个新的 img 元素，设置它的样式，并添加到 body 元素中。在 mouseup 事件的回调函数中，我们通过 img.remove() 方法将新创建的 img 元素移除。