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

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

@ -1,562 +1,432 @@
<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">{{
<view v-if="current && clear && !disabled" @click.stop="clearVal"> typePlaceholder
<uni-icons type="clear" color="#c0c4cc" size="24" /> }}</view>
</view> <view v-if="current && clear && !disabled" @click.stop="clearVal">
<view v-else> <uni-icons type="clear" color="#c0c4cc" size="24" />
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" /> </view>
</view> <view v-else>
</view> <uni-icons :type="showSelector ? 'top' : 'bottom'" size="14" color="#999" />
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" /> </view>
<view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector"> </view>
<view :class="placement=='bottom'?'uni-popper__arrow_bottom':'uni-popper__arrow_top'"></view> <view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
<scroll-view scroll-y="true" class="uni-select__selector-scroll"> <view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector">
<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0"> <view
<text>{{emptyTips}}</text> :class="placement == 'bottom' ? 'uni-popper__arrow_bottom' : 'uni-popper__arrow_top'"
</view> ></view>
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
@click="change(item)"> <!-- 🔍 搜索输入框，受 searchable 控制 -->
<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text> <view v-if="searchable" class="uni-select__search-box">
</view> <uni-easyinput
</scroll-view> v-model="searchValue"
</view> placeholder="请输入关键词"
</view> clearable
</view> @input="onSearchInput"
</view> />
</view>
<scroll-view scroll-y="true" class="uni-select__selector-scroll">
<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>
</scroll-view>
</view>
</view>
</view>
</view>
</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
* @property {String} value 默认值 * @property {String} value 默认值
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}] * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
* @property {Boolean} clear 是否可以清空已选项 * @property {Boolean} clear 是否可以清空已选项
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效 * @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
* @property {String} label 左侧标题 * @property {String} label 左侧标题
* @property {String} placeholder 输入框的提示文字 * @property {String} placeholder 输入框的提示文字
* @property {Boolean} disabled 是否禁用 * @property {Boolean} disabled 是否禁用
* @property {String} placement 弹出位置 * @property {String} placement 弹出位置
* @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,
data() { default: true,
return { },
showSelector: false, },
current: '', data() {
mixinDatacomResData: [], return {
apps: [], showSelector: false,
channels: [], current: '',
cacheKey: "uni-data-select-lastSelectedValue", searchValue: '',
}; mixinDatacomResData: [],
}, cacheKey: 'uni-data-select-lastSelectedValue',
created() { }
this.debounceGet = this.debounce(() => { },
this.query(); created() {
}, 300); this.debounceGet = this.debounce(() => {
if (this.collection && !this.localdata.length) { this.query()
this.debounceGet(); }, 300)
} if (this.collection && !this.localdata?.length) {
}, this.debounceGet()
computed: { }
typePlaceholder() { },
const text = { computed: {
'opendb-stat-app-versions': '版本', typePlaceholder() {
'opendb-app-channels': '渠道', const map = {
'opendb-app-list': '应用' 'opendb-stat-app-versions': '版本',
} 'opendb-app-channels': '渠道',
const common = this.placeholder 'opendb-app-list': '应用',
const placeholder = text[this.collection] }
return placeholder ? const p = map[this.collection] || ''
common + placeholder : return this.placeholder + (p ? p : '')
common },
}, valueCom() {
valueCom() { return this.modelValue ?? this.value
// #ifdef VUE3 },
return this.modelValue; textShow() {
// #endif const text = this.current
// #ifndef VUE3 return text.length > 10 ? text.slice(0, 25) + '...' : text
return this.value; },
// #endif getOffsetByPlacement() {
}, return this.placement === 'top' ? 'bottom:calc(100% + 12px);' : 'top:calc(100% + 12px);'
textShow() { },
// 长文本显示 filteredData() {
let text = this.current; const keyword = this.searchValue.trim().toLowerCase()
if (text.length > 10) { if (!this.searchable || !keyword) return this.mixinDatacomResData
return text.slice(0, 25) + '...'; return this.mixinDatacomResData.filter((item) =>
} this.formatItemName(item).toLowerCase().includes(keyword),
return text; )
}, },
getOffsetByPlacement() { },
switch (this.placement) { watch: {
case 'top': localdata: {
return "bottom:calc(100% + 12px);"; immediate: true,
case 'bottom': handler(val) {
return "top:calc(100% + 12px);"; if (Array.isArray(val)) {
} this.mixinDatacomResData = val
} }
}, },
},
watch: { valueCom() {
localdata: { this.initDefVal()
immediate: true, },
handler(val, old) { mixinDatacomResData: {
if (Array.isArray(val) && old !== val) { immediate: true,
this.mixinDatacomResData = val handler(val) {
} if (val.length) this.initDefVal()
} },
}, },
valueCom(val, old) { },
this.initDefVal() methods: {
}, debounce(fn, time = 100) {
mixinDatacomResData: { let timer = null
immediate: true, return function (...args) {
handler(val) { clearTimeout(timer)
if (val.length) { timer = setTimeout(() => fn.apply(this, args), time)
this.initDefVal() }
} },
} query() {
}, this.mixinDatacomEasyGet()
},
}, onMixinDatacomPropsChange() {
methods: { if (this.collection) this.debounceGet()
debounce(fn, time = 100) { },
let timer = null initDefVal() {
return function(...args) { let defValue = ''
if (timer) clearTimeout(timer) if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
timer = setTimeout(() => { defValue = this.valueCom
fn.apply(this, args) } else {
}, time) const stored = this.getCache()
} if (stored || stored === 0) {
}, defValue = stored
// 执行数据库查询 } else if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
query() { defValue = this.mixinDatacomResData[this.defItem - 1].value
this.mixinDatacomEasyGet(); }
}, if (defValue || defValue === 0) {
// 监听查询条件变更事件 this.emit(defValue)
onMixinDatacomPropsChange() { }
if (this.collection) { }
this.debounceGet(); const item = this.mixinDatacomResData.find((i) => i.value === defValue)
} this.current = item ? this.formatItemName(item) : ''
}, },
initDefVal() { isDisabled(value) {
let defValue = '' return this.mixinDatacomResData.some((item) => item.value === value && item.disable)
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) { },
defValue = this.valueCom clearVal() {
} else { this.emit('')
let strogeValue if (this.collection) this.removeCache()
if (this.collection) { },
strogeValue = this.getCache() change(item) {
} if (!item.disable) {
if (strogeValue || strogeValue === 0) { this.showSelector = false
defValue = strogeValue this.searchValue = ''
} else { this.current = this.formatItemName(item)
let defItem = '' this.emit(item.value)
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) { }
defItem = this.mixinDatacomResData[this.defItem - 1].value },
} emit(val) {
defValue = defItem this.$emit('input', val)
} this.$emit('update:modelValue', val)
if (defValue || defValue === 0) { this.$emit('change', val)
this.emit(defValue) if (this.collection) this.setCache(val)
} },
} toggleSelector() {
const def = this.mixinDatacomResData.find(item => item.value === defValue) if (this.disabled) return
this.current = def ? this.formatItemName(def) : '' this.showSelector = !this.showSelector
}, if (!this.showSelector && this.searchable) this.searchValue = ''
},
/** onSearchInput(val) {
* @param {[String, Number]} value this.searchValue = val
* 判断用户给的 value 是否同时为禁用状态 },
*/ formatItemName(item) {
isDisabled(value) { if (this.format) {
let isDisabled = false; let str = this.format
for (const key in item) {
this.mixinDatacomResData.forEach(item => { str = str.replace(new RegExp(`{${key}}`, 'g'), item[key])
if (item.value === value) { }
isDisabled = item.disable return str
} }
}) if (this.collection?.includes('app-list')) {
return `${item.text}(${item.value})`
return isDisabled; }
}, return item.text || `未命名${item.channel_code ? '(' + item.channel_code + ')' : ''}`
},
clearVal() { getCache(name = this.collection) {
this.emit('') return (uni.getStorageSync(this.cacheKey) || {})[name]
if (this.collection) { },
this.removeCache() setCache(value, name = this.collection) {
} const cache = uni.getStorageSync(this.cacheKey) || {}
}, cache[name] = value
change(item) { uni.setStorageSync(this.cacheKey, cache)
if (!item.disable) { },
this.showSelector = false removeCache(name = this.collection) {
this.current = this.formatItemName(item) const cache = uni.getStorageSync(this.cacheKey) || {}
this.emit(item.value) delete cache[name]
} uni.setStorageSync(this.cacheKey, cache)
}, },
emit(val) { },
this.$emit('input', val) }
this.$emit('update:modelValue', val)
this.$emit('change', val)
if (this.collection) {
this.setCache(val);
}
},
toggleSelector() {
if (this.disabled) {
return
}
this.showSelector = !this.showSelector
},
formatItemName(item) {
let {
text,
value,
channel_code
} = item
channel_code = channel_code ? `(${channel_code})` : ''
if (this.format) {
// 格式化输出
let str = "";
str = this.format;
for (let key in item) {
str = str.replace(new RegExp(`{${key}}`, "g"), item[key]);
}
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);
},
}
}
</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) { display: flex;
.hide-on-phone { align-items: center;
display: none; width: 100%;
} flex: 1;
} box-sizing: border-box;
}
/* #endif */ .uni-stat-box {
.uni-stat__select { width: 100%;
display: flex; flex: 1;
align-items: center; }
// padding: 15px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
width: 100%;
flex: 1;
box-sizing: border-box;
}
.uni-stat-box { .uni-stat__actived {
width: 100%; width: 100%;
flex: 1; flex: 1;
} }
.uni-stat__actived { .uni-label-text {
width: 100%; font-size: 14px;
flex: 1; font-weight: bold;
// outline: 1px solid #2979ff; color: #6a6a6a;
} margin: auto 0;
margin-right: 5px;
}
.uni-label-text { .uni-select {
font-size: 14px; font-size: 14px;
font-weight: bold; border: 1px solid #e5e5e5;
color: $uni-base-color; box-sizing: border-box;
margin: auto 0; border-radius: 4px;
margin-right: 5px; padding: 0 5px;
} padding-left: 10px;
position: relative;
display: flex;
user-select: none;
flex-direction: row;
align-items: center;
border-bottom: solid 1px #e5e5e5;
width: 100%;
height: 35px;
.uni-select { &--disabled {
font-size: 14px; background-color: #f5f7fa;
border: 1px solid $uni-border-3; cursor: not-allowed;
box-sizing: border-box; }
border-radius: 4px; }
padding: 0 5px;
padding-left: 10px;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
user-select: none;
/* #endif */
flex-direction: row;
align-items: center;
border-bottom: solid 1px $uni-border-3;
width: 100%;
flex: 1;
height: 35px;
&--disabled { .uni-select__input-box {
background-color: #f5f7fa; height: 35px;
cursor: not-allowed; display: flex;
} flex: 1;
} flex-direction: row;
align-items: center;
}
.uni-select__label { .uni-select__input-text {
font-size: 16px; width: 100%;
// line-height: 22px; color: #333;
height: 35px; white-space: nowrap;
padding-right: 10px; text-overflow: ellipsis;
color: $uni-secondary-color; overflow: hidden;
} }
.uni-select__input-box { .uni-select__input-placeholder {
height: 35px; color: #6a6a6a;
position: relative; font-size: 12px;
/* #ifndef APP-NVUE */ }
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
}
.uni-select__input { .uni-select__selector {
flex: 1; box-sizing: border-box;
font-size: 14px; position: absolute;
height: 22px; left: 0;
line-height: 22px; width: 100%;
} background-color: #fff;
border: 1px solid #ebeef5;
border-radius: 6px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
z-index: 3;
padding: 4px 0;
}
.uni-select__input-plac { .uni-select__selector-scroll {
font-size: 14px; max-height: 200px;
color: $uni-secondary-color; }
}
.uni-select__selector { .uni-select__selector-empty,
/* #ifndef APP-NVUE */ .uni-select__selector-item {
box-sizing: border-box; display: flex;
/* #endif */ cursor: pointer;
position: absolute; line-height: 35px;
left: 0; font-size: 14px;
width: 100%; text-align: center;
background-color: #FFFFFF; padding: 0 10px;
border: 1px solid #EBEEF5; }
border-radius: 6px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
z-index: 3;
padding: 4px 0;
}
.uni-select__selector-scroll { .uni-select__selector-item:hover {
/* #ifndef APP-NVUE */ background-color: #f9f9f9;
max-height: 200px; }
box-sizing: border-box;
/* #endif */
}
/* #ifdef H5 */ .uni-select__selector__disabled {
@media (min-width: 768px) { opacity: 0.4;
.uni-select__selector-scroll { cursor: default;
max-height: 600px; }
}
}
/* #endif */ .uni-select--mask {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 2;
}
.uni-select__selector-empty, .uni-popper__arrow_bottom,
.uni-select__selector-item { .uni-popper__arrow_top {
/* #ifndef APP-NVUE */ position: absolute;
display: flex; width: 0;
cursor: pointer; height: 0;
/* #endif */ border: 6px solid transparent;
line-height: 35px; }
font-size: 14px;
text-align: center;
/* border-bottom: solid 1px $uni-border-3; */
padding: 0px 10px;
}
.uni-select__selector-item:hover { .uni-popper__arrow_bottom {
background-color: #f9f9f9; top: -6px;
} left: 10%;
border-top-width: 0;
border-bottom-color: #ebeef5;
}
.uni-select__selector-empty:last-child, .uni-popper__arrow_top {
.uni-select__selector-item:last-child { bottom: -6px;
/* #ifndef APP-NVUE */ left: 10%;
border-bottom: none; border-bottom-width: 0;
/* #endif */ border-top-color: #ebeef5;
} }
.uni-select__selector__disabled { @media screen and (max-width: 500px) {
opacity: 0.4; .hide-on-phone {
cursor: default; display: none;
} }
}
/* picker 弹出层通用的指示小三角 */
.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;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 2;
}
</style> </style>