介绍
组合了选择器弹出框、输入框组件,实现了便捷快速的选择功能。
引入
js
import PickerInput from 'sard-uniapp/components/picker-input/picker-input.vue'代码演示
基础使用
使用 v-model 绑定当前值,通过 title 和 placeholder 属性设置弹出框标题和输入框占位文本。
在点击输入框后会显示包裹选择器的弹出框。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-picker-input
v-model="value"
title="请选择性别"
placeholder="请选择性别"
clearable
:columns="columns"
@change="onChange"
/>
</sar-list-item>
<sar-list-item
title="当前值:"
:value="JSON.stringify(value) ?? 'undefined'"
/>
<sar-list-item
title="设置为:female (女性)"
arrow
hover
@click="value = 'female'"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref<string>()
const columns = [
{
value: 'male',
label: '男性',
},
{
value: 'female',
label: '女性',
},
{
value: 'others',
label: '其他',
},
]
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-list card>
<sar-list-item>
<sar-picker-input
v-model="value"
title="请选择性别"
placeholder="请选择性别"
clearable
:columns="columns"
@change="onChange"
/>
</sar-list-item>
<sar-list-item
title="当前值:"
:value="JSON.stringify(value) ?? 'undefined'"
/>
<sar-list-item
title="设置为:female (女性)"
arrow
hover
@click="value = 'female'"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const value = ref();
const columns = [
{
value: "male",
label: "\u7537\u6027"
},
{
value: "female",
label: "\u5973\u6027"
},
{
value: "others",
label: "\u5176\u4ED6"
}
];
const onChange = (value2) => {
console.log("change", value2);
};
</script>级联选择
vue
<template>
<sar-list card>
<sar-list-item>
<sar-picker-input
v-model="value"
title="请选择省市区"
placeholder="请选择"
:columns="regionData"
:option-keys="{ label: 'name', value: 'code' }"
clearable
/>
</sar-list-item>
<sar-list-item
title="当前值:"
:value="JSON.stringify(value) ?? 'undefined'"
/>
<sar-list-item
title="设置为: 广东省/广州市/白云区"
arrow
hover
@click="value = [440000, 440100, 440111]"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { getRegionData } from 'region-data'
const regionData = getRegionData()
const value = ref<number[] | undefined>([150000, 150500, 150522])
</script>vue
<template>
<sar-list card>
<sar-list-item>
<sar-picker-input
v-model="value"
title="请选择省市区"
placeholder="请选择"
:columns="regionData"
:option-keys="{ label: 'name', value: 'code' }"
clearable
/>
</sar-list-item>
<sar-list-item
title="当前值:"
:value="JSON.stringify(value) ?? 'undefined'"
/>
<sar-list-item
title="设置为: 广东省/广州市/白云区"
arrow
hover
@click="value = [440000, 440100, 440111]"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
import { getRegionData } from "region-data";
const regionData = getRegionData();
const value = ref([15e4, 150500, 150522]);
</script>API
PickerInputProps
继承 PickerPopoutProps 并有以下额外属性:
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 弹出式输入框根元素类名 | string | - |
| root-style | 弹出式输入框根元素样式 | StyleValue | - |
| disabled | 禁用状态 | boolean | false |
| readonly | 只读状态 | boolean | false |
| loading | 加载状态 | boolean | false |
| clearable | 是否显示清空按钮 | boolean | false |
| placeholder | 输入框占位符内容 | string | - |
| value-on-clear 1.19.2+ | 设置点击清除按钮后的值 | () => any | () => undefined |
| arrow 1.22+ | 自定义箭头图标名 | string | 'caret-right' |
| arrow-family 1.22+ | 自定义箭头图标字体 | string | 'sari' |
| input-props 1.22+ | 自定义输入框组件属性 | InputProps | - |
PickerInputSlots
继承 PickerPopoutSlots和PopoutInputSlots
PickerInputEmits
继承 PickerPopoutEmits 并有以下额外属性: