弹窗
This commit is contained in:
pengxiaolong
9
uni_modules/wht-select/changelog.md
Normal file
9
uni_modules/wht-select/changelog.md
Normal file
@@ -0,0 +1,9 @@
|
||||
## 1.0.1（2024-12-06）
|
||||
- 新增 搜索功能，支持输入关键词筛选选项
|
||||
## 1.0.0（2024-12-05）
|
||||
- 基础选择器功能
|
||||
- 默认值支持
|
||||
- 可清除功能
|
||||
- 禁用选项和禁用状态
|
||||
- 样式定制功能，支持自定义高度、颜色等
|
||||
- 暗黑模式适配
|
||||
407
uni_modules/wht-select/components/wht-select/wht-select.vue
Normal file
407
uni_modules/wht-select/components/wht-select/wht-select.vue
Normal file
@@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<view class="wht-select-wrapper" :class="{ 'is-disabled': disabled }">
|
||||
<view
|
||||
class="wht-select-inner"
|
||||
:class="{
|
||||
'is-active': isOpen,
|
||||
'is-placeholder': !currentValue
|
||||
}"
|
||||
:style="{
|
||||
height: height + 'px',
|
||||
backgroundColor: backgroundColor,
|
||||
borderColor: borderColor,
|
||||
borderRadius: borderRadius + 'px'
|
||||
}"
|
||||
@click="togglePicker"
|
||||
>
|
||||
<view class="wht-select-value">
|
||||
<input
|
||||
v-if="filterable"
|
||||
class="wht-select-input"
|
||||
v-model="searchQuery"
|
||||
:placeholder="currentValue ? currentLabel : placeholder"
|
||||
:style="{
|
||||
fontSize: fontSize + 'px',
|
||||
color: currentValue ? textColor : placeholderColor
|
||||
}"
|
||||
@click.stop
|
||||
@input="onSearch"
|
||||
@focus="handleFocus"
|
||||
/>
|
||||
<text
|
||||
v-else
|
||||
:style="{
|
||||
fontSize: fontSize + 'px',
|
||||
color: currentValue ? textColor : placeholderColor
|
||||
}"
|
||||
>{{ currentLabel || placeholder }}</text>
|
||||
</view>
|
||||
<view class="wht-select-suffix">
|
||||
<view
|
||||
v-if="clearable && currentValue && !disabled"
|
||||
class="wht-select-clear"
|
||||
@click.stop="clearValue"
|
||||
>×</view>
|
||||
<view
|
||||
v-else
|
||||
class="wht-select-arrow"
|
||||
:style="{ borderTopColor: placeholderColor }"
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isOpen" class="select-dropdown">
|
||||
<view class="select-dropdown-mask" @click.stop="togglePicker"></view>
|
||||
<view
|
||||
class="select-dropdown-content"
|
||||
:style="{
|
||||
backgroundColor: backgroundColor,
|
||||
borderRadius: borderRadius + 'px'
|
||||
}"
|
||||
>
|
||||
<template v-if="filteredOptions.length > 0">
|
||||
<view
|
||||
v-for="(item, index) in filteredOptions"
|
||||
:key="item.value"
|
||||
:class="{
|
||||
'disabled': item.disabled,
|
||||
'active': currentValue === item.value
|
||||
}"
|
||||
:style="{
|
||||
fontSize: fontSize + 'px',
|
||||
color: item.disabled ? placeholderColor : textColor,
|
||||
backgroundColor: currentValue === item.value ? activeColor + '20' : backgroundColor
|
||||
}"
|
||||
@click.stop="selectOption(item, index)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</template>
|
||||
<view
|
||||
v-else
|
||||
class="select-dropdown-empty"
|
||||
:style="{
|
||||
fontSize: fontSize + 'px',
|
||||
color: placeholderColor
|
||||
}"
|
||||
>
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'wht-select',
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 样式相关的props
|
||||
height: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
fontSize: {
|
||||
type: Number,
|
||||
default: 14
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#dcdfe6'
|
||||
},
|
||||
borderRadius: {
|
||||
type: Number,
|
||||
default: 4
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
placeholderColor: {
|
||||
type: String,
|
||||
default: '#c0c4cc'
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#409eff'
|
||||
},
|
||||
filterable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
searchPlaceholder: {
|
||||
type: String,
|
||||
default: '请输入搜索内容'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentValue: '',
|
||||
isOpen: false,
|
||||
searchQuery: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentLabel() {
|
||||
const option = this.options.find(item => item.value === this.currentValue)
|
||||
return option ? option.label : ''
|
||||
},
|
||||
filteredOptions() {
|
||||
if (!this.filterable || !this.searchQuery) {
|
||||
return this.options
|
||||
}
|
||||
return this.options.filter(item =>
|
||||
item.label.toLowerCase().includes(this.searchQuery.toLowerCase())
|
||||
)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(newVal) {
|
||||
this.currentValue = newVal
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
togglePicker() {
|
||||
if (this.disabled) return
|
||||
this.isOpen = !this.isOpen
|
||||
if (!this.isOpen) {
|
||||
this.searchQuery = ''
|
||||
}
|
||||
},
|
||||
selectOption(item, index) {
|
||||
if (item.disabled) return
|
||||
this.currentValue = item.value
|
||||
this.searchQuery = ''
|
||||
this.$emit('input', item.value)
|
||||
this.$emit('change', item)
|
||||
this.isOpen = false
|
||||
},
|
||||
clearValue(e) {
|
||||
this.currentValue = ''
|
||||
this.searchQuery = ''
|
||||
this.$emit('input', '')
|
||||
this.$emit('change', null)
|
||||
this.$emit('clear')
|
||||
},
|
||||
onSearch() {
|
||||
this.$emit('search', this.searchQuery)
|
||||
},
|
||||
handleFocus() {
|
||||
if (!this.disabled) {
|
||||
this.isOpen = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wht-select-wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.wht-select-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
|
||||
&.is-active {
|
||||
.wht-select-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wht-select-value {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
right: 30px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wht-select-suffix {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wht-select-clear {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background-color: #c0c4cc;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.wht-select-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 5px solid;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.select-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.select-dropdown-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.select-dropdown-content {
|
||||
position: relative;
|
||||
max-height: 240px;
|
||||
border: 1px solid #e4e7ed;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 999;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #e4e7ed;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
> view {
|
||||
padding: 0 12px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.select-dropdown-search {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus {
|
||||
border-color: #409eff;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-dropdown-empty {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.wht-select-input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
|
||||
&::placeholder {
|
||||
color: inherit;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 暗黑模式适配
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.wht-select-wrapper {
|
||||
.select-dropdown-content {
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #48484a;
|
||||
}
|
||||
|
||||
.select-dropdown-search {
|
||||
border-bottom-color: #48484a;
|
||||
|
||||
input {
|
||||
border-color: #48484a;
|
||||
background-color: #1c1c1e;
|
||||
color: #fff;
|
||||
|
||||
&:focus {
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
87
uni_modules/wht-select/package.json
Normal file
87
uni_modules/wht-select/package.json
Normal file
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "wht-select",
|
||||
"displayName": "wht-select 增强下拉选择器组件",
|
||||
"version": "1.0.1",
|
||||
"description": "一个简单易用的下拉选择器组件，支持丰富的样式定制",
|
||||
"keywords": [
|
||||
"select",
|
||||
"选择器",
|
||||
"下拉选择",
|
||||
"表单"
|
||||
],
|
||||
"repository": "https://gitee.com/funnywuss/uniapp-plugins.git wht-select",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "n",
|
||||
"app-harmony": "u",
|
||||
"app-uvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "n",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "y",
|
||||
"快手": "y",
|
||||
"飞书": "y",
|
||||
"京东": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
109
uni_modules/wht-select/readme.md
Normal file
109
uni_modules/wht-select/readme.md
Normal file
@@ -0,0 +1,109 @@
|
||||
# wht-select 选择器组件
|
||||
|
||||
## 介绍
|
||||
一个简单易用的下拉选择器组件，支持丰富的样式定制。
|
||||
|
||||
## 使用方法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<wht-select v-model="value" :options="options" placeholder="请选择" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
options: [
|
||||
{ label: '选项一', value: '1' },
|
||||
{ label: '选项二', value: '2' },
|
||||
{ label: '选项三', value: '3' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Props 属性说明
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|--------|
|
||||
| value/v-model | 绑定值 | string/number | - |
|
||||
| options | 选项数据 | array | [] |
|
||||
| placeholder | 占位符 | string | '请选择' |
|
||||
| disabled | 是否禁用 | boolean | false |
|
||||
| clearable | 是否可清除 | boolean | false |
|
||||
| height | 选择器高度 | number | 40 |
|
||||
| fontSize | 字体大小 | number | 14 |
|
||||
| borderColor | 边框颜色 | string | '#dcdfe6' |
|
||||
| borderRadius | 圆角大小 | number | 4 |
|
||||
| backgroundColor | 背景颜色 | string | '#ffffff' |
|
||||
| textColor | 文字颜色 | string | '#606266' |
|
||||
| placeholderColor | 占位符颜色 | string | '#c0c4cc' |
|
||||
| activeColor | 激活状态颜色 | string | '#409eff' |
|
||||
| filterable | 是否开启搜索功能 | Boolean | false |
|
||||
|
||||
## Events 事件说明
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|--------|------|----------|
|
||||
| change | 选中值发生变化时触发 | 目前选中的值 |
|
||||
| clear | 点击清除按钮时触发 | - |
|
||||
| search | 搜索输入时触发 | (query: string) 搜索关键词 |
|
||||
|
||||
### Options 数据结构
|
||||
|
||||
```js
|
||||
{
|
||||
label: string, // 显示的文本
|
||||
value: string/number, // 选项的值
|
||||
disabled?: boolean // 是否禁用该选项
|
||||
}
|
||||
```
|
||||
|
||||
## 代码示例
|
||||
|
||||
### 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<wht-select v-model="value" :options="options" placeholder="请选择" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
options: [
|
||||
{ label: '选项一', value: '1' },
|
||||
{ label: '选项二', value: '2' },
|
||||
{ label: '选项三', value: '3' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 可搜索
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<wht-select v-model="value" :options="options" placeholder="请选择" filterable />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
options: [
|
||||
{ label: '选项一', value: '1' },
|
||||
{ label: '选项二', value: '2' },
|
||||
{ label: '选项三', value: '3' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
Reference in New Issue
Block a user