Picker/PickerPopup/PickerView 选择器 #

<script setup lang="ts">
import { ref } from 'vue'
import { cascadeOptions, multiOptions, options, regionOptions } from './data'
import {
  showToast,
  showPicker,
  type SelectorModelValue,
  type SelectorValueFormatter,
  type SelectorValueParser
} from '@/index'

const regionValue = ref([])
const disableValue = ref([2000, '春'])

const separator = '-'
const formatValue = ref(`2001${separator}夏`)

const formatter: SelectorValueFormatter = (valueArray, labelArray) => {
  return {
    value: valueArray.join(separator),
    label: labelArray.join(separator)
  }
}

const parser: SelectorValueParser = value => {
  return value ? (value as string).split(separator) : []
}

function onCallApi() {
  showPicker({
    title: 'Picker',
    options: multiOptions
  }).then(res => {
    console.log('success', res)
    if (res.cancel) {
      showToast('取消了')
    } else {
      showToast(`选择了 ${res.detail.label}`)
    }
  })
}

function onChange(res: SelectorModelValue) {
  console.log('change', res)
}
</script>

<script lang="ts">
export default {
  name: 'ExpPicker'
}
</script>

<template>
  <ta-group title="基础用法">
    <ta-cell label="单列">
      <ta-picker :options="options" @change="onChange"></ta-picker>
    </ta-cell>
    <ta-cell label="多列">
      <ta-picker :options="multiOptions" @change="onChange"></ta-picker>
    </ta-cell>
    <ta-cell label="级联">
      <ta-picker :options="cascadeOptions" @change="onChange"></ta-picker>
    </ta-cell>
    <ta-cell label="地区">
      <ta-picker
        :options="regionOptions"
        :fieldNames="{ value: 'label' }"
        v-model="regionValue"
        @change="onChange"
      />
    </ta-cell>
    <ta-cell label="formatter/parser">
      <ta-picker
        v-model="formatValue"
        :formatter="formatter"
        :parser="parser"
        :options="multiOptions"
        @change="onChange"
      ></ta-picker>
    </ta-cell>
    <ta-cell label="禁用">
      <ta-picker :modelValue="disableValue" :options="multiOptions" disabled />
    </ta-cell>
  </ta-group>
  <ta-group title="API">
    <ta-cell label="showPicker" isLink @click="onCallApi" />
  </ta-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { multiOptions } from '../Picker/data'
import {
  showToast,
  type SelectorModelValue,
  type PickerOnConfirm,
  type PopupOnVisibleStateChange,
  type PopupOnCancel
} from '@/index'

const popupValue = ref([2000, '夏'])
const visible = ref(false)
const clickEvent = ref(false)
const changeEvent = ref(false)
const visibleEvent = ref(false)

const onVisibleStateChange: PopupOnVisibleStateChange = res => {
  if (visibleEvent.value) {
    console.log('visible-state-change', res)
    showToast(`${res.state} 事件触发`)
  }

  if (res.state === 'hidden') {
    clickEvent.value = false
    visibleEvent.value = false
    changeEvent.value = false
  }
}

const onConfirm: PickerOnConfirm = res => {
  if (clickEvent.value) {
    console.log('confirm', res)
    showToast(`点击确定按钮`)
  }
}

function onChange(res: SelectorModelValue) {
  if (changeEvent.value) {
    console.log('change', res)
    showToast(`值改为 ${res}`)
  }
}

const onCancel: PopupOnCancel = res => {
  if (clickEvent.value) {
    console.log('cancel', res)

    if (res.source === 'cancelClick') {
      showToast('点击了取消按钮')
    } else if (res.source === 'maskClick') {
      showToast('点击了蒙层')
    }
  }
}
</script>

<script lang="ts">
export default {
  name: 'ExpPickerPopup'
}
</script>

<template>
  <ta-notice-bar class="top-notice-bar" title="基础展示参数可以参考 Picker" />
  <ta-group title="基础用法">
    <ta-cell label="v-model" isLink @click="visible = true">{{ popupValue }}</ta-cell>
  </ta-group>
  <ta-group title="事件监听">
    <ta-cell
      label="change"
      isLink
      @click="
        () => {
          changeEvent = true
          visible = true
        }
      "
    />
    <ta-cell
      label="confirm/cancel"
      isLink
      @click="
        () => {
          clickEvent = true
          visible = true
        }
      "
    />
    <ta-cell
      label="visible-state-change"
      isLink
      @click="
        () => {
          visibleEvent = true
          visible = true
        }
      "
    />
  </ta-group>
  <ta-picker-popup
    v-model:visible="visible"
    title="PickerPopup"
    :options="multiOptions"
    v-model="popupValue"
    @change="onChange"
    @confirm="onConfirm"
    @cancel="onCancel"
    @visibleStateChange="onVisibleStateChange"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { showToast, type SelectorModelValue } from '@/index'
import { cascadeOptions, multiOptions, options } from '../Picker/data'

const colValue = ref([2001])
const multiValue = ref([])
const cascadeValue = ref([])
const changeValue = ref([])

function onChange(res: SelectorModelValue) {
  console.log('change', res)
}

function onChangeEvent(res: SelectorModelValue) {
  onChange(res)

  showToast(`change: ${res}`)
}
</script>

<script lang="ts">
export default {
  name: 'ExpPickerView'
}
</script>

<template>
  <ta-notice-bar class="top-notice-bar" title="基础展示参数可以参考 Picker" />
  <ta-group title="单列">
    <ta-picker-view :options="options" @change="onChange" v-model="colValue"></ta-picker-view>
  </ta-group>
  <ta-group title="多列">
    <ta-picker-view
      :options="multiOptions"
      @change="onChange"
      v-model="multiValue"
    ></ta-picker-view>
  </ta-group>
  <ta-group title="级联">
    <ta-picker-view
      :options="cascadeOptions"
      @change="onChange"
      v-model="cascadeValue"
    ></ta-picker-view>
  </ta-group>
  <ta-group title="change 事件">
    <ta-picker-view
      :options="multiOptions"
      @change="onChangeEvent"
      v-model="changeValue"
    ></ta-picker-view>
  </ta-group>
</template>