Mauve
190 lines
7.0 KiB
Markdown
190 lines
7.0 KiB
Markdown
# lu-data-select
|
||
|
||
# 数据下拉选择组件
|
||
|
||
单选、多选，关键词过滤，清空，空数据插槽，标题过长显示省略号
|
||
|
||
数据列表较多时，选中再次打开，选中的数据项，自动滚动到可视区域
|
||
|
||
# 示例代码
|
||
|
||
```javascript
|
||
|
||
<template>
|
||
<view class="content">
|
||
<view class="title">1.单选，过滤</view>
|
||
<lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition1" :multiple="false" :filterable="true" @change="onchange"></lu-data-select>
|
||
|
||
<view class="title">2.单选，过滤，change返回对象格式</view>
|
||
<lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition1" filterable changeType="objectValue" @change="onchange"></lu-data-select>
|
||
|
||
<view class="title">3.多选，过滤</view>
|
||
<lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition" :filterable="true" :multiple="true" @change="onchange"></lu-data-select>
|
||
|
||
<view class="title">4.多选，过滤，change返回对象格式</view>
|
||
<lu-data-select
|
||
disabled
|
||
placeholder="请选择数据"
|
||
:options="selectData"
|
||
v-model="condition"
|
||
:filterable="true"
|
||
:multiple="true"
|
||
changeType="objectValue"
|
||
@change="onchange"
|
||
></lu-data-select>
|
||
|
||
<view class="title">5.自定义空数据插槽</view>
|
||
<lu-data-select placeholder="请选择数据" :options="selectData1" v-model="condition" :multiple="true" :clearable="true" :filterable="true" @change="onchange">
|
||
<template #empty>
|
||
<view style="text-align: center; padding: 20rpx; color: #f00">空数据插槽</view>
|
||
</template>
|
||
</lu-data-select>
|
||
<view class="title">6.自动判断弹出方向，演示，无需配置</view>
|
||
<lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition" :multiple="true" :clearable="true" :filterable="true" @change="onchange">
|
||
<template #empty>
|
||
<view style="text-align: center; padding: 20rpx; color: #f00">空数据插槽</view>
|
||
</template>
|
||
</lu-data-select>
|
||
|
||
<view class="title">7.边框，css的border属性，单选模式选择框高度height，多选默认自动增高</view>
|
||
<lu-data-select
|
||
placeholder="请选择数据"
|
||
:options="selectData"
|
||
v-model="condition1"
|
||
:multiple="false"
|
||
:filterable="true"
|
||
height="100rpx"
|
||
border="1px solid #f00"
|
||
@change="onchange"
|
||
></lu-data-select>
|
||
|
||
<view class="title">8.禁用选择</view>
|
||
<lu-data-select placeholder="请选择数据" disabled :options="selectData" v-model="condition1"></lu-data-select>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch } from 'vue';
|
||
const condition1 = ref('8');
|
||
const condition2 = ref('8');
|
||
const condition = ref(['7']); //多选必须是数组格式
|
||
|
||
const selectData1 = ref([]);
|
||
const selectData = ref([
|
||
{
|
||
value: '1',
|
||
label: '测试标题测试标题测试标题测试标题测试标题测试标题测试标题1'
|
||
},
|
||
{
|
||
value: '2',
|
||
label: '数据2',
|
||
disabled: true
|
||
},
|
||
{
|
||
value: '3',
|
||
label: '数据3',
|
||
disabled: false
|
||
},
|
||
{
|
||
value: '4',
|
||
label: '数据4',
|
||
disabled: true
|
||
},
|
||
{
|
||
value: '5',
|
||
label: '数据5'
|
||
},
|
||
{
|
||
value: '6',
|
||
label: '数据6'
|
||
},
|
||
{
|
||
value: '7',
|
||
label: '数据7'
|
||
},
|
||
{
|
||
value: '8',
|
||
label: '数据8'
|
||
},
|
||
{
|
||
value: '9',
|
||
label: '数据9'
|
||
},
|
||
{
|
||
value: '10',
|
||
label: '数据10'
|
||
},
|
||
{
|
||
value: '11',
|
||
label: '数据数据数据数据数据数据数据数据数据数据数据数据数据11'
|
||
},
|
||
{
|
||
value: '12',
|
||
label: '数据12'
|
||
},
|
||
{
|
||
value: '13',
|
||
label: '数据列表13'
|
||
}
|
||
]);
|
||
const onchange = (e) => {
|
||
console.log(e);
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
padding: 20px;
|
||
|
||
.title {
|
||
padding: 10px 0;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|
||
```
|
||
|
||
# 参数
|
||
|
||
| 参数名称 | 类型 | 默认值 | 可选值 | 说明 |
|
||
| ----------- | ------- | ------ | ------------ | ----------------------------- |
|
||
| v-model | String | | | 选中项绑定的值 |
|
||
| options | Array | [ ] | | 数据列表，见下方 options 参数 |
|
||
| labelKey | String | label | | 作为 label 唯一标识的键名 |
|
||
| valueKey | String | value | | 作为 value 唯一标识的键名 |
|
||
| multiple | Boolean | false | true / false | 是否多选 |
|
||
| direction | String | "" | down / up | 弹出方向，up、down, 其他值无效，自动判断方向 |
|
||
| filterable | Boolean | true | true / false | 是否可以筛选 |
|
||
| clearable | Boolean | true | true / false | 是否可以清空 |
|
||
| placeholder | String | 请选择 | | 默认提示语 |
|
||
| disabled | Boolean | false | true / false| 是否禁用选择 |
|
||
| border | String | '1px solid #e5e5e5' | css属性值 | 边框设置 |
|
||
| showEllipsis | Boolean | true | true / false | 选项过长是否显示省略号 |
|
||
| height | String | '35px' | css属性值 | 选择框高度，单选模式有效 |
|
||
| collapseTags | Boolean | false | true / false | 是否折叠 |
|
||
| collapseTagsNum | Number | 1 | | 多少开始折叠 |
|
||
| virtualList | Boolean | false | true / false | 大数据开启虚拟列表 |
|
||
| emptyText | String | 无数据 | | options 为空的时候显示的文本 |
|
||
| changeType | String | " "，可以不传，默认是返回value | "objectValue" | change事件返回的数据格式，默认：单选返回value值，多选返回value组成的数组，objectValue：单选返回对象，多选返回数组对象 |
|
||
|
||
# options 参数
|
||
|
||
| 名称 | 类型 | 说明 |
|
||
| -------- | --------------- | -------------- |
|
||
| label | String / Number | 选项的标签 |
|
||
| value | String / Number | 选项的值 |
|
||
| disabled | Boolean | 是否禁用该选项 |
|
||
|
||
# 事件
|
||
|
||
| 事件 | 说明 |
|
||
| ------ | ------------------ |
|
||
| change | 选项发生改变时触发 |
|
||
|
||
# 插槽
|
||
|
||
| 名称 | 说明 |
|
||
| ----- | ---------------- |
|
||
| empty | 自定义无数据内容 |
|
||
| option| 自定义选项插槽，返回值row：当前选项，$index：当前选项数组下标 |
|