Sard

Appearance

100%
在新窗口打开⤴

PickerView滚动选择器

介绍 ​

滚动选择器，通常配合 PickerViewColumn 子组件使用，实现单列或多列的滚动选择功能。底层组件，一般直接使用 Picker 组件即可。

代码演示 ​

基础使用 ​

使用 v-model 绑定当前选中的索引值，配合 PickerViewColumn 子组件使用。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker-view v-model:value="value">
        <s-picker-view-column>
          <div v-for="item in columns" :key="item" class="item">{{ item }}</div>
        </s-picker-view-column>
      </s-picker-view>
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value)" />
    <s-list-item title="设置为: 天津市" arrow hover @click="value = [1]" />
    <s-list-item title="清空" arrow hover @click="value = []" />
  </s-list>
</template>

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

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

const value = ref<number[]>()
</script>

<style scoped>
.item {
  line-height: 48px;
  text-align: center;
}
</style>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker-view v-model:value="value">
        <s-picker-view-column>
          <div v-for="item in columns" :key="item" class="item">{{ item }}</div>
        </s-picker-view-column>
      </s-picker-view>
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value)" />
    <s-list-item title="设置为: 天津市" arrow hover @click="value = [1]" />
    <s-list-item title="清空" arrow hover @click="value = []" />
  </s-list>
</template>

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

<style scoped>
.item {
  line-height: 48px;
  text-align: center;
}
</style>

多列选择 ​

可以在 PickerView 中放置多个 PickerViewColumn 实现多列选择。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker-view v-model:value="value">
        <s-picker-view-column>
          <div v-for="item in years" :key="item" class="item">{{ item }}</div>
        </s-picker-view-column>
        <s-picker-view-column>
          <div v-for="item in months" :key="item" class="item">{{ item }}</div>
        </s-picker-view-column>
        <s-picker-view-column>
          <div v-for="item in days" :key="item" class="item">{{ item }}</div>
        </s-picker-view-column>
      </s-picker-view>
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value)" />
    <s-list-item title="设置为: 2003年10月15日" arrow hover @click="value = [3, 9, 14]" />
    <s-list-item title="清空" arrow hover @click="value = []" />
  </s-list>
</template>

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

const years = Array(10)
  .fill(0)
  .map((_, index) => 2000 + index + '年')

const months = Array(12)
  .fill(0)
  .map((_, index) => 1 + index + '月')

const days = Array(31)
  .fill(0)
  .map((_, index) => 1 + index + '日')

const value = ref<number[]>([5, 4, 14])
</script>

<style scoped>
.item {
  line-height: 48px;
  text-align: center;
}
</style>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker-view v-model:value="value">
        <s-picker-view-column>
          <div v-for="item in years" :key="item" class="item">{{ item }}</div>
        </s-picker-view-column>
        <s-picker-view-column>
          <div v-for="item in months" :key="item" class="item">{{ item }}</div>
        </s-picker-view-column>
        <s-picker-view-column>
          <div v-for="item in days" :key="item" class="item">{{ item }}</div>
        </s-picker-view-column>
      </s-picker-view>
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value)" />
    <s-list-item title="设置为: 2003年10月15日" arrow hover @click="value = [3, 9, 14]" />
    <s-list-item title="清空" arrow hover @click="value = []" />
  </s-list>
</template>

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

<style scoped>
.item {
  line-height: 48px;
  text-align: center;
}
</style>

自定义指示器样式 ​

通过 indicator-style 和 indicator-class 属性自定义指示器样式，通过 mask-style 和 mask-class 自定义遮罩样式。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker-view
        v-model:value="value"
        indicator-style="border: 1px solid var(--s-color-primary); border-radius: 8px; height: 30px"
        style="height: 120px"
      >
        <s-picker-view-column>
          <div v-for="item in years" :key="item" class="item">{{ item }}</div>
        </s-picker-view-column>
      </s-picker-view>
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value)" />
  </s-list>
</template>

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

const years = Array(20)
  .fill(0)
  .map((_, index) => 2000 + index + '年')

const value = ref<number[]>([6])
</script>

<style scoped>
.item {
  line-height: 30px;
  text-align: center;
}
</style>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-picker-view
        v-model:value="value"
        indicator-style="border: 1px solid var(--s-color-primary); border-radius: 8px; height: 30px"
        style="height: 120px"
      >
        <s-picker-view-column>
          <div v-for="item in years" :key="item" class="item">{{ item }}</div>
        </s-picker-view-column>
      </s-picker-view>
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value)" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const years = Array(20)
  .fill(0)
  .map((_, index) => 2e3 + index + '年')
const value = ref([6])
</script>

<style scoped>
.item {
  line-height: 30px;
  text-align: center;
}
</style>

API ​

PickerViewProps ​

属性描述类型默认值
value选中项的索引数组number[][]
indicator-style指示器样式string-
indicator-class指示器类名string-
mask-style遮罩层样式string-
mask-class遮罩层类名string-

PickerViewEmits ​

事件描述类型
update:value选中项改变时触发(value: number[]) => void
change选中项改变时触发(value: number[]) => void

PickerViewSlots ​

插槽描述属性
default自定义默认内容-

PickerViewColumnProps ​

PickerViewColumn 组件无特定属性。

PickerViewColumnSlots ​

插槽描述属性
default自定义选项内容-

主题定制 ​

样式变量 ​

CSS 变量值
--s-picker-view-height240px
--s-picker-view-font-sizevar(--s-font-size-lg)
--s-picker-view-colorvar(--s-text-color-primary)
--s-picker-view-indicator-heightvar(--s-content-height-lg)
--s-picker-view-indicator-border-colorvar(--s-border-color)
--s-picker-view-mask-bg-imagelinear-gradient(to bottom, rgba(var(--s-bg-color-elevated-rgb), 0.95), rgba(var(--s-bg-color-elevated-rgb), 0.6)), linear-gradient(to top, rgba(var(--s-bg-color-elevated-rgb), 0.95), rgba(var(--s-bg-color-elevated-rgb), 0.6))

Released under the MIT License.

Copyright © 2023-present wuzhitao