介绍

组合了选择器弹出框、输入框组件，实现了便捷快速的选择功能。

代码演示

基础使用

使用 v-model 绑定当前值，通过 title 和 placeholder 属性设置弹出框标题和输入框占位文本。

在点击输入框后会显示包裹选择器的弹出框。

vue ts

<template>
  <s-list card>
    <s-list-item>
      <s-picker-input
        v-model="value"
        title="请选择性别"
        placeholder="请选择性别"
        clearable
        :columns="columns"
        @change="onChange"
      />
    </s-list-item>

    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为：female (女性)" arrow hover @click="value = 'female'" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

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

const value = ref<string>()

const columns = [
  {
    value: 'male',
    label: '男性',
  },
  {
    value: 'female',
    label: '女性',
  },
  {
    value: 'others',
    label: '其他',
  },
]

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue js

<template>
  <s-list card>
    <s-list-item>
      <s-picker-input
        v-model="value"
        title="请选择性别"
        placeholder="请选择性别"
        clearable
        :columns="columns"
        @change="onChange"
      />
    </s-list-item>

    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为：female (女性)" arrow hover @click="value = 'female'" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const value = ref()
const columns = [
  {
    value: 'male',
    label: '男性',
  },
  {
    value: 'female',
    label: '女性',
  },
  {
    value: 'others',
    label: '其他',
  },
]
const onChange = (value) => {
  console.log('change', value)
}
</script>

级联选择

vue ts

<template>
  <s-list card>
    <s-list-item>
      <s-picker-input
        v-model="value"
        title="请选择省市区"
        placeholder="请选择"
        :columns="regionData"
        :option-keys="{ label: 'name', value: 'code' }"
        clearable
      />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item
      title="设置为: 广东省/广州市/白云区"
      arrow
      hover
      @click="value = [440000, 440100, 440111]"
    />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getRegionData } from 'region-data'

const regionData = getRegionData()

const value = ref<number[] | undefined>([150000, 150500, 150522])
</script>

vue js

<template>
  <s-list card>
    <s-list-item>
      <s-picker-input
        v-model="value"
        title="请选择省市区"
        placeholder="请选择"
        :columns="regionData"
        :option-keys="{ label: 'name', value: 'code' }"
        clearable
      />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item
      title="设置为: 广东省/广州市/白云区"
      arrow
      hover
      @click="value = [440000, 440100, 440111]"
    />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { getRegionData } from 'region-data'
const regionData = getRegionData()
const value = ref([15e4, 150500, 150522])
</script>

API

PickerInputProps

继承 PickerPopoutProps 和 PopoutInputProps 。

PickerInputSlots

继承 PickerPopoutSlots和PopoutInputSlots

PickerInputEmits

继承 PickerPopoutEmits 。