mirror of
https://github.com/yangzongzhuan/RuoYi-App.git
synced 2025-09-28 07:02:40 +00:00
升级uni-ui到最新版本1.4.27
This commit is contained in:
@@ -4,24 +4,24 @@
|
||||
<text>{{label}}</text>
|
||||
</view>
|
||||
<view class="uni-combox__input-box">
|
||||
<input class="uni-combox__input" type="text" :placeholder="placeholder"
|
||||
placeholder-class="uni-combox__input-plac" v-model="inputVal" @input="onInput" @focus="onFocus"
|
||||
@blur="onBlur" />
|
||||
<input class="uni-combox__input" type="text" :placeholder="placeholder"
|
||||
placeholder-class="uni-combox__input-plac" v-model="inputVal" @input="onInput" @focus="onFocus" @blur="onBlur" />
|
||||
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
|
||||
</uni-icons>
|
||||
</view>
|
||||
<view class="uni-combox__selector" v-if="showSelector">
|
||||
<view class="uni-popper__arrow"></view>
|
||||
<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
|
||||
<scroll-view scroll-y="true" class="uni-combox__selector-scroll" @scroll="onScroll">
|
||||
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
|
||||
<text>{{emptyTips}}</text>
|
||||
</view>
|
||||
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index"
|
||||
@click="onSelectorClick(index)">
|
||||
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" @click="onSelectorClick(index)">
|
||||
<text>{{item}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 新增蒙层,点击蒙层时关闭选项显示 -->
|
||||
<view class="uni-combox__mask" v-show="showSelector" @click="showSelector = false"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -83,7 +83,8 @@
|
||||
data() {
|
||||
return {
|
||||
showSelector: false,
|
||||
inputVal: ''
|
||||
inputVal: '',
|
||||
blurTimer:null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -94,6 +95,9 @@
|
||||
return `width: ${this.labelWidth}`
|
||||
},
|
||||
filterCandidates() {
|
||||
if (this.inputVal !== 0 && !this.inputVal) {
|
||||
return this.candidates
|
||||
}
|
||||
return this.candidates.filter((item) => {
|
||||
return item.toString().indexOf(this.inputVal) > -1
|
||||
})
|
||||
@@ -128,10 +132,16 @@
|
||||
this.showSelector = true
|
||||
},
|
||||
onBlur() {
|
||||
setTimeout(() => {
|
||||
this.blurTimer = setTimeout(() => {
|
||||
this.showSelector = false
|
||||
}, 153)
|
||||
},
|
||||
onScroll(){ // 滚动时将blur的定时器关掉
|
||||
if(this.blurTimer) {
|
||||
clearTimeout(this.blurTimer)
|
||||
this.blurTimer = null
|
||||
}
|
||||
},
|
||||
onSelectorClick(index) {
|
||||
this.inputVal = this.filterCandidates[index]
|
||||
this.showSelector = false
|
||||
@@ -148,7 +158,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
<style lang="scss">
|
||||
.uni-combox {
|
||||
font-size: 14px;
|
||||
border: 1px solid #DCDFE6;
|
||||
@@ -205,7 +215,7 @@
|
||||
border: 1px solid #EBEEF5;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
@@ -272,4 +282,13 @@
|
||||
.uni-combox__no-border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.uni-combox__mask {
|
||||
width:100%;
|
||||
height:100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user