介绍

组合了选择器、弹出框组件，实现了便捷快速的选择功能。

代码演示

基础使用

使用 v-model 双向绑定当前值，使用 v-model:visible 控制弹出框显隐。

vue ts

<template>
  <s-picker-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :columns="columns"
    @change="onChange"
    @confirm="onConfirm"
  />

  <s-list card>
    <s-list-item>
      <s-button @click="visible = true">
        {{ value ? value : '请选择' }}
      </s-button>
    </s-list-item>
    <s-list-item title="设置为: 天津市" arrow hover @click="value = '天津市'" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

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

const columns = ['北京市', '天津市', '河北省', '山东省']

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

const onChange = (value: any) => {
  console.log('change', value)
}

const onConfirm = (...args: any[]) => {
  console.log('confirm: ', ...args)
}
</script>

vue js

<template>
  <s-picker-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :columns="columns"
    @change="onChange"
    @confirm="onConfirm"
  />

  <s-list card>
    <s-list-item>
      <s-button @click="visible = true">
        {{ value ? value : '请选择' }}
      </s-button>
    </s-list-item>
    <s-list-item title="设置为: 天津市" arrow hover @click="value = '天津市'" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const columns = ['北京市', '天津市', '河北省', '山东省']
const visible = ref(false)
const value = ref()
const onChange = (value) => {
  console.log('change', value)
}
const onConfirm = (...args) => {
  console.log('confirm: ', ...args)
}
</script>

级联选择

vue ts

<template>
  <s-picker-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :columns="regionData"
    :option-keys="{ label: 'name', value: 'code' }"
    @confirm="onConfirm"
  />

  <s-list card>
    <s-list-item>
      <s-button @click="visible = true">
        {{ value ? value : '请选择' }}
      </s-button>
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item
      title="设置为: 广东省/广州市/白云区"
      arrow
      hover
      @click="value = [440000, 440100, 440111]"
    />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getRegionData } from 'region-data'

const regionData = getRegionData()

const visible = ref(false)

const value = ref<number[] | undefined>([150000, 150500, 150522])

const onConfirm = (...args: any[]) => {
  console.log('confirm: ', ...args)
}
</script>

vue js

<template>
  <s-picker-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :columns="regionData"
    :option-keys="{ label: 'name', value: 'code' }"
    @confirm="onConfirm"
  />

  <s-list card>
    <s-list-item>
      <s-button @click="visible = true">
        {{ value ? value : '请选择' }}
      </s-button>
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item
      title="设置为: 广东省/广州市/白云区"
      arrow
      hover
      @click="value = [440000, 440100, 440111]"
    />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { getRegionData } from 'region-data'
const regionData = getRegionData()
const visible = ref(false)
const value = ref([15e4, 150500, 150522])
const onConfirm = (...args) => {
  console.log('confirm: ', ...args)
}
</script>

API

PickerPopoutProps<T>

继承 PickerProps 和 FormPopoutProps。

PickerPopoutSlots<T>

继承 PickerSlots

PickerPopoutEmits<T>

继承 MotionEmits。

事件	描述	类型
update:visible	弹出框显隐时触发	(visible: boolean) => void
update:modelValue	选择器输入组件值改变时触发	(value: any, selectedOptions: any[], indexes: number[]) => void
change	选择器输入组件值改变时触发	(value: any, selectedOptions: any[], indexes: number[]) => void
confirm	点击确定按钮时触发	(value: any, selectedOptions: any[], indexes: number[]) => void