YbTagsInput 标签输入框
# 基本使用
敲击回车键后，输入内容将成为标签。标签内容如果为空串或者纯空格时，则会被过滤。
酒店 抖音
+0
<template>
<div>
<div style="width: 100%">
<yb-tags-input
ref="tagsInput"
v-model="tags"
clearable
@change="change"
>
</yb-tags-input>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tags: ['酒店', '抖音'], // 父组件中的标签数据
};
},
// mounted() {
// setTimeout(() => {
// this.tags = ['好运来', '迷糊'];
// }, 4000);
// },
methods: {
change() {
console.log('变化', this.tags);
},
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
显示 复制 复制
# 批量添加
可以使用 separators 设置分隔符，来实现批量输入，默认支持空格、英文逗号、英文分号。
酒店 抖音
+0
<template>
<div>
<div style="width: 100%">
<yb-tags-input
ref="tagsInput"
v-model="tags"
placeholder="请输入文本"
:separators="[',',' ',';']"
@change="change"
>
</yb-tags-input>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tags: ['酒店', '抖音'], // 父组件中的标签数据
};
},
methods: {
change() {
console.log('变化');
},
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
显示 复制 复制
# 允许一键清空
clearable 属性控制是否显示全部清除按钮
酒店 抖音
+0
<template>
<div style="width: 100%">
<yb-tags-input
v-model="tags"
:clearable="true"
placeholder="可一键清除"
@clearAll="clearAll"
@change="change"
@tagRemove="tagRemove"
/>
</div>
</template>
<script>
export default {
data() {
return {
tags: ['酒店', '抖音'], // 父组件中的标签数据
};
},
methods: {
clearAll() {
console.log(this.tags, 'clearAll');
},
change() {
console.log(this.tags, 'change');
},
tagRemove(str) {
console.log(str, this.tags, 'tagRemove');
},
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
显示 复制 复制
# 禁用状态
disabled 属性控制是否禁用标签输入框。
酒店 抖音
+0
<template>
<div style="width: 100%">
<yb-tags-input v-model="tags" disabled />
</div>
</template>
<script>
export default {
data() {
return {
tags: ['酒店', '抖音'], // 父组件中的标签数据
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
显示 复制 复制
# 尺寸大小
可使用 size 设置输入框和标签的大小。
+0
+0
+0
<template>
<div style="width: 100%">
<yb-tags-input size="mini" placeholder="mini" />
<br />
<yb-tags-input size="small" placeholder="small" />
<br />
<yb-tags-input size="medium" placeholder="medium" />
</div>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
显示 复制 复制
# 失焦后自动创建标签
addOnBlur 属性控制是否失焦后自动创建标签，默认开启。
酒店 抖音
+0
+0
<template>
<div style="width: 100%">
<yb-tags-input
v-model="tags"
addOnBlur
placeholder="请输入..."
style="margin-bottom:10px"
/>
<yb-tags-input
v-model="tags2"
:addOnBlur="false"
placeholder="请输入文本后回车"
/>
</div>
</template>
<script>
export default {
data() {
return {
tags: ['酒店', '抖音'],
tags2: [],
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
显示 复制 复制
# 过滤重复标签
可使用 allowDuplicates，设置是否允许创建相同 tag，默认为 true。
+0
+0
<template>
<div style="width: 100%">
<yb-tags-input
v-model="tags"
allowDuplicates
placeholder="请输入..."
style="margin-bottom:10px"
/>
<yb-tags-input
v-model="tags2"
:allowDuplicates="false"
placeholder="不允许创建相同文本的标签"
/>
</div>
</template>
<script>
export default {
data() {
return {
tags: [],
tags2: [],
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
显示 复制 复制
# 输入限制
可使用 max 限制输入的标签数量，超出后将不允许再输入，并且触发 exceed 事件。
可使用 maxLength 限制单个标签的最大长度，超出后将不允许再输入，并且触发 inputExceed 事件。
+0
+0
<template>
<div style="width: 100%">
<yb-tags-input
:max="3"
@exceed="exceed"
placeholder="最多输入3条标签..."
/>
<br /><br />
<yb-tags-input
:maxLength="5"
@inputExceed="inputExceed"
placeholder="单个标签长度不可超过5..."
/>
</div>
</template>
<script>
export default {
data() {
return {
exceed() {},
inputExceed() {},
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
显示 复制 复制
# 限制标签展示数量
用 maxTagCount 可以限制展示的标签数量，超出部分将以 +N 的方式展示。
酒店 抖音
+1
<template>
<div style="width: 100%">
<yb-tags-input
v-model="tags"
:maxTagCount="2"
placeholder="请输入..."
/>
</div>
</template>
<script>
export default {
data() {
return {
tags: ['酒店', '抖音', '美食'], // 父组件中的标签数据
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
显示 复制 复制
# 事件触发
酒店 抖音
+0
<template>
<div>
<div style="width: 100%">
<yb-tags-input
ref="tagsInput"
v-model="tags"
placeholder="请输入标签"
:inputValue="inputValue"
:draggable="true"
:max="3"
:maxLength="5"
clearable
@change="change"
@inputChange="inputChange"
@tagAdd="tagAdd"
@tagRemove="tagRemove"
@draggable="draggable"
@exceed="exceed"
@inputExceed="inputExceed"
@clearAll="clearAll"
>
</yb-tags-input>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tags: ['酒店', '抖音'], // 父组件中的标签数据
inputValue: '文本内容',
};
},
methods: {
// 标签关闭方法
tagRemove(tag) {
console.log('标签关闭', tag);
},
tagAdd(tag) {
console.log('添加', tag);
},
change() {
console.log('变化');
},
inputChange(value) {
console.log('输入框变化');
this.inputValue = value;
},
draggable(tag) {
console.log('拖拽排序', tag);
},
exceed(tag) {
console.log('最大标签数', tag);
},
inputExceed() {
console.log('最大标签长度');
},
clearAll() {
console.log('一键清除');
},
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
显示 复制 复制
# 聚焦
可使用 inputValue 设置标签内容。
酒店 抖音
+0
<template>
<div style="width: 100%">
<yb-tags-input v-model="tags" ref="tagsInput" inputValue="默认文本" />
<div style="margin-top: 10px;">
<el-button @click="focus">聚焦</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tags: ['酒店', '抖音'], // 父组件中的标签数据
};
},
methods: {
focus() {
this.$refs.tagsInput.focus();
},
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
显示 复制 复制
# 标签文本插槽
酒店
抖音
+0
<template>
<div style="width: 100%">
<yb-tags-input v-model="tags" ref="tagsInput" placeholder="输入...">
<template v-slot:tag="{ text, index }">
<div style="color: blue" class="tag-item">{{text}}</div>
</template>
</yb-tags-input>
</div>
</template>
<script>
export default {
data() {
return {
tags: ['酒店', '抖音'], // 父组件中的标签数据
};
},
methods: {},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
显示 复制 复制
# 拖拽排序
将 draggable 设为 true，开启拖拽排序功能
酒店 抖音
+0
<template>
<div style="width: 100%">
<yb-tags-input
v-model="tags"
ref="tagsInput"
placeholder="输入..."
draggable
@drag="drag"
>
</yb-tags-input>
</div>
</template>
<script>
export default {
data() {
return {
tags: ['酒店', '抖音'], // 父组件中的标签数据
};
},
methods: {
drag(tags) {
console.log('拖拽排序', tags);
},
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
显示 复制 复制
# 在表单中使用
属性
label-width
label-position
label-suffix
size
disabled
inline
hide-required-asterisk
show-message
inline-message
status-icon
表单
<template>
<el-row>
<el-col :span="10">
<h2>属性</h2>
<div style="margin-bottom:20px">
label-width
<span
style="display:inline-block;width:200px;vertical-align: middle;"
><el-slider
v-model="formProps['label-width']"
:min="80"
:max="240"
></el-slider
></span>
</div>
<div style="margin-bottom:20px">
label-position
<el-radio-group
v-model="formProps['label-position']"
size="mini"
>
<el-radio-button label="left">left</el-radio-button>
<el-radio-button label="right">right</el-radio-button>
<el-radio-button label="top">top</el-radio-button>
</el-radio-group>
</div>
<div style="margin-bottom:20px">
label-suffix
<span
style="display:inline-block;width:200px;vertical-align: middle;"
>
<el-input
size="small"
v-model="formProps['label-suffix']"
></el-input
></span>
</div>
<div style="margin-bottom:20px">
size
<el-radio-group v-model="formProps['size']" size="mini">
<el-radio-button label="medium">medium</el-radio-button>
<el-radio-button label="small">small</el-radio-button>
<el-radio-button label="mini">mini</el-radio-button>
</el-radio-group>
</div>
<div style="margin-bottom:20px">
disabled
<el-switch v-model="formProps['disabled']"></el-switch>
</div>
<div style="margin-bottom:20px">
inline
<el-switch v-model="formProps['inline']"></el-switch>
</div>
<div style="margin-bottom:20px">
hide-required-asterisk
<el-switch
v-model="formProps['hide-required-asterisk']"
></el-switch>
</div>
<div style="margin-bottom:20px">
show-message
<el-switch v-model="formProps['show-message']"></el-switch>
</div>
<div style="margin-bottom:20px">
inline-message
<el-switch v-model="formProps['inline-message']"></el-switch>
</div>
<div style="margin-bottom:20px">
status-icon
<el-switch v-model="formProps['status-icon']"></el-switch>
</div>
</el-col>
<el-col :span="12">
<h2>表单</h2>
<yb-form
ref="form"
:formItems="formItems"
:model="formModel"
:rules="rules"
:label-width="formProps['label-width']+'px'"
:label-position="formProps['label-position']"
:size="formProps['size']"
:disabled="formProps['disabled']"
:inline="formProps['inline']"
:label-suffix="formProps['label-suffix']"
:status-icon="formProps['status-icon']"
:inline-message="formProps['inline-message']"
:show-message="formProps['show-message']"
:hide-required-asterisk="formProps['hide-required-asterisk']"
@submit.native.prevent="onSubmit"
>
<template v-slot:name="formItem">
<el-input
v-model="formModel[formItem.prop]"
clearable
></el-input>
</template>
<template v-slot:region="formItem">
<el-select
v-model="formModel[formItem.prop]"
placeholder="请选择活动区域"
clearable
>
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</template>
<template v-slot:tags="formItem">
<yb-tags-input
v-model="formModel[formItem.prop]"
ref="tagsInput"
placeholder="请输入标签"
clearable
/>
</template>
<template v-slot:buttons="formItem">
<el-button type="primary" native-type="submit"
>立即创建</el-button
>
<el-button>取消</el-button>
</template>
</yb-form>
</el-col>
</el-row>
</template>
<script>
export default {
data() {
const formItems = [
{
label: '活动名称',
prop: 'name',
rules: [
{
required: true,
message: '请输入活动名称',
trigger: 'blur',
},
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur',
},
],
},
{
label: '标签',
prop: 'tags',
rules: [
{
required: true,
message: '请输入标签',
trigger: ['blur', 'change'],
},
],
},
{
label: '活动区域',
prop: 'region',
rules: [
{
required: true,
message: '请选择活动区域',
trigger: 'change',
},
],
},
{
label: '',
prop: 'buttons',
},
];
const formModel = formItems.reduce((tol, item) => {
return {
...tol,
[item.prop]:
typeof item.defaultValue !== 'undefined'
? item.defaultValue
: null,
};
}, {});
return {
formItems,
formModel,
rules: {},
formProps: {
'label-width': 120,
'label-position': 'left',
'label-suffix': '',
size: 'small',
disabled: false,
inline: false,
'hide-required-asterisk': false,
'show-message': true,
'inline-message': false,
'status-icon': false,
},
};
},
mounted() {},
methods: {
onSubmit() {
this.$refs['form']
.getForm()
.validate()
.then(() => {
console.log('验证成功');
})
.catch((err, errFields) => {
console.log('验证失败', err, errFields);
});
},
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
显示 复制 复制
# YbTagInput Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value / v-model | 绑定值，用于双向绑定标签数组 | String[] | -- | [] |
| inputValue | 设置输入框的值 | String | -- | "" |
| max | 允许标签的最大数量 | Number | -- | Infinity |
| maxTagCount | 标签的最大展示数量，超出后将以 +N 形式展示 | Number | -- | Infinity |
| placeholder | 输入框的占位默认值 | String | -- | "请输入文本后再回车" |
| disabled | 是否禁用 | Boolean | -- | false |
| addOnBlur | 在输入框失去焦点时是否自动添加标签 | Boolean | -- | false |
| allowDuplicates | 是否允许添加相同 tag | Boolean | -- | true |
| draggable | 是否启用标签拖拽功能 | Boolean | -- | false |
| clearable | 是否支持一键删除所有标签和输入内容 | Boolean | -- | false |
| separators | 批量添加标签的分隔符 | [String, Array] | -- | [",", " ", ";"] |
| maxLength | 单个标签的最大字符长度 | Number | -- | Infinity |
| size | 输入框和标签的大小 | String | mini, small, medium | small |
# YbTagInput Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 标签数组发生变化时触发 | (tags: Array) => |
| tagAdd | 添加标签时触发 | (newTags: Array, tags: Array)=> |
| tagRemove | 删除单个标签时触发 | (removedTag: String) |
| draggable | 标签拖拽结束后触发 | (tags: Array) => |
| exceed | 添加标签超过最大限制时触发 | (tags: Array)=> |
| inputExceed | 输入的标签长度超过限制时触发 | (value:String)=> |
| clearAll | 清除所有标签时触发 | (tags: Array)=> |
| inputChange | 输入框值改变时触发 | (value: String) => |
# YbTagInput Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| focus | 聚焦标签输入框 | -- |
# SemiTagInput Slots
| 插槽名称 | 说明 | 默认内容 |
|---|---|---|
| tag | 用于自定义每个标签的文本内容 | 默认显示标签文本 |
上次更新: 2025/04/07, 10:08:49