帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue3选择器组件(next-select)

帝国模板之家 2020-12-31 网页特效 评论

介绍

next-select是一个Vue.js选择器组件,具有实时过滤,动态选项渲染,多选,标记输入等功能的选择框。

使用方法

1. 引入next-select.

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, 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(['Sinatra', 'Vue.js'])
    return {
      model,
      options,
    }
  },
  template: `
    <vue-select
      v-model="model"
      :options="options"
      multiple
      label-by="name"
      track-by="name"
      value-by="name"
      :max="2"
      placeholder="Pick some"
    ></vue-select>
    <pre>{{ model }}</pre>
  `,
})
app.component('vue-select', VueNextSelect)
app.mount(document.querySelector('#multiple-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. 创建tag输入。

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'))
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言