vue 组件标签里面套组件
Vue标签选择器
(
vue-tag-selector
)
A simple tag selector as a vue component.
一个简单的标签选择器作为vue组件。
Vue-tag-selector is a component for vuejs for tag type fields. Light (6.3kb gzipped) and customizable. Offering regex validation.
Vue-tag-selector是用于vuejs的标签类型字段的组件。 轻巧(压缩后6.3kb)，可自定义。 提供正则表达式验证。
安装
(
Installation
)
# with npm
npm install --save vue-tag-selector
# with yarn
yarn add vue-tag-selector
用法
(
Usage
)
For using the component you just need to import the component and register it:
为了使用组件，您只需要导入组件并注册它：
import TagSelector from 'vue-tag-selector'
export default {
components: { TagSelector },
data(){
return {
tags: []
}
}
}And then use it in your template:
然后在模板中使用它：
<template>
<div class="container">
<tag-selector name="tags" v-model="tags"/>
</div>
</template>
API文档
(
API Documentation
)
Here’s a list of the props available:
以下是可用道具的列表：
-
label
: Displays a label, has to be String can be ignored
label
：显示标签，必须为String可以忽略 -
name
:
Required
. usually the field name.
name
：
必填
。 通常是字段名称。 -
classes
: Allows you to add classes to the field. String or Array.
classes
：允许您将类添加到字段。 字符串或数组。 -
regex
: A RegExp. Validates every tag and disallow adding if not matching. By default it’s alphanumerical only (
/^[a-zA-Z0-9]*$/
)
regex
：一个RegExp。 验证每个标签，如果不匹配，则不允许添加。 默认情况下，它仅是字母数字(
/^[a-zA-Z0-9]*$/
) -
regexError
: The error displayed when the Regex doesn’t match
regexError
：当正则表达式不匹配时显示的错误
样式
(
Style
)
The component philosophy is pretty straightforward here: only the mandatory style is bundled. I personally never liked js library that needs too much CSS. Only 26 lines of CSS here 😉. But you can easily stylize the component.
组件原理在这里非常简单：仅捆绑了强制性样式。 我个人从来都不喜欢需要太多CSS的js库。 26这里只有26行CSS。 但是您可以轻松地对组件进行样式化。
Have an example template:
有一个示例模板：
<div class="field tag-selector">
<label for="tags">Post tags</label>
<div class="tag-selector--input">
<div class="tag-selector--item">
Dogs <i class="icon tag-selector--remove">delete_icon</i>
</div>
<div class="tag-selector--item">
Cats <i class="icon tag-selector--remove">delete_icon</i>
</div>
<div class="tag-selector--item">
Horses <i class="icon tag-selector--remove">delete_icon</i>
</div>
<input type="text" id="tags" name="tags" class="tag-selector-input">
</div>
<p class="validation-message">The tag you entered is at the wrong format. Please only use alphanumerical characters.</p>
</div>
One rule tho,
.tag-selector--input
has
to be
display: flex;
.
一个规则寿，
.tag-selector--input
必须
是
display: flex;
。
翻译自:
https://vuejsexamples.com/a-simple-tag-selector-as-a-vue-component/
vue 组件标签里面套组件