Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to use Element el-tag tag". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

1. preface

Tags are often used to describe one or more homogeneous attributes of an object.

For example, describe the user's hobbies, describe the roles that the user has.

el-tag provides the function of dynamically deleting and adding tags, so it is very suitable for scenes where user attributes are dynamically processed.

2. basic usage

The code is as follows:

basic usage

basketball

Use el-tag to create a tag that works like this:

3. adjust the color

You can adjust the label color by using the type attribute:

adjust the color

default color| success color| info color| warning color| Orange color

The effects are as follows:

4. Adjust size

The label's size can be adjusted through the size attribute:

Adjust size

default| medium| small| ultra-small

The effect is as follows:

5. Adjust theme

el-tag also supports different styles of themes, which can be adjusted through the effect attribute, where dark represents a dark theme, light represents a light theme, and plain represents a plain theme:

Adjust theme

default theme| dark theme| light theme| plain theme

The effects are as follows:

6. data binding

You can dynamically bind an array using v-for:

data binding

{{item}}

Data regions are defined as follows:

data() { return { hobbies: "'basketball ', ' football','volleyball'], } },

The effects are as follows:

7. dynamic removal

By setting the property closable, you can display a delete icon on the right side of the tab. Clicking this icon will trigger the @close binding method.

dynamic removal

{{item}}

Method Code:

handleClose(item) { let _this = this; for (let i = 0; i

< _this.hobbies.length; i++) { if (_this.hobbies[i] == item) { _this.hobbies.splice(i, 1); break; } } }, 点击删除后，会从数组移除相应的元素，所以界面上对应的标签也会消失。 8. 动态新增 通过@click指定一个方法，点击方法后弹窗输入新标签项的内容，确定后将输入内容加入标签绑定的数组，就可以实现动态新增了： 动态新增 {{item}} | 新增 方法代码： btnAdd() { let _this = this; _this.$prompt('请输入您的爱好', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', }).then(({ value }) =>

{ _this.hobbies.push(value); }) }

Click Add tab to pop up the window. Click OK to add a new tab:

9. summary

Tags are still more commonly used in daily development work. El-tag encapsulation is very simple and neat, recommended!

Added: Vue adds @click event invalid to el-tag in Element

When doing comment module, I thought about adding click event to el-tag element, but found that it could not be triggered. The code is as follows

scope.row.blog.title}}

When we click on el-tag, we cannot trigger its click event

solution

By consulting the information, it was found that the official gave the answer

That is to say, you must use @click.native to trigger the click behavior, and for button, you can directly use @click. The modified code is as follows, and the click event can be completed normally ~

scope.row.blog.title}}"Element el-tag how to use" content introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.