vue 组件标签里面套组件_一个简单的标签选择器作为vue组件

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)，可自定义。 提供正则表达式验证。

View demo 查看演示 Download Source 下载源

安装 (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 组件标签里面套组件