currentTarget vue 获得当前div的class
时间: 2024-05-08 20:22:33 浏览: 15
在 Vue 中,可以使用 `$event.currentTarget` 来获取当前触发事件的元素,然后通过 `classList` 属性获取该元素的 class 列表。以下是一个示例:
HTML 代码:
```html
<div class="example" @click="handleClick"></div>
```
Vue 组件中的 `handleClick` 方法:
```javascript
methods: {
handleClick(event) {
const currentTarget = event.currentTarget;
const classList = currentTarget.classList;
console.log(classList);
}
}
```
在控制台中会输出当前元素的 class 列表。
相关问题
<template> <div> <div class="up_img_item" v-for="(item, index) in chooseImgs" :key="index" @click="handleRemoveImg(index)" :data-index="index"> <UpImg :src="item"></UpImg> </div> </div> </template>其功能想用// 点击 自定义图片组件 handleRemoveImg(e) { // 2 获取被点击的组件的索引 const { index } = e.currentTarget.dataset; // 3 获取data中的图片数组 let { chooseImgs } = this.data; // 4 删除元素 chooseImgs.splice(index, 1); this.setData({ chooseImgs }) }在hbuilderx的vue上要怎么改才可以
在HBuilderX的Vue项目中,如果你想要将上述功能转换为Vue语法,你可以按照以下步骤进行修改:
1. 在Vue组件的template部分,使用`v-for`指令来循环遍历`chooseImgs`数组,并设置`key`属性为索引值。在每个循环项中绑定点击事件,并传递索引值。具体代码如下:
```html
<template>
<div>
<div class="up_img_item" v-for="(item, index) in chooseImgs" :key="index" @click="handleRemoveImg(index)" :data-index="index">
<UpImg :src="item"></UpImg>
</div>
</div>
</template>
```
在上面的代码中,我们使用了Vue的`v-for`指令来循环遍历`chooseImgs`数组,并使用`:key`属性设置了唯一的键值。在每个循环项的父元素上绑定了点击事件`@click`,并通过`:data-index`属性传递了索引值。
2. 在Vue组件的script部分,定义`handleRemoveImg`方法。具体代码如下:
```javascript
<script>
export default {
methods: {
handleRemoveImg(index) {
// 3 获取data中的图片数组
let chooseImgs = this.chooseImgs;
// 4 删除元素
chooseImgs.splice(index, 1);
this.chooseImgs = chooseImgs;
}
}
}
</script>
```
在上面的代码中,我们定义了一个名为`handleRemoveImg`的方法,并接收了索引值作为参数。在该方法内部,我们获取`chooseImgs`数组,并使用`splice()`方法删除指定索引的元素。
请根据你的具体需求修改代码中的类名、属性名以及其他相关的部分。希望这可以帮助到你!如果你还有其他问题,请随时提问。
Vue不禁用滚动条情况下,实现touchmove
如果你想在Vue中同时使用touchmove事件和滚动条,可以使用一些技巧来避免冲突,让它们和谐共存。
具体实现方法如下:
1. 在需要使用touchmove事件的元素上添加v-touchmove指令。
2. 在touchmove事件处理函数中,判断手指移动的方向,如果是竖直方向,则禁用默认的滚动条,并手动实现滚动效果。
3. 如果是水平方向,则不禁用滚动条,让浏览器默认处理事件。
示例代码如下:
```html
<template>
<div class="container">
<div class="content" v-touchmove="handleTouchMove">
<!-- content here -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
startY: 0,
lastY: 0,
isVertical: false
}
},
methods: {
handleTouchMove(e) {
const touch = e.touches[0]
const currentY = touch.clientY
if (!this.startY) {
this.startY = currentY
}
this.lastY = currentY
const distance = this.lastY - this.startY
if (Math.abs(distance) > 10) {
this.isVertical = true
e.preventDefault()
const contentEl = e.currentTarget
const scrollTop = contentEl.scrollTop
contentEl.scrollTop = scrollTop - distance
}
}
}
}
</script>
<style>
.container {
width: 100%;
height: 100%;
overflow: auto;
}
.content {
width: 100%;
height: 100%;
}
</style>
```
在上面的代码中,我们将容器元素的overflow属性设置为auto,启用滚动条。然后给内容元素添加v-touchmove指令,处理touchmove事件。在事件处理函数中,判断手指移动的方向,如果是竖直方向,则禁用默认的滚动条,并手动实现滚动效果。如果是水平方向,则不禁用滚动条,让浏览器默认处理事件。
希望这能够帮助到你解决问题。