npm package: @hbis-uni/hbis-dropdown-select
Description: HBIS UNI hbis-dropdown-select component
Latest version: 1.0.0

# hbis-dropdown-select 组件

可进行下拉筛选的 UniApp 组件，支持自定义数据列表、监听选中事件，支持箭头显示、隐藏，下拉时有箭头旋转动画

## 功能特性

- ✅ 支持自定义数据列表
- ✅ 支持自定义监听选中事件
- ✅ 支持箭头显示/隐藏
- ✅ 支持设置下拉列表高度
- ✅ 支持设置下拉列表选中、未选中文字颜色
- ✅ 支持设置下拉列表是否显示滚动条
- ✅ 响应式设计，适配不同屏幕
- ✅ Vue 3 + TypeScript 开发
- ✅ 支持按需引入
- ✅ 兼容 UniApp 所有平台

## 安装

### 方式一：通过主组件库安装

```bash
pnpm add @hbis-uni/components
```

### 方式二：单独安装

```bash
pnpm add @hbis-uni/hbis-dropdown-select
```

## 使用

### 基本使用

```vue
<template>
 <hbisDropDownSelect v-model="selectedFilters" :options="filterOptions" @change="handleFilterChange"/>
</template>

<script setup lang="ts">
import { hbisDropDownSelect } from '@hbis-uni/components';
</script>
```

### 隐藏箭头的使用

```vue
<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

```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: [1013098337@qq.com](mailto:1013098337@qq.com)
---

**HBIS UNI Components Library**

*打造高质量的 UniApp 组件库*