Vue.js 3的完整选择框解决方案–vue-next-select

Vue.js 3的完整选择框解决方案–vue-next-select
插件名称 vue-next-select
版本号 v2.7.0
发布时间 2020年11月12日
插件作者 iendeavor

next-select是一个Vue.js组件,可为Vue.js 3+应用程序提供完整的选择框解决方案。

具有实时过滤,动态选项渲染,多选,标记输入等功能。

安装和下载:

# NPM
$ npm i vue-next-select --save

如何使用它:

1.导入下一个选择。

import { reactive, ref, createApp } from 'vue'
import VueSelect from 'vue-next-select'
import 'vue-next-select/dist/index.min.css'

2.创建一个选择框。

const { ref, createApp } = Vue
const singleSelect = createApp({
  name: 'app',
  setup() {
    const model = ref(null)
    const options = ref([
      'Select option',
      'Option',
      'Mulitple',
      'Searchable',
      'Taggable',
      'Close on select',
      'Hide selected',
    ])
    return {
      model,
      options,
    }
  },
  template: `
    <vue-select
      v-model="model"
      :options="options"
      close-on-select
      :min="1"
    ></vue-select>
    <pre>{{ model || 'null' }}</pre>
  `,
})
singleSelect.component('vue-select', VueNextSelect)
singleSelect.mount(document.querySelector('#single-select'))

3.创建一个多选框。

const { ref, createApp } = Vue
const singleSelect = createApp({
  name: 'app',
  setup() {
    const model = ref(null)
    const options = ref([
      'Select option',
      'Option',
      'Mulitple',
      'Searchable',
      'Taggable',
      'Close on select',
      'Hide selected',
    ])
    return {
      model,
      options,
    }
  },
  template: `
    <vue-select
      v-model="model"
      :options="options"
      close-on-select
      :min="1"
    ></vue-select>
    <pre>{{ model || 'null' }}</pre>
  `,
})
singleSelect.component('vue-select', VueNextSelect)
singleSelect.mount(document.querySelector('#single-select'))

4.在选择框上启用实时搜索功能。

const { ref, computed, createApp } = Vue
const app = createApp({
  name: 'app',
  setup() {
    const options = ref([
      { name: 'Vue.js', language: 'JavaScript' },
      { name: 'Rails', language: 'Ruby' },
      { name: 'Sinatra', language: 'Ruby' },
      { name: 'Laravel', language: 'PHP' },
      { name: 'Phoenix', language: 'Elixir' },
    ])
    const model = ref(options.value[0])
    const searchInput = ref('')
    const hanldeSearchInput = event => {
      searchInput.value = event.target.value
    }
    const visibleOptions = computed(() => {
      const re = new RegExp(searchInput.value)
      return options.value.filter(option => re.test(option.name))
    })
    return {
      model,
      options,
      hanldeSearchInput,
      visibleOptions,
    }
  },
  template: `
    <vue-select
      v-model="model"
      :options="options"
      :visible-options="visibleOptions"
      label-by="name"
      track-by="name"
      searchable
      clear-on-select
      @search-input="hanldeSearchInput"
    ></vue-select>
    <pre>{{ model || 'null' }}</pre>
  `,
})
app.component('vue-select', VueNextSelect)
app.mount(document.querySelector('#select-with-search'))

5.创建标签输入。

const getCountryList = async name => {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', `https://restcountries.eu/rest/v2/name/${name}`)
    xhr.send()
    xhr.onloadend = () => {
      try {
        resolve(JSON.parse(xhr.response).map(info => info.name))
      } catch (error) {
        resolve([])
      }
    }
  })
}
const { ref, createApp } = Vue
const app = createApp({
  name: 'app',
  setup() {
    const options = ref([
      { name: 'Vue.js', language: 'JavaScript' },
      { name: 'Rails', language: 'Ruby' },
      { name: 'Sinatra', language: 'Ruby' },
      { name: 'Laravel', language: 'PHP' },
      { name: 'Phoenix', language: 'Elixir' },
    ])
    const model = ref(['Vue.js', 'Rails', 'Phoenix'])
    return {
      model,
      options,
    }
  },
  template: `
    <vue-select
      v-model="model"
      :options="options"
      multiple
      taggable
      hide-selected
      label-by="name"
      track-by="name"
      value-by="name"
      collapse-tags
    ></vue-select>
    <pre>{{ model }}</pre>
  `,
})
app.component('vue-select', VueNextSelect)
app.mount(document.querySelector('#tagging'))

6.创建一个异步选择。

const getCountryList = async name => {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', `https://restcountries.eu/rest/v2/name/${name}`)
    xhr.send()
    xhr.onloadend = () => {
      try {
        resolve(JSON.parse(xhr.response).map(info => info.name))
      } catch (error) {
        resolve([])
      }
    }
  })
}
const { ref, createApp } = Vue
const app = createApp({
  name: 'app',
  setup() {
    const options = ref([])
    const visibleOptions = ref([])
    const model = ref([])
    const loadingCount = ref(0)
    const searchInput = ref('')
    const handleSearchInput = async event => {
      searchInput.value = event.target.value
      if (searchInput.value === '') {
        visibleOptions.value = model.value
        return
      }
      ++loadingCount.value
      const currentSearchInput = searchInput.value
      const foundOptions = await getCountryList(searchInput.value)
      if (currentSearchInput === searchInput.value) {
        options.value = model.value.concat(foundOptions)
        options.value = Array.from(new Set(options.value))
        visibleOptions.value = foundOptions
      }
      --loadingCount.value
    }
    return {
      model,
      options,
      visibleOptions,
      loadingCount,
      handleSearchInput,
    }
  },
  template: `
    <vue-select
      v-model="model"
      :options="options"
      :visible-options="visibleOptions"
      multiple
      taggable
      searchable
      :min="3"
      @search-input="handleSearchInput"
      :loading="loadingCount !== 0"
    ></vue-select>
    <pre>{{ model }}</pre>
  `,
})
app.component('vue-select', VueNextSelect)
app.mount(document.querySelector('#asynchronous-select'))

变更日志:

v2.7.1 (07/14/2021)

  • 在下拉菜单中点击“输入”时添加阻止修饰符

v2.7.0 (06/29/2021)

  • 公开标签槽的移除功能
  • 点击孩子时防止模糊

v2.6.0 (06/12/2021)

  • a11y
  • 添加 a11y-禁用
  • 公开切换事件
  • 主/端 kbd 交互
  • 预先输入 kbd 交互
  • Bug修复

v2.5.0 (06/05/2021)

  • 暴露 maxHeight 道具
  • 公开 openDirection 道具
  • Bug修复

v2.4.3 (06/04/2021)

  • 修正:下拉菜单应自动滚动到所选选项

v2.4.2 (06/04/2021)

  • 修正:计算选项道具不起作用

v2.4.1 (05/30/2021)

  • 转义搜索字符串

v2.4.0(05/19/2021)

  • 发出一致的事件名称焦点并模糊
  • 防止无限循环

v2.3.1(05/05/2021)

  • Bug修复

v2.3.0(05/03/2021)

  • 修复:仅当有一个选择的选项时,它应该只触发移除事件

v2.2.0(05/01/2021)

  • 实施
  • Bug修复

v2.1.1(04/04/2021)

  • Bug修复

v2.1.0(03/30/2021)

  • 增加了团体支持

v2.0.1(03/27/2021)

  • Bug修复

v1.3.6(03/24/2021)

  • Bug修复

v1.3.5(03/22/2021)

  • 应该在自定义模板上触发mousemove

v1.3.4(03/22/2021)

  • 为空标签添加最小高度

v1.3.3(03/20/2021)

  • Bug修复

v1.3.0(03/18/2021)

  • 默认情况下按标签过滤选项
  • 实施禁用的选项
  • 选择突出显示的项目

v1.2.1(03/09/2021)

  • 固定:标签可能是数字

v1.2.0(03/07/2021)

  • 公开版本

v1.1.0(03/07/2021)

  • 实施关上关门道具
  • 无法添加或删除时显示不允许光标
  • 禁用时输入应更改颜色
  • 禁用时,输入应显示不允许光标

v1.0.2(03/02/2021)

  • 更新

v1.0.0(02/11/2021)

  • 暴露空模型值

v0.2.0(02/05/2021)

  • 更新包

v0.1.3(12/08/2020)

  • 修复:错误的CSS

v0.1.2(12/06/2020)

  • 更新

v0.1.1(11/21/2020)

  • 更新

v0.0.20(11/15/2020)

  • feat :显示选择信息