Sard

Appearance

100%
在新窗口打开⤴

Picker选择器

介绍 ​

一个或多个可滚动列表选择器。

代码演示 ​

基础使用 ​

通过 v-model 绑定当前值，通过 columns 配置选项数据。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker v-model="value" :columns="columns" @change="onChange" />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为: 天津市" arrow hover @click="value = '天津市'" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

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

const columns = ['北京市', '天津市', '河北省', '山东省']

const value = ref<string | undefined>('河北省')

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker v-model="value" :columns="columns" @change="onChange" />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为: 天津市" arrow hover @click="value = '天津市'" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const columns = ['北京市', '天津市', '河北省', '山东省']
const value = ref('河北省')
const onChange = (value) => {
  console.log('change', value)
}
</script>

对象类型 ​

列的每一项可以为一个对象，使用 optionKeys 属性可以指定对象中哪个属性值为选中的值，哪个属性值为要显示的标签。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker
        v-model="value"
        :columns="columns"
        :option-keys="{ label: 'name', value: 'code' }"
      />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为: 天津市" arrow hover @click="value = 120000" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

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

const columns = [
  {
    code: 110000,
    name: '北京市',
  },
  {
    code: 120000,
    name: '天津市',
  },
  {
    code: 130000,
    name: '河北省',
  },
  {
    code: 140000,
    name: '山东省',
  },
]

const value = ref<number | undefined>(130000)
</script>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker
        v-model="value"
        :columns="columns"
        :option-keys="{ label: 'name', value: 'code' }"
      />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为: 天津市" arrow hover @click="value = 120000" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const columns = [
  {
    code: 11e4,
    name: '北京市',
  },
  {
    code: 12e4,
    name: '天津市',
  },
  {
    code: 13e4,
    name: '河北省',
  },
  {
    code: 14e4,
    name: '山东省',
  },
]
const value = ref(13e4)
</script>

多列 ​

当 columns 属性值为一个二维数组时会显示为多列。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker v-model="value" :columns="columns" />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为: 2003年10月" arrow hover @click="value = ['2003年', '10月']" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

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

const columns = [
  Array(10)
    .fill(0)
    .map((_, index) => 2000 + index + '年'),
  Array(12)
    .fill(0)
    .map((_, index) => 1 + index + '月'),
]

const value = ref<string[] | undefined>(['2005年', '5月'])
</script>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker v-model="value" :columns="columns" />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为: 2003年10月" arrow hover @click="value = ['2003年', '10月']" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const columns = [
  Array(10)
    .fill(0)
    .map((_, index) => 2e3 + index + '年'),
  Array(12)
    .fill(0)
    .map((_, index) => 1 + index + '月'),
]
const value = ref(['2005年', '5月'])
</script>

对象类型多列 ​

columns 属性值为对象类型的二维数组。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker v-model="value" :columns="columns" />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为: 2003年10月" arrow hover @click="value = [2003, 10]" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

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

const columns = [
  Array(10)
    .fill(0)
    .map((_, index) => ({
      value: 2000 + index,
      label: 2000 + index + '年',
    })),
  Array(12)
    .fill(0)
    .map((_, index) => ({
      value: 1 + index,
      label: 1 + index + '月',
    })),
]

const value = ref<number[] | undefined>([2005, 5])
</script>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker v-model="value" :columns="columns" />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为: 2003年10月" arrow hover @click="value = [2003, 10]" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const columns = [
  Array(10)
    .fill(0)
    .map((_, index) => ({
      value: 2e3 + index,
      label: 2e3 + index + '年',
    })),
  Array(12)
    .fill(0)
    .map((_, index) => ({
      value: 1 + index,
      label: 1 + index + '月',
    })),
]
const value = ref([2005, 5])
</script>

级联选择 ​

当 columns 第一个元素为对象且其 children 属性值为数组时会被当作级联选择。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker
        v-model="value"
        :columns="regionData"
        :option-keys="{ label: 'name', value: 'code' }"
      />
    </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
<template>
  <s-list card>
    <s-list-item>
      <s-picker
        v-model="value"
        :columns="regionData"
        :option-keys="{ label: 'name', value: 'code' }"
      />
    </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>

插槽 ​

可通过 option 插槽自定义每一个选项的内容。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker
        v-model="value"
        :columns="columns"
        :option-keys="{ label: 'name', value: 'name' }"
        @change="onChange"
      >
        <template #option="{ option }">
          <span :class="['cake', `cake-${option.icon}`]" />
          <span class="ms-2 font-bold">
            {{ option.name }}
          </span>
        </template>
      </s-picker>
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为: 泡芙" arrow hover @click="value = '泡芙'" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getPrizes } from '../../lucky-draw/demo/utils'

const columns = getPrizes()

const value = ref<string | undefined>('布丁')

const onChange = (value: number[]) => {
  console.log('change', value)
}
</script>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker
        v-model="value"
        :columns="columns"
        :option-keys="{ label: 'name', value: 'name' }"
        @change="onChange"
      >
        <template #option="{ option }">
          <span :class="['cake', `cake-${option.icon}`]" />
          <span class="ms-2 font-bold">
            {{ option.name }}
          </span>
        </template>
      </s-picker>
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为: 泡芙" arrow hover @click="value = '泡芙'" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { getPrizes } from '../../lucky-draw/demo/utils'
const columns = getPrizes()
const value = ref('布丁')
const onChange = (value) => {
  console.log('change', value)
}
</script>

API ​

PickerProps<T> ​

属性描述类型默认值
columns配置每一列的数据T[] | T[][][]
option-keys自定义 columns 结构中的字段OptionKeys{label: 'label', value: 'value', children: 'children'}
model-value选中项的值any-

PickerSlots<T> ​

插槽描述属性
option自定义选项的内容{ option: T; rowIndex: number; columnIndex: number }

PickerEmits<T> ​

事件描述类型
update:modelValue选中的选项改变时触发(value: any, selectedOptions: T[], indexes: number[]) => void
change选中的选项改变时触发(value: any, selectedOptions: T[], indexes: number[]) => void

OptionKeys ​

tsx
interface OptionKeys {
  label?: string
  value?: string
  children?: string
}

Released under the MIT License.

Copyright © 2023-present wuzhitao