Evoker

Appearance

Return to top
On this page

picker

从底部弹起的原生选择器。

Props

参数类型默认值必填说明
header-textstring否选择器的标题
modestringselector否选择器类型
合法值说明
selector普通选择器
multiSelector多列选择器
time时间选择器
date日期选择器
disabledbooleanfalse否是否禁用

Events

事件名说明回调参数
cancel取消选择时触发

mode = selector

普通选择器

Props

参数类型默认值必填说明
rangearray/object[][]是mode 为 selector 或 multiSelector 时，range 有效
range-keystring否当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valuenumber0否表示选择了 range 中的第几个（下标从 0 开始）

Events

事件名说明回调参数
changevalue 改变时触发 change 事件{ value: number }

Example

vue
<template>
  <picker :range="fruit.range" :value="fruit.value" @change="onChange">
    <span>Selected: {{ fruit.range[fruit.value] }}</span>
  </picker>
</template>

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

const fruit = reactive({
  range: ['苹果', '香蕉', '草莓', '菠萝', '西瓜', '桃子', '橙子'],
  value: 0
})

const onChange = ev => {
  fruit.value = ev.detail.value
}
</script>

mode = multiSelector

多列选择器

Props

参数类型默认值必填说明
rangearray/object[][]是mode 为 selector 或 multiSelector 时，range 有效
range-keystring否当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valuenumber[][]否表示选择了 range 中的第几个（下标从 0 开始）

Events

事件名说明回调参数
changevalue 改变时触发 change 事件{ value: number[] }
columnchange列改变时触发

Example

多列

vue
<template>
  <picker mode="multiSelector" :range="weeks.range" :value="weeks.value" @change="onChange">
    <span>Selected: {{ weeks.range[0][weeks.value[0]] }} {{ weeks.range[1][weeks.value[1]] }}</span>
  </picker>
</template>

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

const weeks = reactive({
  range: [['周一', '周二', '周三', '周四', '周五'], ['上午', '下午', '晚上']],
  value: [0, 0]
})

const onChange = ev => {
  weeks.value = ev.detail.value
}
</script>

联动

vue
<template>
  <picker
    mode="multiSelector"
    :range="cities.range"
    :value="cities.value"
    @change="onChange"
    @columnchange="onColumnChange"
  >
    <span>
      Selected: {{ cities.range[0][cities.value[0]] }} {{ cities.range[1][cities.value[1]] }}
      {{ cities.range[2][cities.value[2]] }}
    </span>
  </picker>
</template>

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

const cities = reactive({
  range: [['浙江', '福建'], ['杭州', '温州'], ['西湖区', '余杭区']],
  value: [0, 0, 0]
})

const onChange = ev => {
  cities.value = ev.detail.value
}

const onColumnChange = ev => {
  const { column, value } = e.detail
  cities.value[column] = value
  if (column === 0) {
    if (cities.value[0] === 0) {
      cities.range[1] = ['杭州', '温州']
      cities.range[2] = ['西湖区', '余杭区']
    } else if (cities.value[column] === 1) {
      cities.range[1] = ['福州', '厦门']
      cities.range[2] = ['鼓楼区', '台江区']
    }
    cities.value[1] = 0
    cities.value[2] = 0
  } else if (column === 1) {
    if (cities.value[0] === 0) {
      if (cities.value[1] === 0) {
        cities.range[2] = ['西湖区', '余杭区']
      } else if (cities.value[1] === 1) {
        cities.range[2] = ['鹿城区', '瓯海区']
      }
    } else if (cities.value[0] === 1) {
      if (cities.value[1] === 0) {
        cities.range[2] = ['鼓楼区', '台江区']
      } else if (cities.value[1] === 1) {
        cities.range[2] = ['思明区', '海沧区']
      }
    }
    cities.value[2] = 0
  }
}
</script>

mode = time

时间选择器

Props

参数类型默认值必填说明
valuestring否表示选中的时间，格式为"hh:mm"
startstring否表示有效时间范围的开始，格式为"hh:mm"
endstring否表示有效时间范围的结束，格式为"hh:mm"

Events

事件名说明回调参数
changevalue 改变时触发 change 事件{ value: string }

Example

vue
<template>
  <picker :value="timeValue" mode="time" @change="onChange">
    <span>Selected: {{ timeValue }}</span>
  </picker>
</template>

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

const timeValue = ref('20:00')

const onChange = ev => {
  timeValue.value = ev.detail.value
}
</script>

mode = date

日期选择器

Props

参数类型默认值必填说明
valuestring否表示选中的日期，格式为"yyyy-MM-dd"
startstring否表示有效日期范围的开始，格式为"yyyy-MM-dd"
endstring否表示有效日期范围的结束，字符串格式为"yyyy-MM-dd"

Events

事件名说明回调参数
changevalue 改变时触发 change 事件{ value: string }

Example

vue
<template>
  <picker :value="dateValue" mode="date" @change="onChange">
    <span>Selected: {{ dateValue }}</span>
  </picker>
</template>

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

const dateValue = ref('2018:08:08')

const onChange = ev => {
  dateValue.value = ev.detail.value
}
</script>