Cascader/CascaderPopup/CascaderView 级联选择 #

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

const separator = '-'
const placeholder = '选择家电'

const disableValue = ref(['bingxiang', 'sanmen'])
const formatValue = ref(`bingxiang${separator}duikaimen`)

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 onChange(res: SelectorModelValue) {
  console.log('change', res)

  showToast(`选择了 ${res}`)
}

function onCallApi() {
  showCascader({
    options: cascadeOptions,
    success: res => {
      console.log('success', res)
      if (res.cancel) {
        showToast('取消了')
      } else {
        showToast(`选择了 ${res.detail.label}`)
      }
    }
  })
}
</script>

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

<template>
  <ta-group title="基础用法">
    <ta-cell label="家电">
      <ta-cascader :options="cascadeOptions" />
    </ta-cell>
    <ta-cell label="地区">
      <ta-cascader :options="regionOptions" :fieldNames="{ value: 'label' }" />
    </ta-cell>
    <ta-cell label="placeholder">
      <ta-cascader :options="cascadeOptions" :placeholder="placeholder" />
    </ta-cell>
    <ta-cell label="formatter/parser">
      <ta-cascader
        :options="cascadeOptions"
        :placeholder="placeholder"
        v-model="formatValue"
        :formatter="formatter"
        :parser="parser"
      />
    </ta-cell>
    <ta-cell label="禁用">
      <ta-cascader :modelValue="disableValue" :options="cascadeOptions" disabled />
    </ta-cell>
  </ta-group>
  <ta-group title="事件监听">
    <ta-cell label="change">
      <ta-cascader :options="cascadeOptions" @change="onChange" />
    </ta-cell>
  </ta-group>
  <ta-group title="API">
    <ta-cell label="showCascader" isLink @click="onCallApi()" />
  </ta-group>
</template>

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

const popupValue = ref(['bingxiang', 'duikaimen'])
const visible = ref(false)
const clickEvent = ref(false)
const changeEvent = ref(false)
const visibleEvent = ref(false)

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

  showToast(`选择了 ${res}`)
}

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: CascaderOnConfirm = res => {
  if (clickEvent.value) {
    console.log('confirm', res)
    showToast(`点击确定按钮`)
  }
}

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: 'ExpCascaderPopup'
}
</script>

<template>
  <ta-notice-bar class="top-notice-bar" title="基础展示参数可以参考 Cascader" />
  <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-cascader-popup
    v-model:visible="visible"
    :options="cascadeOptions"
    v-model="popupValue"
    @change="onChange"
    @confirm="onConfirm"
    @cancel="onCancel"
    @visibleStateChange="onVisibleStateChange"
  />
</template>

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

const changeValue = ref([])
const selectValue = ref([])
const baseValue = ref([])

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

  showToast(`change: ${res}`)
}

const onSelect: CascaderOnSelect = res => {
  console.log('select', res)

  showToast(`select: ${res.value}`)
}
</script>

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

<template>
  <ta-notice-bar class="top-notice-bar" title="基础展示参数可以参考 Cascader" />
  <ta-group title="家电">
    <ta-cascader-view :options="cascadeOptions" v-model="baseValue" />
  </ta-group>
  <ta-group title="空数据">
    <ta-cascader-view :options="[]" />
  </ta-group>
  <ta-group title="change 事件">
    <ta-cascader-view :options="cascadeOptions" @change="onChange" v-model="changeValue" />
  </ta-group>
  <ta-group title="select 事件（跟 change 的区别是重复选一样的也触发）">
    <ta-cascader-view :options="cascadeOptions" @select="onSelect" v-model="selectValue" />
  </ta-group>
</template>