Papayaui

Appearance

PickerPopup ​

基础用法 ​

html

<pa-cell-group inset>
  <pa-cell title="单选" :value="value" is-link @click="visible = true" />
  <pa-cell title="多选" :value="value2.toString()" is-link @click="visible2 = true" />
</pa-cell-group>

<pa-picker-popup v-model:show="visible" v-model="value" :data="syncOptions" show-search />
<pa-picker-popup
  v-model:show="visible2"
  v-model="value2"
  :data="syncOptions"
  multiple
  show-search
/>
ts

import { ref } from 'vue'

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

const value2 = ref<string[]>([])
const visible2 = ref(false)

const syncOptions = new Array(20)
  .fill(0)
  .map((_item, index) => ({ label: index.toString(), value: index.toString() }))

远程数据 ​

html

<pa-cell-group inset>
  <pa-cell
    title="远程数据"
    :value="value"
    is-link
    @click="
      () => {
        visible = true
        remote = false
      }
    "
  />
  <pa-cell
    title="远程搜索"
    :value="value"
    is-link
    @click="
      () => {
        visible = true
        remote = true
      }
    "
  />
</pa-cell-group>

<pa-picker-popup
  v-model:show="visible"
  v-model="value"
  :load="onLoad"
  show-search
  :remote="remote"
/>
ts

import { ref } from 'vue'

interface OptionItem {
  label: string
  value: string
}

const value = ref<string>()
const visible = ref<boolean>(false)
const remote = ref<boolean>(false)

const onLoad = (query?: string) => {
  return new Promise<OptionItem[]>((resolve) => {
    setTimeout(() => {
      resolve(
        new Array(20).fill(0).map((_item, index) => {
          return {
            label: `${query ? `${query}搜索结果` : '选项'}: ${index}`,
            value: index.toString(),
          }
        }),
      )
    }, 600)
  })
}

远程分页数据 ​

html

<pa-cell-group inset>
  <pa-cell title="分页数据" :value="singleValue2" is-link @click="remoteVisible2 = true" />
</pa-cell-group>

<pa-picker-popup
  v-model:show="remoteVisible2"
  v-model="singleValue2"
  :load="onLoad2"
  show-search
  remote
  pagination
/>
ts

import { ref } from 'vue'

interface OptionItem {
  label: string
  value: string
}

const remoteVisible2 = ref<boolean>(false)
const singleValue2 = ref<string>()
const onLoad2 = (query?: string, pageNumber?: number, pageSize?: number) => {
  return new Promise<OptionItem[]>((resolve) => {
    setTimeout(() => {
      resolve(
        new Array(pageSize).fill(0).map((_item, index) => {
          const num = index + (pageNumber ?? 0) * (pageSize ?? 10)
          return {
            label: `${query ? `${query}搜索结果` : '选项'}: ${num}`,
            value: num.toString(),
          }
        }),
      )
    }, 600)
  })
}

创建条目 ​

html

<pa-cell-group inset>
  <pa-cell title="单选" :value="value" is-link @click="visible = true" />
  <pa-cell title="多选" :value="value2.toString()" is-link @click="visible2 = true" />
</pa-cell-group>

<pa-picker-popup
  v-model:show="visible"
  v-model="value"
  :load="onLoad"
  show-search
  remote
  pagination
  allow-create
/>

<pa-picker-popup
  v-model:show="visible2"
  v-model="value2"
  :load="onLoad"
  show-search
  remote
  pagination
  allow-create
  multiple
/>
ts

import { ref } from 'vue'

interface OptionItem {
  label: string
  value: string
}

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

const value2 = ref<string[]>([])
const visible2 = ref(false)

const onLoad = (query?: string, pageNumber?: number, pageSize?: number) => {
  if (query) return []
  return new Promise<OptionItem[]>((resolve) => {
    setTimeout(() => {
      resolve(
        new Array(pageSize).fill(0).map((_item, index) => {
          const num = index + (pageNumber ?? 0) * (pageSize ?? 10)
          return {
            label: `${query ? `${query}搜索结果` : '选项'}: ${num}`,
            value: num.toString(),
          }
        }),
      )
    }, 600)
  })
}

PickerPopup 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选择的值OptionValue|OptionValue[]-
data选项数据Option[]() => []
labelKey数据标题的字段名string'label'
valueKey数据值的字段名string'value'
showSearch是否显示搜索boolean-
searchProps搜索框的propsPartial<SearchProps>() => ({})
multiple是否多选booleanfalse
load动态获取下一级节点数据(query?:string,pageNumber?:number,pageSize?:number,extra?:Record<string,unknown>)
=>Option[]|Promise<Option[]>		-
remote是否远程搜索booleanfalse
pagination是否支持分页boolean|UseListProps<Option>false
initData每次打开重新加载数据boolean-
confirmButtonText确认按钮的文案string'确定'
emptyText数据为空时的提示文案string'无数据'
resetAfterConfirm确定后是否重置数据boolean-
showConfirm是否显示确认按钮，多选时强制开启boolean-
allowCreate是否允许用户创建新条目，需配合 showSearch 使用boolean-
beforeCreate创建前处理(text:string)=>Option|Promise<Option>-
itemClass列表项的样式类string-
itemStyle列表项的样式string|CSSProperties-

PickerPopup Event ​

事件名参数
update:modelValue(value: OptionValue | OptionValue[])
select(item: Option)
change(item: Option | Option[])
create(text: string)
update:show(value: PopupProps['show'])
open()
opened()
close()
closed()
clickOverlay()

PickerPopup Slot ​

名称说明
before-
default-

样式变量 ​

🙈