Select 选择器

Select 选择器

这是 Select 基础例子

<script setup lang="ts">
import { h, ref, watchEffect } from 'vue'

interface optionType {
  label: string
  value: string
  disabled?: boolean
}

const test = ref('')
const test2 = ref('')
const options: optionType[] = [
  { label: '下拉菜单1', value: '1' },
  { label: '下拉菜单2', value: '2' },
  { label: '下拉菜单3', value: '3' },
  { label: '下拉菜单4', value: '4', disabled: true },
]

function customRender(option: optionType) {
  return h('div', {
    className: 'select-custom',
  }, [
    h('span', option.label),
    h('span', option.value),
  ])
}

watchEffect(() => {
  console.log(test.value, test2.value)
})
</script>

<template>
  <div class="select-demo">
    <NpSelect
      v-model="test"
      placeholder="基础选择器，请选择"
      :options="options"
    />
  </div>
  <div class="select-demo">
    <NpSelect
      v-model="test2"
      placeholder="可清空选择器，请选择"
      placement="top-start"
      :options="options"
      :render-label="customRender"
      clearable
    />
  </div>
</template>

<style>
.select-demo {
  margin: 20px;
  display: flex;
  gap: 20px;
}

.select-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
</style>

Select 选择器

启用远程搜索， 需要将 filterable 和 remote 设置为true，

同时传入一个remote-method；

remote-method 为一个返回 Promise 的Function，

类型为 (value: string) => Promise<[]> 。

<script setup lang="ts">
import { ref } from 'vue'

const test = ref('')

const dataList = [
  '张二',
  '张三',
  '李四',
  '王五',
  '赵二',
  '赵六',
]

function remoteFilter(query: string) {
  return new Promise((resolve) => {
    if (query) {
      setTimeout(() => {
        const options = dataList.filter((item) => {
          return item.includes(query)
        }).map((label) => {
          return { label, value: label }
        })
        resolve(options)
      }, 500)
    } else {
      resolve([])
    }
  })
}

function onChange(ev: string) {
  console.log(ev, test.value)
}
</script>

<template>
  <div class="select-demo">
    <NpSelect
      v-model="test"
      placeholder="禁用效果"
      disabled
    />
  </div>
  <div class="select-demo">
    <NpSelect
      v-model="test"
      placeholder="搜索远程结果"
      filterable
      remote
      :remote-method="remoteFilter"
      @change="onChange"
    />
  </div>
</template>

<style scoped>
.select-demo {
  margin: 20px;
  display: flex;
  gap: 20px;
}
</style>