bonus
/
bonus-material-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

组件改造-支持搜索

This commit is contained in:
bb_pan 2025-06-27 10:22:21 +08:00
parent 963a744d9c
commit 3f7330e52d
1 changed files with 405 additions and 535 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

538
src/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue
View File

@ -1,28 +1,50 @@
<template> <template>
<view class="uni-stat__select"> <view class="uni-stat__select">
<span v-if="label" class="uni-label-text hide-on-phone">{{label + '：'}}</span> <span v-if="label" class="uni-label-text hide-on-phone">{{ label + '：' }}</span>
<view class="uni-stat-box" :class="{'uni-stat__actived': current}"> <view class="uni-stat-box" :class="{ 'uni-stat__actived': current }">
<view class="uni-select" :class="{'uni-select--disabled':disabled}"> <view class="uni-select" :class="{ 'uni-select--disabled': disabled }">
<view class="uni-select__input-box" @click="toggleSelector"> <view class="uni-select__input-box" @click="toggleSelector">
<view v-if="current" class="uni-select__input-text">{{textShow}}</view> <view v-if="current" class="uni-select__input-text">{{ textShow }}</view>
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view> <view v-else class="uni-select__input-text uni-select__input-placeholder">{{
typePlaceholder
}}</view>
<view v-if="current && clear && !disabled" @click.stop="clearVal"> <view v-if="current && clear && !disabled" @click.stop="clearVal">
<uni-icons type="clear" color="#c0c4cc" size="24" /> <uni-icons type="clear" color="#c0c4cc" size="24" />
</view> </view>
<view v-else> <view v-else>
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" /> <uni-icons :type="showSelector ? 'top' : 'bottom'" size="14" color="#999" />
</view> </view>
</view> </view>
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" /> <view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
<view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector"> <view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector">
<view :class="placement=='bottom'?'uni-popper__arrow_bottom':'uni-popper__arrow_top'"></view> <view
<scroll-view scroll-y="true" class="uni-select__selector-scroll"> :class="placement == 'bottom' ? 'uni-popper__arrow_bottom' : 'uni-popper__arrow_top'"
<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0"> ></view>
<text>{{emptyTips}}</text>
<!-- 🔍 搜索输入框，受 searchable 控制 -->
<view v-if="searchable" class="uni-select__search-box">
<uni-easyinput
v-model="searchValue"
placeholder="请输入关键词"
clearable
@input="onSearchInput"
/>
</view> </view>
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
@click="change(item)"> <scroll-view scroll-y="true" class="uni-select__selector-scroll">
<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text> <view class="uni-select__selector-empty" v-if="filteredData.length === 0">
<text>{{ emptyTips }}</text>
</view>
<view
v-else
class="uni-select__selector-item"
v-for="(item, index) in filteredData"
:key="index"
@click="change(item)"
>
<text :class="{ 'uni-select__selector__disabled': item.disable }">
{{ formatItemName(item) }}
</text>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
@ -32,7 +54,7 @@
</template> </template>
<script> <script>
/** /**
* DataChecklist 数据选择器 * DataChecklist 数据选择器
* @description 通过数据渲染的下拉框组件 * @description 通过数据渲染的下拉框组件
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select * @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
@ -47,210 +69,170 @@
* @value top 顶部弹出 * @value top 顶部弹出
* @value bottom 底部弹出（default) * @value bottom 底部弹出（default)
* @event {Function} change 选中发生变化触发 * @event {Function} change 选中发生变化触发
* @property {Boolean} searchable 是否显示搜索框
*/ */
export default {
export default { name: 'uni-data-select',
name: "uni-data-select",
mixins: [uniCloud.mixinDatacom || {}], mixins: [uniCloud.mixinDatacom || {}],
props: { props: {
localdata: { localdata: {
type: Array, type: Array,
default () { default() {
return [] return []
} },
}, },
value: { value: {
type: [String, Number], type: [String, Number],
default: '' default: '',
}, },
modelValue: { modelValue: {
type: [String, Number], type: [String, Number],
default: '' default: '',
}, },
label: { label: {
type: String, type: String,
default: '' default: '',
}, },
placeholder: { placeholder: {
type: String, type: String,
default: '请选择' default: '请选择',
}, },
emptyTips: { emptyTips: {
type: String, type: String,
default: '无选项' default: '无选项',
}, },
clear: { clear: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
defItem: { defItem: {
type: Number, type: Number,
default: 0 default: 0,
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
format: { format: {
type: String, type: String,
default: '' default: '',
}, },
placement: { placement: {
type: String, type: String,
default: 'bottom' default: 'bottom',
} },
searchable: {
type: Boolean,
default: true,
},
}, },
data() { data() {
return { return {
showSelector: false, showSelector: false,
current: '', current: '',
searchValue: '',
mixinDatacomResData: [], mixinDatacomResData: [],
apps: [], cacheKey: 'uni-data-select-lastSelectedValue',
channels: [], }
cacheKey: "uni-data-select-lastSelectedValue",
};
}, },
created() { created() {
this.debounceGet = this.debounce(() => { this.debounceGet = this.debounce(() => {
this.query(); this.query()
}, 300); }, 300)
if (this.collection && !this.localdata.length) { if (this.collection && !this.localdata?.length) {
this.debounceGet(); this.debounceGet()
} }
}, },
computed: { computed: {
typePlaceholder() { typePlaceholder() {
const text = { const map = {
'opendb-stat-app-versions': '版本', 'opendb-stat-app-versions': '版本',
'opendb-app-channels': '渠道', 'opendb-app-channels': '渠道',
'opendb-app-list': '应用' 'opendb-app-list': '应用',
} }
const common = this.placeholder const p = map[this.collection] || ''
const placeholder = text[this.collection] return this.placeholder + (p ? p : '')
return placeholder ?
common + placeholder :
common
}, },
valueCom() { valueCom() {
// #ifdef VUE3 return this.modelValue ?? this.value
return this.modelValue;
// #endif
// #ifndef VUE3
return this.value;
// #endif
}, },
textShow() { textShow() {
// 长文本显示 const text = this.current
let text = this.current; return text.length > 10 ? text.slice(0, 25) + '...' : text
if (text.length > 10) {
return text.slice(0, 25) + '...';
}
return text;
}, },
getOffsetByPlacement() { getOffsetByPlacement() {
switch (this.placement) { return this.placement === 'top' ? 'bottom:calc(100% + 12px);' : 'top:calc(100% + 12px);'
case 'top': },
return "bottom:calc(100% + 12px);"; filteredData() {
case 'bottom': const keyword = this.searchValue.trim().toLowerCase()
return "top:calc(100% + 12px);"; if (!this.searchable || !keyword) return this.mixinDatacomResData
} return this.mixinDatacomResData.filter((item) =>
} this.formatItemName(item).toLowerCase().includes(keyword),
)
},
}, },
watch: { watch: {
localdata: { localdata: {
immediate: true, immediate: true,
handler(val, old) { handler(val) {
if (Array.isArray(val) && old !== val) { if (Array.isArray(val)) {
this.mixinDatacomResData = val this.mixinDatacomResData = val
} }
}
}, },
valueCom(val, old) { },
valueCom() {
this.initDefVal() this.initDefVal()
}, },
mixinDatacomResData: { mixinDatacomResData: {
immediate: true, immediate: true,
handler(val) { handler(val) {
if (val.length) { if (val.length) this.initDefVal()
this.initDefVal() },
}
}
}, },
}, },
methods: { methods: {
debounce(fn, time = 100) { debounce(fn, time = 100) {
let timer = null let timer = null
return function(...args) { return function (...args) {
if (timer) clearTimeout(timer) clearTimeout(timer)
timer = setTimeout(() => { timer = setTimeout(() => fn.apply(this, args), time)
fn.apply(this, args)
}, time)
} }
}, },
// 执行数据库查询
query() { query() {
this.mixinDatacomEasyGet(); this.mixinDatacomEasyGet()
}, },
// 监听查询条件变更事件
onMixinDatacomPropsChange() { onMixinDatacomPropsChange() {
if (this.collection) { if (this.collection) this.debounceGet()
this.debounceGet();
}
}, },
initDefVal() { initDefVal() {
let defValue = '' let defValue = ''
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) { if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
defValue = this.valueCom defValue = this.valueCom
} else { } else {
let strogeValue const stored = this.getCache()
if (this.collection) { if (stored || stored === 0) {
strogeValue = this.getCache() defValue = stored
} } else if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
if (strogeValue || strogeValue === 0) { defValue = this.mixinDatacomResData[this.defItem - 1].value
defValue = strogeValue
} else {
let defItem = ''
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
defItem = this.mixinDatacomResData[this.defItem - 1].value
}
defValue = defItem
} }
if (defValue || defValue === 0) { if (defValue || defValue === 0) {
this.emit(defValue) this.emit(defValue)
} }
} }
const def = this.mixinDatacomResData.find(item => item.value === defValue) const item = this.mixinDatacomResData.find((i) => i.value === defValue)
this.current = def ? this.formatItemName(def) : '' this.current = item ? this.formatItemName(item) : ''
}, },
/**
* @param {[String, Number]} value
* 判断用户给的 value 是否同时为禁用状态
*/
isDisabled(value) { isDisabled(value) {
let isDisabled = false; return this.mixinDatacomResData.some((item) => item.value === value && item.disable)
this.mixinDatacomResData.forEach(item => {
if (item.value === value) {
isDisabled = item.disable
}
})
return isDisabled;
}, },
clearVal() { clearVal() {
this.emit('') this.emit('')
if (this.collection) { if (this.collection) this.removeCache()
this.removeCache()
}
}, },
change(item) { change(item) {
if (!item.disable) { if (!item.disable) {
this.showSelector = false this.showSelector = false
this.searchValue = ''
this.current = this.formatItemName(item) this.current = this.formatItemName(item)
this.emit(item.value) this.emit(item.value)
} }
@ -259,304 +241,192 @@
this.$emit('input', val) this.$emit('input', val)
this.$emit('update:modelValue', val) this.$emit('update:modelValue', val)
this.$emit('change', val) this.$emit('change', val)
if (this.collection) { if (this.collection) this.setCache(val)
this.setCache(val);
}
}, },
toggleSelector() { toggleSelector() {
if (this.disabled) { if (this.disabled) return
return
}
this.showSelector = !this.showSelector this.showSelector = !this.showSelector
if (!this.showSelector && this.searchable) this.searchValue = ''
},
onSearchInput(val) {
this.searchValue = val
}, },
formatItemName(item) { formatItemName(item) {
let {
text,
value,
channel_code
} = item
channel_code = channel_code ? `(${channel_code})` : ''
if (this.format) { if (this.format) {
// 格式化输出 let str = this.format
let str = ""; for (const key in item) {
str = this.format; str = str.replace(new RegExp(`{${key}}`, 'g'), item[key])
for (let key in item) {
str = str.replace(new RegExp(`{${key}}`, "g"), item[key]);
} }
return str; return str
} else {
return this.collection.indexOf('app-list') > 0 ?
`${text}(${value})` :
(
text ?
text :
`未命名${channel_code}`
)
}
},
// 获取当前加载的数据
getLoadData() {
return this.mixinDatacomResData;
},
// 获取当前缓存key
getCurrentCacheKey() {
return this.collection;
},
// 获取缓存
getCache(name = this.getCurrentCacheKey()) {
let cacheData = uni.getStorageSync(this.cacheKey) || {};
return cacheData[name];
},
// 设置缓存
setCache(value, name = this.getCurrentCacheKey()) {
let cacheData = uni.getStorageSync(this.cacheKey) || {};
cacheData[name] = value;
uni.setStorageSync(this.cacheKey, cacheData);
},
// 删除缓存
removeCache(name = this.getCurrentCacheKey()) {
let cacheData = uni.getStorageSync(this.cacheKey) || {};
delete cacheData[name];
uni.setStorageSync(this.cacheKey, cacheData);
},
} }
if (this.collection?.includes('app-list')) {
return `${item.text}(${item.value})`
} }
return item.text || `未命名${item.channel_code ? '(' + item.channel_code + ')' : ''}`
},
getCache(name = this.collection) {
return (uni.getStorageSync(this.cacheKey) || {})[name]
},
setCache(value, name = this.collection) {
const cache = uni.getStorageSync(this.cacheKey) || {}
cache[name] = value
uni.setStorageSync(this.cacheKey, cache)
},
removeCache(name = this.collection) {
const cache = uni.getStorageSync(this.cacheKey) || {}
delete cache[name]
uni.setStorageSync(this.cacheKey, cache)
},
},
}
</script> </script>
<style lang="scss"> <style lang="scss">
$uni-base-color: #6a6a6a !default; .uni-select__search-box {
$uni-main-color: #333 !default; padding: 5px 10px;
$uni-secondary-color: #909399 !default; border-bottom: 1px solid #eee;
$uni-border-3: #e5e5e5; background-color: #f9f9f9;
}
/* #ifndef APP-NVUE */ .uni-stat__select {
@media screen and (max-width: 500px) {
.hide-on-phone {
display: none;
}
}
/* #endif */
.uni-stat__select {
display: flex; display: flex;
align-items: center; align-items: center;
// padding: 15px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
width: 100%; width: 100%;
flex: 1; flex: 1;
box-sizing: border-box; box-sizing: border-box;
} }
.uni-stat-box { .uni-stat-box {
width: 100%; width: 100%;
flex: 1; flex: 1;
} }
.uni-stat__actived { .uni-stat__actived {
width: 100%; width: 100%;
flex: 1; flex: 1;
// outline: 1px solid #2979ff; }
}
.uni-label-text { .uni-label-text {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
color: $uni-base-color; color: #6a6a6a;
margin: auto 0; margin: auto 0;
margin-right: 5px; margin-right: 5px;
} }
.uni-select { .uni-select {
font-size: 14px; font-size: 14px;
border: 1px solid $uni-border-3; border: 1px solid #e5e5e5;
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
padding: 0 5px; padding: 0 5px;
padding-left: 10px; padding-left: 10px;
position: relative; position: relative;
/* #ifndef APP-NVUE */
display: flex; display: flex;
user-select: none; user-select: none;
/* #endif */
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
border-bottom: solid 1px $uni-border-3; border-bottom: solid 1px #e5e5e5;
width: 100%; width: 100%;
flex: 1;
height: 35px; height: 35px;
&--disabled { &--disabled {
background-color: #f5f7fa; background-color: #f5f7fa;
cursor: not-allowed; cursor: not-allowed;
} }
} }
.uni-select__label { .uni-select__input-box {
font-size: 16px;
// line-height: 22px;
height: 35px; height: 35px;
padding-right: 10px;
color: $uni-secondary-color;
}
.uni-select__input-box {
height: 35px;
position: relative;
/* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */
flex: 1; flex: 1;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.uni-select__input { .uni-select__input-text {
flex: 1; width: 100%;
font-size: 14px; color: #333;
height: 22px; white-space: nowrap;
line-height: 22px; text-overflow: ellipsis;
} overflow: hidden;
}
.uni-select__input-plac { .uni-select__input-placeholder {
font-size: 14px; color: #6a6a6a;
color: $uni-secondary-color; font-size: 12px;
} }
.uni-select__selector { .uni-select__selector {
/* #ifndef APP-NVUE */
box-sizing: border-box; box-sizing: border-box;
/* #endif */
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
background-color: #FFFFFF; background-color: #fff;
border: 1px solid #EBEEF5; border: 1px solid #ebeef5;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
z-index: 3; z-index: 3;
padding: 4px 0; padding: 4px 0;
} }
.uni-select__selector-scroll { .uni-select__selector-scroll {
/* #ifndef APP-NVUE */
max-height: 200px; max-height: 200px;
box-sizing: border-box; }
/* #endif */
}
/* #ifdef H5 */ .uni-select__selector-empty,
@media (min-width: 768px) { .uni-select__selector-item {
.uni-select__selector-scroll {
max-height: 600px;
}
}
/* #endif */
.uni-select__selector-empty,
.uni-select__selector-item {
/* #ifndef APP-NVUE */
display: flex; display: flex;
cursor: pointer; cursor: pointer;
/* #endif */
line-height: 35px; line-height: 35px;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
/* border-bottom: solid 1px $uni-border-3; */ padding: 0 10px;
padding: 0px 10px; }
}
.uni-select__selector-item:hover { .uni-select__selector-item:hover {
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.uni-select__selector-empty:last-child, .uni-select__selector__disabled {
.uni-select__selector-item:last-child {
/* #ifndef APP-NVUE */
border-bottom: none;
/* #endif */
}
.uni-select__selector__disabled {
opacity: 0.4; opacity: 0.4;
cursor: default; cursor: default;
} }
/* picker 弹出层通用的指示小三角 */ .uni-select--mask {
.uni-popper__arrow_bottom,
.uni-popper__arrow_bottom::after,
.uni-popper__arrow_top,
.uni-popper__arrow_top::after,
{
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 6px;
}
.uni-popper__arrow_bottom {
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
top: -6px;
left: 10%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #EBEEF5;
}
.uni-popper__arrow_bottom::after {
content: " ";
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #fff;
}
.uni-popper__arrow_top {
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
bottom: -6px;
left: 10%;
margin-right: 3px;
border-bottom-width: 0;
border-top-color: #EBEEF5;
}
.uni-popper__arrow_top::after {
content: " ";
bottom: 1px;
margin-left: -6px;
border-bottom-width: 0;
border-top-color: #fff;
}
.uni-select__input-text {
// width: 280px;
width: 100%;
color: $uni-main-color;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}
.uni-select__input-placeholder {
color: $uni-base-color;
font-size: 12px;
}
.uni-select--mask {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: 2; z-index: 2;
}
.uni-popper__arrow_bottom,
.uni-popper__arrow_top {
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
}
.uni-popper__arrow_bottom {
top: -6px;
left: 10%;
border-top-width: 0;
border-bottom-color: #ebeef5;
}
.uni-popper__arrow_top {
bottom: -6px;
left: 10%;
border-bottom-width: 0;
border-top-color: #ebeef5;
}
@media screen and (max-width: 500px) {
.hide-on-phone {
display: none;
} }
}
</style> </style>