Vue Tagsinput
made with Vuejs

Vue Tagsinput

这是一个带有自动完成的标签输入框组件。

相关问答
暂无相关问题
查看全部
简介及使用教程

Vue Tagsinput是一个带有自动完成的标签输入框组件,使用Vue.js 2构建,带有Typeward的简单标签输入框。

安装

Npm

npm i @voerro/vue-tagsinput

Yarn

yarn add @voerro/vue-tagsinput

浏览器

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@voerro/vue-tagsinput@2.2.0/dist/voerro-vue-tagsinput.js"></script>

<script>
    new Vue({
        el: '#app',
        components: { "v-tags-input": VoerroTagsInput },
    });
</script>

使用

引入并注册组件

import VoerroTagsInput from '@voerro/vue-tagsinput';

Vue.component('tags-input', VoerroTagsInput);

使用

<tags-input element-id="tags"
    v-model="selectedTags"
    :existing-tags="[
        { key: 'web-development', value: 'Web Development' },
        { key: 'php', value: 'PHP' },
        { key: 'javascript', value: 'JavaScript' },
    ]"
    :typeahead="true"></tags-input>

示例

demo2.gif

作者

Alexander Zavyalov

相关项目

这是一个基于SVG的星级评分组件。
这是一个基于Vue.js简单的开关组件。
这是一个高度可定制的评级控制组件。
这是一个基于Vue的emoji图标反馈组件。
这是一个具有自动完成功能的简单下拉组件。
这是一个可以显示行内Markdown的Quasar UI应用扩展组件。
这是一个用于格式化和验证电话号码输入框组件。