vue.js 构建项目_使用Vue.js 2构建的带有typeahead的简单标签输入-CSDN博客

vue.js 构建项目

Vue标签输入 (Vue Tags Input)

A simple tags input with typeahead built with Vue.js 2.

使用Vue.js内置的typeahead输入的简单标签2。

通过NPM安装 (Installation via NPM)

npm i @voerro/vue-tagsinput --save-dev

要么

npm i @voerro/vue-tagsinput --save

Then register the component with Vue:

然后向Vue注册组件：

Vue.component('tags-input', require('@voerro/vue-tagsinput'));

If you're getting the [Vue warn]: Failed to mount component: template or render function not defined. error, try this instead:

如果出现[Vue warn]: Failed to mount component: template or render function not defined. 错误，请尝试以下方法：

Vue.component('tags-input', require('@voerro/vue-tagsinput').default);

You might also need to add this line if removing tags by pressing backspace doesn't work:

如果通过按退格键删除标签不起作用，则可能还需要添加以下行：

Vue.config.keyCodes.backspace = 8;

用法 (Usage)

<tags-input element-id="tags"
            :existing-tags="{ 
                'web-development': 'Web Development',
                'php': 'PHP',
                'javascript': 'JavaScript',
            }"
            :typeahead="true"></tags-input>

element-id will be applied to id and name attributes of the hidden input that contains the list of the selected tags as its value.

element-id将应用于包含所选标签列表作为其值的隐藏输入的id和name属性。

existing-tags is the list of the existing on your website tags. Include it even if you're not using typeahead.

existing-tags是您网站上existing-tags的列表。包括它，即使您不使用typeahead。

Remove the typeahead property to disable this functionality.

删除typeahead属性以禁用此功能。

“旧”标签 ("Old" Tags)

If you need to display a list of already attached tags, use the :old-tags property. Provide a list in the same format as with existing-tags. In this Laravel example we attach either the tags from old(), the tags of an existing blog post, or nothing, depending on what's available.

如果您需要显示已附加标签的列表，请使用:old-tags属性。提供与existing-tags相同格式的列表。在这个Laravel示例中，我们将附加old()的标签，现有博客文章的标签或不附加标签，这取决于可用的内容。

<tags-input element-id="tags"
            :existing-tags="{ 
                'web-development': 'Web Development',
                'php': 'PHP',
                'javascript': 'JavaScript',
            }"
            :old-tags="{{ 
		old('tags') ? json_encode(old('tags')) :
		(
			isset($postTags)
			? json_encode($postTags)
			: json_encode('')
		) 
	    }}"
            :typeahead="true"></tags-input>

数据 (Data)

The list of selected tags is stored as a string (tags are separated with a comma) inside a hidden input with name = element-id.

所选标签的列表以字符串形式(标签用逗号分隔)存储在名称= element-id的隐藏输入中。

If a tag is listed in existing-tags, the tag's slug will be used, otherwise the text entered by user is added.

如果existing-tags标签中列出了existing-tags ，则将使用existing-tags的标签，否则将添加用户输入的文本。

Example value of the hidden input:

隐藏输入的示例值：

web-development,javascript,This is a new tag,php

造型 (Styling)

The component partially relies on default Bootstrap 4 classes for styling. If you don't use Bootstrap in your project, use the bootstrap.css file included in this repository. It is an extraction of all the required classes.

该组件部分依赖于默认的Bootstrap 4类进行样式设置。如果您不在项目中使用Bootstrap，请使用此存储库中包含的bootstrap.css文件。它是所有必需类的提取。

You can apply your own css. The visible input is a div with classes .form-control and .tags-input. Each tag inside is a span with standard Bootstrap 4 classes .badge, .badge-pill, and .badge-light. The remove buttons of each tags are .tagsinput-remove.

您可以应用自己CSS。可见输入是一个带有.form-control和.tags-input类的div 。每个标记内是一个span与标准的自举4类.badge ， .badge-pill ，和.badge-light 。每个标签的删除按钮是.tagsinput-remove 。

The typeahead parent element is a p with .typeahead class. Its children are spans with standard Bootstrap 4 classes .badge, .badge-primary (for the selected tag), .badge-dark (for all the unselected tags).

.typeahead父元素是带有.typeahead类的p 。它的子级为span具有标准Bootstrap 4类.badge ， .badge-primary (用于所选标签) .badge-dark (用于所有未选择的标签)。

See the template and style sections of src/TagsInput.vue to have a better idea of how things work.

请参阅src/TagsInput.vue的template和style部分，以更好地了解事物的工作方式。

提前输入 (Typeahead)

When search results are displayed underneath the input, use the arrow down and arrow up keys on the keyboard to move the selection. Press Enter to select a tag. Press Esc to discard the search results and then Enter to add a new tag the way you've typed it.

当搜索结果显示在输入下方时，请使用键盘上的arrow down arrow up和arrow up键移动选择。按Enter选择一个标签。按Esc放弃搜索结果，然后Enter以Enter方式添加新标签。