@daysnap/horn-ui/src/hor-select-picker/README.md

hron ui

# HorSelectPicker


### 介绍
搭配cell的picker
## 代码演示
### 基础用法
```html
<template>
  <demo-block title="基础用法">
    <hor-select-picker v-bind="selectPicker" v-model="selectPicker.modelValue" />
    <hor-cell label="modelValue数字或字符串" :value="selectPicker.modelValue"></hor-cell>
  </demo-block>
  <demo-block title="基础用法">
    <hor-select-picker v-bind="selectPicker2" v-model="selectPicker2.modelValue" />
    <hor-cell label="modelValue对象" :value="selectPicker2.modelValue"></hor-cell>
  </demo-block>
  <demo-block title="级联要求v-model:必须为数组(value:string)">
    <hor-select-picker v-bind="selectPicker3" v-model="selectPicker3.modelValue" />
    <hor-cell label="modelValue对象" :value="selectPicker3.modelValue"></hor-cell>
  </demo-block>
  <demo-block title="级联要求v-model:必须为数组(value:object)">
    <hor-select-picker v-bind="selectPicker4" v-model="selectPicker4.modelValue" />
    <hor-cell label="modelValue对象" :value="selectPicker4.modelValue"></hor-cell>
  </demo-block>
</template>

<script setup lang="ts">
  import type { PickerColumn } from 'vant'
  import type { HorSelectPickerProps } from '@daysnap/horn-ui'
  import { showLoadingToast } from 'vant'
  import { HorSelectPicker, HorCell } from '@daysnap/horn-ui'

  import { ref } from 'vue'
  const singleColumns: PickerColumn = [
    {
      text: '浙江',
      value: 'Zhejiang',
    },
    { text: '西湖区', value: 'Xihu' },
    { text: '余杭区', value: 'Yuhang' },
    { text: '鼓楼区', value: 'Gulou' },
    { text: '台江区', value: 'Taijiang' },
    { text: '思明区', value: 'Siming' },
    { text: '海沧区', value: 'Haicang' },
    {
      text: '福建',
      value: 'Fujian',
    },
  ]

  const columns1: PickerColumn = [
    {
      text: '浙江',
      value: 'Zhejiang',
      children: [
        {
          text: '杭州',
          value: 'Hangzhou',
          children: [
            { text: '西湖区', value: 'Xihu' },
            { text: '余杭区', value: 'Yuhang' },
          ],
        },
        {
          text: '温州',
          value: 'Wenzhou',
          children: [
            { text: '鹿城区', value: 'Lucheng' },
            { text: '瓯海区', value: 'Ouhai' },
          ],
        },
      ],
    },
    {
      text: '福建',
      value: 'Fujian',
      children: [
        {
          text: '福州',
          value: 'Fuzhou',
          children: [
            { text: '鼓楼区', value: 'Gulou' },
            { text: '台江区', value: 'Taijiang' },
          ],
        },
        {
          text: '厦门',
          value: 'Xiamen',
          children: [
            { text: '思明区', value: 'Siming' },
            { text: '海沧区', value: 'Haicang' },
          ],
        },
      ],
    },
  ]

  const columns2 = () => {
    return new Promise<PickerColumn>((res) => {
      const toast = showLoadingToast('加载中...')
      setTimeout(() => {
        toast.close()
        res(columns1)
      }, 2000)
    })
  }

  const selectPicker = ref<Partial<HorSelectPickerProps>>({
    modelValue: 'Gulou',
    label: '请选择类型',
    required: true,
    title: '请选择类型',
    placeholder: '请选择公司',
    clearable: true,
    formatter: (v: any) => v + '省',
    options: singleColumns,
  })

  const selectPicker2 = ref<Partial<HorSelectPickerProps>>({
    modelValue: { text: '海沧区', value: 'Haicang' },
    label: '请选择类型',
    required: true,
    title: '请选择类型',
    placeholder: '请选择公司',
    valueType: 'object',
    clearable: true,
    formatter: (v: any) => v + '省',
    options: singleColumns,
  })

  const selectPicker3 = ref<Partial<HorSelectPickerProps>>({
    // modelValue: { text: '西湖区', value: 'Xihu' },
    modelValue: ['Zhejiang', 'Hangzhou', 'Xihu'],
    label: '请选择类型',
    required: true,
    title: '请选择类型',
    placeholder: '请选择公司',
    clearable: true,
    triggerType: 'immediately',
    formatter: (v: any) => v + '省',
    options: columns2,
  })
  const selectPicker4 = ref<Partial<HorSelectPickerProps>>({
    modelValue: [{ text: '海沧区', value: 'Haicang' }],
    label: '请选择类型',
    required: true,
    title: '请选择类型',
    valueType: 'object',
    placeholder: '请选择公司',
    clearable: true,
    triggerType: 'lazy',
    formatter: (v: any) => v + '省',
    options: columns2,
  })
</script>

```

## API

### 属性 Props

<table>
  <tr>
    <td>名称</td>
    <td>类型</td>
    <td>默认值</td>
  </tr>
  <tr v-for="(item, key) in horSelectPickerProps" :key="key">
    <td>{{ key }}</td>
    <td>{{ parseType(item.type || item) }}</td>
    <td>{{ reserve(item.default, '-') }}</td>
  </tr>
</table>

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>

### 插槽 Slots

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>


### 实例方法

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>



<script setup lang="ts">
  import { reserve } from '@daysnap/utils'
  import { HorCell } from '../hor-cell'
  import { HorSelectPicker, horSelectPickerProps } from '.'
  import { parseType } from '../utils'
</script>