Vue Tags Multiselect

A complex multi-selector.

• This package consists of a two-layer structure, similar to a dropdown wrapping another dropdown.

• It copies the HTML content of the option as the display for the tag.

  or you can also generate options using data

• Finally, it will output an object containing keys and values.

or use external component.

Demo

https://eziopu.github.io/vue-tags-multiselect/

Install

npm install vue-tags-multiselect

Setup

• In main.js you can mount it as a global Vue component

// vue install
import 'vue-tags-multiselect/dist/style.css'
import VueTagsMultiselect from 'vue-tags-multiselect'
createApp(App).use(VueTagsMultiselect).mount('#app')

or

• In a specific component (e.g.: Component.vue)

import 'vue-tags-multiselect/dist/style.css'
import { vTagsMultiselect, vTagDropdown, vTagOption } from 'vue-tags-multiselect'

Usage

<v-tags-multiselect v-model="result">
    <v-tag-dropdown value="country">
    <v-tag-option title>
      <i class="fa fa-flag"></i> Country
    </v-tag-option>
    <v-tag-option value="Māre"> Māre </v-tag-option>
    <v-tag-option value="Eldia"> Eldia </v-tag-option>
  </v-tag-dropdown>
    ...
</v-tags-multiselect>

or

<v-tags-multiselect
  v-model="result"
  :options="{
    country: [
      {
        title: true,
        element: `<i class='fa fa-flag'></i> Country`
      },
      'Māre',
      'Eldia'
    ]
  }"
>
  ...
</v-tags-multiselect>

TypeScript Support

import type {
  TagModel,              // Single tag data structure
  TagsGroupByKeyModel,   // Grouped tag structure (when merge is enabled)
  PlaceholdersModel,     // Placeholder configuration
  OptionsInput,          // Input format for the options prop
  ProcessedDropdown,     // Processed dropdown structure
  ProcessedOption,       // Processed option structure
  DropdownStatusMap,     // Dropdown status map
  OptionStatusMap,       // Option status map
  VTagsMultiselectEmits, // Component event definitions
} from 'vue-tags-multiselect'