Papayaui

Appearance

Cascader ​

单选 ​

html

<pa-cell title="单选" :value="value.toString()" is-link @click="onChangeVisible" />

<pa-cascader v-model:show="visible" v-model="value" :options="treeData" />
ts

import { ref } from 'vue'

const visible = ref(false)
const value = ref<string[]>([])

const treeData = [
  {
    label: '广东省',
    value: 'gds',
    children: [
      {
        label: '深圳市',
        value: 'szs',
      },
      {
        label: '广州市',
        value: 'gzs',
      },
    ],
  },
  {
    label: '浙江省',
    value: 'zjs',
    children: [
      {
        label: '杭州市',
        value: 'hzs',
      },
    ],
  },
]

const onChangeVisible = () => {
  visible.value = true
}

多选 ​

html

<pa-cell title="多选" :value="value.join('、')" is-link @click="onChangeVisible" />

<pa-cascader v-model:show="visible" v-model="value" :options="treeData" multiple />
ts

import { ref } from 'vue'

const visible = ref(false)
const value = ref<string[]>([])

const treeData = [
  {
    label: '广东省',
    value: 'gds',
    children: [
      {
        label: '深圳市',
        value: 'szs',
      },
      {
        label: '广州市',
        value: 'gzs',
      },
    ],
  },
  {
    label: '浙江省',
    value: 'zjs',
    children: [
      {
        label: '杭州市',
        value: 'hzs',
      },
    ],
  },
]

const onChangeVisible = () => {
  visible.value = true
}

异步加载选项 ​

html

<pa-cell-group inset>
  <pa-cell title="动态数据" :value="value.toString()" is-link @click="onChangeVisible" />
</pa-cell-group>

<pa-cascader v-model:show="visible" v-model="value" :lazy-load="onLoad" />
ts

import { ref } from 'vue'
import type { CascaderNode } from '../..'

interface NodeItem {
  label: string
  value: string
  leaf?: boolean
  children?: NodeItem[]
}

const visible = ref(false)
const value = ref<string[]>([])

const onLoad = (node: CascaderNode<NodeItem>) => {
  return new Promise<NodeItem[]>((resolve) => {
    setTimeout(() => {
      resolve(
        new Array(20).fill(0).map((_item, index) => {
          const path = node.props ? `${node.props.value}-${index}` : index.toString()
          return { label: `节点${path}`, value: path, leaf: node.level === 9 } as NodeItem
        }),
      )
    }, 300)
  })
}

const onChangeVisible = () => {
  visible.value = true
}

自定义字段名 ​

html

<pa-cell-group inset>
  <pa-cell title="选项" :value="value.toString()" is-link @click="onChangeVisible" />
</pa-cell-group>

<pa-cascader
  v-model:show="visible"
  v-model="value"
  :field-names="fieldNames"
  :lazy-load="onLoad"
/>
ts

/**
 * @description 通过 `fieldNames` 属性可以自定义字段名
 */
import { ref } from 'vue'
import type { CascaderNode } from '../..'

interface NodeItem {
  name: string
  code: string
  leaf?: boolean
  childList?: NodeItem[]
}

const visible = ref(false)
const fieldNames = { label: 'name', value: 'code', children: 'childList' }
const value = ref<string[]>([])

const onLoad = (node: CascaderNode<NodeItem>) => {
  return new Promise<NodeItem[]>((resolve) => {
    setTimeout(() => {
      resolve(
        new Array(20).fill(0).map((_item, index) => {
          const path = node.props ? `${node.props.code}-${index}` : index.toString()
          return { name: `节点${path}`, code: path, leaf: node.level === 2 } as NodeItem
        }),
      )
    }, 300)
  })
}

const onChangeVisible = () => {
  visible.value = true
}

本地搜索 ​

html

<pa-cell title="本地搜索" :value="value.toString()" is-link @click="onChangeVisible" />

<pa-cascader v-model:show="visible" v-model="value" :options="treeData" show-search />
ts

/**
 * @description 设置 show-search 为 true 显示搜索栏，默认是本地搜索
 */
import { ref } from 'vue'

const visible = ref(false)
const value = ref<string[]>([])

const nodeCount = 20
const treeData = new Array(nodeCount).fill(0).map((_item, index) => {
  const key: string = index.toString()
  const children =
    index !== nodeCount - 1
      ? new Array(nodeCount).fill(0).map((_child, childIndex) => {
          const childKey = `${key}-${childIndex}`
          return { label: childKey, value: childKey }
        })
      : []
  return { label: key, value: key, children }
})

const onChangeVisible = () => {
  visible.value = true
}

远程搜索 ​

html

<pa-cell title="远程搜索" :value="value.toString()" is-link @click="onChangeVisible" />

<pa-cascader
  v-model:show="visible"
  v-model="value"
  show-search
  :lazy-load="onLoad"
  :lazy-search="onLoadSearch"
/>
ts

/**
 * @description 通过 lazy-search 属性指定远程搜索方法，返回的数据格式为 field-names 数组数据
 */
import { ref } from 'vue'
import type { CascaderNode } from '../..'

interface NodeItem {
  label: string
  value: string
  leaf?: boolean
  children?: NodeItem[]
}

const visible = ref(false)
const value = ref<string[]>([])

const onLoad = (node: CascaderNode<NodeItem>) => {
  return new Promise<NodeItem[]>((resolve) => {
    setTimeout(() => {
      resolve(
        new Array(20).fill(0).map((_item, index) => {
          const path = node.props ? `${node.props.value}-${index}` : index.toString()
          return { label: `节点${path}`, value: path, leaf: node.level === 2 } as NodeItem
        }),
      )
    }, 300)
  })
}

const onLoadSearch = (query: string) => {
  /**
   * 搜索结果可以是选项里存在的数据，也可以是不存在的数据
   */
  return new Promise<NodeItem[]>((resolve) => {
    setTimeout(() => {
      resolve([{ label: `搜索结果${query}`, value: '0000' }])
    }, 1000)
  })
}

const onChangeVisible = () => {
  visible.value = true
}

Cascader Props ​

参数说明类型默认值
show是否显示booleanfalse
zIndexz-index层级number999
overlay是否显示遮罩booleantrue
bgColor背景色CSSProperties['background-color']-
safeAreaInsetBottom是否适配底部安全区booleantrue
title标题string-
height弹窗高度string'80vh'
round是否圆角(boolean | string)[]true
closeable是否显示关闭按钮booleantrue
closeOnClickOverlay点击遮罩是否关闭弹窗booleantrue
duration动画的执行时间，单位msstring | number300
modelValue值CascaderValue[]-
options可选项数据源CascaderOption[]() => []
fieldNames自定义 options 结构中的字段Partial<UseTreeFieldNames<CascaderOption>>() => defaultFieldNames
maxLevel最大层级，把哪一层级作为叶子节点numberNumber.MAX_SAFE_INTEGER
multiple是否多选booleanfalse
showSearch是否显示搜索boolean-
searchProps搜索框的propsPartial<SearchProps>() => ({})
lazyLoad动态获取下一级节点数据(node:CascaderNode)=>CascaderOption[]|Promise<CascaderOption[]>-
lazySearch远程搜索(searchText:string)=>CascaderOption[]|Promise<CascaderOption[]>-
confirmButtonText确定按钮文案，多选时默认数量显示的文案也要自己定义string-
resetButtonText重置按钮文案string'重置'
emptyText数据为空时的提示文案string'无数据'
resetAfterConfirm确定后是否重置数据boolean-
showConfirm是否显示底部确认重置按钮，多选时强制开启boolean-
allowEmpty是否允许空值，只在显示底部操作按钮时有效（通常使用场景是未选中值时允许确认）boolean-
itemClass列表项的样式类string-
itemStyle列表项的样式string|CSSProperties-

Cascader Event ​

事件名参数
update:modelValue(value: CascaderValue[])
change(value: CascaderValue[],items: CascaderOption[],extra: { tabIndex: number; isSearch: boolean })
reset()
confirm()
nodeClick(node: TreeNode<CascaderOption>)
update:show(value: PopupProps['show'])
open()
opened()
close()
closed()
clickOverlay()

Cascader Slot ​

名称说明
default-

样式变量 ​

🙈