双击tag标签如何动态获取el-tag的宽
时间: 2023-08-12 21:32:12 浏览: 61
要动态获取 `el-tag` 的宽度,可以在双击标签的事件处理函数中,通过 `$refs` 获取到 `el-tag` 的 DOM 元素,然后调用其 `getBoundingClientRect()` 方法获取其尺寸信息。
示例代码:
```html
<template>
<div>
<el-tag
v-for="(item, index) in tags"
:key="index"
closable
@close="removeTag(index)"
@dblclick.native="onTagDblClick($event)"
ref="tagItems">
{{ item }}
</el-tag>
</div>
</template>
<script>
export default {
data() {
return {
tags: ["Tag1", "Tag2", "Tag3"],
};
},
methods: {
onTagDblClick(event) {
const tagItem = event.target.closest(".el-tag");
const tagWidth = tagItem.getBoundingClientRect().width;
console.log(tagWidth);
},
removeTag(index) {
this.tags.splice(index, 1);
},
},
};
</script>
```
在这个例子中,我们使用 `ref` 属性给 `el-tag` 添加了一个引用,然后在 `onTagDblClick` 方法中,通过 `event.target.closest()` 方法获取到当前双击的标签元素,然后调用其 `getBoundingClientRect()` 方法获取其尺寸信息,最后将其宽度输出到控制台中。
相关推荐
![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)