这段代码,能否改成直接从vue实例中来拿,也就是从this中拿。event.target.classList.contains('el-tag')
时间: 2024-04-08 17:34:57 浏览: 23
当您在 Vue 组件中使用`@click`绑定的方法时,可以直接`this`关键字来访问 Vue 实例中的属性和方法。因此,您可以改为使用`this.$el.contains(event.target)`来判断点击的元素是否位于分类按钮区域。以下是修改后的代码示例:
```html
<div class="card-event" @click="linkGameInfo(item.id, $event)">
<!--卡片中"标题"区域-->
<div class="title">{{ item.title }}</div>
<!--卡片中"分类按钮"区域-->
<div>
<el-tag v-for="type in item.typeList" :key="type" type="info" style="margin-left: 2px">
{{ type }}
</el-tag>
</div>
</div>
```
```javascript
methods: {
linkGameInfo(id, event) {
if (!this.$el.contains(event.target)) {
// 执行点击事件
// your code here
}
}
}
```
在上述代码中,`this.$el`表示当前组件的根元素,即`<div class="card-event">`。通过调用`contains()`方法并传入`event.target`参数,可以判断点击的元素是否位于该根元素内部。如果不位于内部,则执行点击事件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)