Vue-Multiselect 使用教程

Vue-Multiselect 使用教程

vue-multiselectUniversal select/multiselect/tagging component for Vue.js项目地址:https://gitcode.com/gh_mirrors/vu/vue-multiselect

项目介绍

Vue-Multiselect 是一个适用于 Vue.js 的通用选择/多选/标签组件。它具有以下特点：

• 无依赖
• 单选、多选、标签功能
• 下拉菜单、过滤、搜索建议
• 逻辑拆分为 mixins
• 支持自定义组件
• V-model 支持
• Vuex 支持
• 异步选项支持
• 完全可配置

项目地址：GitHub - shentao/vue-multiselect

项目快速启动

安装

npm install vue-multiselect@next

基本使用

<template>
  <div>
    <VueMultiselect v-model="selected" :options="options">
    </VueMultiselect>
  </div>
</template>

<script>
import VueMultiselect from 'vue-multiselect'

export default {
  components: {
    VueMultiselect
  },
  data() {
    return {
      selected: null,
      options: ['选项1', '选项2', '选项3']
    }
  }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>

应用案例和最佳实践

单选/下拉菜单

<VueMultiselect
  :model-value="value"
  :options="source"
  :searchable="false"
  :close-on-select="false"
  :allow-empty="false"
  @update:model-value="updateSelected"
  label="name"
  placeholder="Select one"
  track-by="name"
/>

单选带搜索

<VueMultiselect
  v-model="value"
  :options="source"
  :close-on-select="true"
  :clear-on-select="false"
  placeholder="Select one"
  label="name"
  track-by="name"
/>

多选带搜索

<VueMultiselect
  v-model="multiValue"
  :options="source"
  :multiple="true"
  :close-on-select="true"
  placeholder="Pick some"
  label="name"
  track-by="name"
/>

典型生态项目

Vue-Multiselect 可以与其他 Vue.js 生态项目结合使用，例如：

• Vuex：用于状态管理
• Vuetify：用于 UI 组件库
• Nuxt.js：用于服务端渲染

通过这些生态项目的结合，可以构建出更加强大和丰富的应用。

vue-multiselectUniversal select/multiselect/tagging component for Vue.js项目地址:https://gitcode.com/gh_mirrors/vu/vue-multiselect