Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: feat(uni-data-select): 添加过滤筛选 #744

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+44 −16
Open

feat: feat(uni-data-select): 添加过滤筛选 #744

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions pages/vue/data-select/data-select.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@
<view class="uni-px-5 uni-pb-5">
<uni-data-select v-model="value" :localdata="range" @change="change" label="应用选择"></uni-data-select>
</view>
</uni-section>
<uni-section title="过滤筛选" type="line">
<view class="uni-px-5 uni-pb-5">
<uni-data-select v-model="value" filterable :localdata="range" @change="change" label="应用选择"></uni-data-select>
</view>
</uni-section>
</view>
</template>
Expand Down
55 changes: 39 additions & 16 deletions uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,27 @@
<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-select" :class="{'uni-select--disabled':disabled}">
<view class="uni-select__input-box" @click="toggleSelector">
<view v-if="current" class="uni-select__input-text">{{current}}</view>
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
<view v-if="current && clear && !disabled" @click.stop="clearVal" >
<uni-icons type="clear" color="#c0c4cc" size="24"/>
</view>
<view v-else>
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
</view>
<view class="uni-select__input-box" @click="toggleSelector">
<uni-easyinput v-model="current" v-if="filterable" :styles="inputStyles" @clear="clearVal" :placeholder="typePlaceholder" :inputBorder="false" @input="handleInput"></uni-easyinput>
<template v-else>
<view v-if="current" class="uni-select__input-text">{{current}}</view>
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
<view v-if="current && clear && !disabled" @click.stop="clearVal" >
<uni-icons type="clear" color="#c0c4cc" size="24"/>
</view>
<view v-else>
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
</view>
</template>
</view>
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
<view class="uni-select__selector" v-if="showSelector">
<view class="uni-popper__arrow"></view>
<scroll-view scroll-y="true" class="uni-select__selector-scroll">
<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
<view class="uni-select__selector-empty" v-if="mixinDatacomResDataFilter.length === 0">
<text>{{emptyTips}}</text>
</view>
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResDataFilter" :key="index"
@click="change(item)">
<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
</view>
Expand All @@ -38,7 +41,8 @@
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
* @property {String} value 默认值
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
* @property {Boolean} clear 是否可以清空已选项
* @property {Boolean} clear 是否可以清空已选项
* @property {Boolean} filterable 是否可以检索
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
* @property {String} label 左侧标题
* @property {String} placeholder 输入框的提示文字
Expand Down Expand Up @@ -79,6 +83,10 @@
clear: {
type: Boolean,
default: true
},
filterable:{
type:Boolean,
default:false
},
defItem: {
type: Number,
Expand All @@ -98,10 +106,14 @@
return {
showSelector: false,
current: '',
mixinDatacomResData: [],
mixinDatacomResData: [],
mixinDatacomResDataFilter:[],
apps: [],
channels: [],
cacheKey: "uni-data-select-lastSelectedValue",
cacheKey: "uni-data-select-lastSelectedValue",
inputStyles:{
backgroundColor: 'transparent',
},
};
},
created() {
Expand Down Expand Up @@ -139,7 +151,8 @@
immediate: true,
handler(val, old) {
if (Array.isArray(val) && old !== val) {
this.mixinDatacomResData = val
this.mixinDatacomResData = val
this.mixinDatacomResDataFilter = val
}
}
},
Expand All @@ -155,7 +168,17 @@
}
}
},
methods: {
methods: {
// 筛选过滤
handleInput(e){
if(e){
this.mixinDatacomResDataFilter = this.mixinDatacomResData.filter(item=>{
return item.text.includes(e)
})
}else{
this.mixinDatacomResDataFilter = [...this.mixinDatacomResData]
}
},
debounce(fn, time = 100){
let timer = null
return function(...args) {
Expand Down