@hbis-uni/hbis-dropdown-select
v1.0.0
Published
HBIS UNI hbis-dropdown-select component
Keywords
Readme
hbis-dropdown-select 组件
可进行下拉筛选的 UniApp 组件，支持自定义数据列表、监听选中事件，支持箭头显示、隐藏，下拉时有箭头旋转动画
功能特性
- ✅ 支持自定义数据列表
- ✅ 支持自定义监听选中事件
- ✅ 支持箭头显示/隐藏
- ✅ 支持设置下拉列表高度
- ✅ 支持设置下拉列表选中、未选中文字颜色
- ✅ 支持设置下拉列表是否显示滚动条
- ✅ 响应式设计，适配不同屏幕
- ✅ Vue 3 + TypeScript 开发
- ✅ 支持按需引入
- ✅ 兼容 UniApp 所有平台
安装
方式一：通过主组件库安装
pnpm add @hbis-uni/components方式二：单独安装
pnpm add @hbis-uni/hbis-dropdown-select使用
基本使用
<template>
<hbisDropDownSelect v-model="selectedFilters" :options="filterOptions" @change="handleFilterChange"/>
</template>
<script setup lang="ts">
import { hbisDropDownSelect } from '@hbis-uni/components';
</script>隐藏箭头的使用
<template>
<div class="container">
<h1>hbisDropDownSelect 组件简单测试</h1>
<div class="drop-container">
<hbisDropDownSelect v-model="selectedFilters" :options="filterOptions" @change="handleFilterChange"
:showArrow="false" />
</div>
</div>
</template>
<script setup>
import {
ref
} from 'vue';
import hbisSearchInput from '../../../packages/components/hbis-search-input/src/hbis-search-input.vue';
// 筛选配置
const filterOptions = ref([{
key: 'category',
label: '分类',
options: [{
label: '全部',
value: ''
},
{
label: '手机',
value: 'phone'
},
{
label: '电脑',
value: 'computer'
},
{
label: '平板',
value: 'tablet'
}
]
},
{
key: 'brand',
label: '品牌',
options: [{
label: '全部',
value: ''
},
{
label: '苹果',
value: 'apple'
},
{
label: '华为',
value: 'huawei'
},
{
label: '小米',
value: 'xiaomi'
},
{
label: '三星',
value: 'samsung'
}
]
},
{
key: 'price',
label: '价格',
options: [{
label: '全部',
value: ''
},
{
label: '0-1000',
value: '0-1000'
},
{
label: '1000-3000',
value: '1000-3000'
},
{
label: '3000以上',
value: '3000+'
}
]
}
])
// 处理筛选变化
const handleFilterChange = (data) => {
console.log('筛选项变化:', data)
}
</script>
## API
### 属性
| 属性名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| options | array | 必填 | 下拉列表数据，格式为[{
key: 'category',
label: '分类',
options: [{
label: '全部',
value: ''
},
{
label: '手机',
value: 'phone'
},
{
label: '电脑',
value: 'computer'
},
{
label: '平板',
value: 'tablet'
}
]
},
{
key: 'brand',
label: '品牌',
options: [{
label: '全部',
value: ''
},
{
label: '苹果',
value: 'apple'
},
{
label: '华为',
value: 'huawei'
},
{
label: '小米',
value: 'xiaomi'
},
{
label: '三星',
value: 'samsung'
}
]
},
{
key: 'price',
label: '价格',
options: [{
label: '全部',
value: ''
},
{
label: '0-1000',
value: '0-1000'
},
{
label: '1000-3000',
value: '1000-3000'
},
{
label: '3000以上',
value: '3000+'
}
]|
| modelValue | obj | {} | 默认选中值 |
| showArrow | boolean | true | 是否显示箭头 |
| listHeight | Number | 0 | 下拉列表最大高度，超出进行滚动，单位px。如果不传，默认为全部显示的高度 |
| chosenColor | String | '#ee0a24' | 下拉列表选中项文字颜色 |
| unChosenColor | String | '#000' | 下拉列表未选中项文字颜色 |
| showScrollBar | boolean | false | 是否显示下拉列表滚动条|
### 事件
| 事件名 | 参数 | 说明 |
| --- | --- | --- |
| change | 无 | 点击清空按钮时触发 |
## 样式说明
### 组件结构
.dropdown-filter ├── .filter-container # 根容器 │ ├── .filter-item # 每项标题 │ ├── .filter-header ├── .filter-label # 标题 ├── .filter-value-group ├── .filter-value # 选中项 ├── .arrow # 箭头 ├── .dropdown-menu-show/hide # 下拉列表 │ ├── .dropdown-item # 下拉列表子项
### 样式类名
| 类名 | 说明 |
| --- | --- |
| dropdown-filter | 组件根容器类 |
| filter-container | |
| filter-item | 子项容器类 |
| filter-header | 标题+选中项类 |
| filter-label | 标题类 |
| filter-value-group | 选中项父容器类 |
| filter-value | 选中项类 |
| arrow | 箭头类 |
| dropdown-menu-show/hide | 下拉列表类 |
| dropdown-item | 下拉列表子项类 |
## 兼容性
| 平台 | 兼容性 |
| --- | --- |
| H5 | ✅ 支持 |
| App (iOS) | ✅ 支持 |
| App (Android) | ✅ 支持 |
| 微信小程序 | ✅ 支持 |
| 支付宝小程序 | ✅ 支持 |
| 百度小程序 | ✅ 支持 |
| 字节跳动小程序 | ✅ 支持 |
| QQ小程序 | ✅ 支持 |
## 开发说明
### 组件结构
hbis-dropdown-select/ ├── src/ │ └── hbis-dropdown-select.vue # 组件源码 ├── index.ts # 组件入口 ├── package.json # 包配置 └── README.md # 组件文档
### 开发环境
- Vue 3 + TypeScript
- Vite
- UniApp
### 构建命令
```bash
# 构建整个组件库
pnpm run build示例
完整示例
```vue
<template>
<div class="container">
<h1>hbisDropDownSelect 组件简单测试</h1>
<div class="drop-container">
<hbisDropDownSelect v-model="selectedFilters" :options="filterOptions" @change="handleFilterChange"
:showArrow="false" :listHeight="120" :showScrollBar="true"/>
</div>
<div class="content">
<h2>筛选结果</h2>
<div class="result-info">
<p>当前筛选条件：</p>
<ul>
<li v-for="(value, key) in selectedFilters" :key="key">
{{ getFilterLabel(key) }}: {{ getValueLabel(key, value) }}
</li>
</ul>
</div>
<div class="filtered-data">
<div v-for="(item, index) in filteredData" :key="index" class="data-item">
<h3>{{ item.title }}</h3>
<p>分类: {{ item.category }}</p>
<p>品牌: {{ item.brand }}</p>
<p>价格: ¥{{ item.price }}</p>
</div>
</div>
</div>
</div>
</template>
<script setup>
import {
ref,
computed
} from 'vue';
import hbisDropDownSelect from '../../../packages/components/hbis-dropdown-select/src/hbis-dropdown-select.vue';
// 筛选配置
const filterOptions = ref([{
key: 'category',
label: '分类',
options: [{
label: '全部',
value: ''
},
{
label: '手机',
value: 'phone'
},
{
label: '电脑',
value: 'computer'
},
{
label: '平板',
value: 'tablet'
}
]
},
{
key: 'brand',
label: '品牌',
options: [{
label: '全部',
value: ''
},
{
label: '苹果',
value: 'apple'
},
{
label: '华为',
value: 'huawei'
},
{
label: '小米',
value: 'xiaomi'
},
{
label: '三星',
value: 'samsung'
}
]
},
{
key: 'price',
label: '价格',
options: [{
label: '全部',
value: ''
},
{
label: '0-1000',
value: '0-1000'
},
{
label: '1000-3000',
value: '1000-3000'
},
{
label: '3000以上',
value: '3000+'
}
]
}
])
const chosenData = ref('');
// 选中值
const selectedFilters = ref({
category: '',
brand: '',
price: ''
})
// 模拟数据
const mockData = ref([{
title: 'iPhone 14',
category: 'phone',
brand: 'apple',
price: 5999
},
{
title: 'MacBook Pro',
category: 'computer',
brand: 'apple',
price: 12999
},
{
title: '华为P50',
category: 'phone',
brand: 'huawei',
price: 4488
},
{
title: '小米平板5',
category: 'tablet',
brand: 'xiaomi',
price: 1999
},
{
title: '三星Galaxy S22',
category: 'phone',
brand: 'samsung',
price: 5299
},
{
title: '华为MateBook',
category: 'computer',
brand: 'huawei',
price: 5699
}
])
// 筛选后的数据
const filteredData = computed(() => {
return mockData.value.filter(item => {
// 分类筛选
if (selectedFilters.value.category && item.category !== selectedFilters.value.category) {
return false
}
// 品牌筛选
if (selectedFilters.value.brand && item.brand !== selectedFilters.value.brand) {
return false
}
// 价格筛选
if (selectedFilters.value.price) {
const priceRange = selectedFilters.value.price
if (priceRange === '0-1000' && (item.price < 0 || item.price > 1000)) {
return false
} else if (priceRange === '1000-3000' && (item.price < 1000 || item.price > 3000)) {
return false
} else if (priceRange === '3000+' && item.price < 3000) {
return false
}
}
return true
})
})
// 处理筛选变化
const handleFilterChange = (data) => {
console.log('筛选项变化:', data)
}
// 获取筛选项标签
const getFilterLabel = (key) => {
const filter = filterOptions.value.find(item => item.key === key)
return filter ? filter.label : key
}
// 获取值标签
const getValueLabel = (key, value) => {
const filter = filterOptions.value.find(item => item.key === key)
if (filter) {
const option = filter.options.find(opt => opt.value === value)
return option ? option.label : value
}
return value
}
</script>
<style scoped>
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
margin-bottom: 20px;
text-align: center;
}
.drop-container {
margin-bottom: 20px;
text-align: center;
}
.content {
margin-top: 30px;
.result-info {
background-color: #f5f5f5;
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
}
.result-info ul {
list-style-type: none;
padding: 0;
}
.result-info li {
margin: 5px 0;
color: #666;
}
.filtered-data {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.data-item {
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.data-item h3 {
margin-top: 0;
color: #333;
}
.data-item p {
margin: 8px 0;
color: #666;
}
}
</style>
## 注意事项
1. 组件默认全屏显示，建议通过v-if控制其显示/隐藏
2. 在UniApp中使用时，确保正确引入组件
## 更新日志
### v1.0.0
- ✅ 支持自定义数据列表
- ✅ 支持自定义监听选中事件
- ✅ 支持箭头显示/隐藏
- ✅ 支持设置下拉列表高度
- ✅ 支持设置下拉列表选中、未选中文字颜色
- ✅ 支持设置下拉列表是否显示滚动条
## 许可证
ISC
## 贡献
欢迎提交 Issue 和 Pull Request！
## 联系方式
如果有任何问题或建议，欢迎通过以下方式联系：
- Email: [[email protected]](mailto:[email protected])
---
**HBIS UNI Components Library**
*打造高质量的 UniApp 组件库*