9 changed files with 402 additions and 336 deletions
@ -1,297 +1,295 @@ |
|||||
<template> |
<template> |
||||
<view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'"> |
<view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'"> |
||||
<view v-if="label" class="uni-combox__label" :style="labelStyle"> |
<view v-if="label" class="uni-combox__label" :style="labelStyle"> |
||||
<text>{{label}}</text> |
<text>{{ label }}</text> |
||||
</view> |
</view> |
||||
<view class="uni-combox__input-box" :style="inputStyle"> |
<view class="uni-combox__input-box" :style="inputStyle"> |
||||
<input class="uni-combox__input " type="text" :placeholder="placeholder" |
<input class="uni-combox__input" type="text" :placeholder="placeholder" placeholder-class="uni-combox__input-plac" v-model="inputVal" @input="onInput" @focus="onFocus" @blur="onBlur" @confirm="confirm" /> |
||||
placeholder-class="uni-combox__input-plac" v-model="inputVal" @input="onInput" @focus="onFocus" |
<uni-icons :type="showSelector ? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector"> </uni-icons> |
||||
@blur="onBlur" @confirm ="confirm"/> |
</view> |
||||
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector"> |
<view class="uni-combox__selector" v-if="showSelector"> |
||||
</uni-icons> |
<view class="uni-popper__arrow"></view> |
||||
</view> |
<scroll-view scroll-y="true" class="uni-combox__selector-scroll"> |
||||
<view class="uni-combox__selector" v-if="showSelector"> |
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0"> |
||||
<view class="uni-popper__arrow"></view> |
<text>{{ emptyTips }}</text> |
||||
<scroll-view scroll-y="true" class="uni-combox__selector-scroll"> |
</view> |
||||
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0"> |
<view class="uni-combox__selector-item" v-for="(item, index) in filterCandidates" :key="index" @click="onSelectorClick(index)"> |
||||
<text>{{emptyTips}}</text> |
<text>{{ item }}</text> |
||||
</view> |
</view> |
||||
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" |
</scroll-view> |
||||
@click="onSelectorClick(index)"> |
</view> |
||||
<text>{{item}}</text> |
</view> |
||||
</view> |
|
||||
</scroll-view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
/** |
/** |
||||
* Combox 组合输入框 |
* Combox 组合输入框 |
||||
* @description 组合输入框一般用于既可以输入也可以选择的场景 |
* @description 组合输入框一般用于既可以输入也可以选择的场景 |
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=1261 |
* @tutorial https://ext.dcloud.net.cn/plugin?id=1261 |
||||
* @property {String} label 左侧文字 |
* @property {String} label 左侧文字 |
||||
* @property {String} labelWidth 左侧内容宽度 |
* @property {String} labelWidth 左侧内容宽度 |
||||
* @property {String} placeholder 输入框占位符 |
* @property {String} placeholder 输入框占位符 |
||||
* @property {Array} candidates 候选项列表 |
* @property {Array} candidates 候选项列表 |
||||
* @property {String} emptyTips 筛选结果为空时显示的文字 |
* @property {String} emptyTips 筛选结果为空时显示的文字 |
||||
* @property {String} value 组合框的值 |
* @property {String} value 组合框的值 |
||||
*/ |
*/ |
||||
export default { |
export default { |
||||
name: 'uniCombox', |
name: 'uniCombox', |
||||
emits: ['input', 'update:modelValue','confirm'], |
emits: ['input', 'update:modelValue', 'confirm'], |
||||
props: { |
props: { |
||||
border: { |
border: { |
||||
type: Boolean, |
type: Boolean, |
||||
default: true |
default: true |
||||
}, |
}, |
||||
label: { |
label: { |
||||
type: String, |
type: String, |
||||
default: '' |
default: '' |
||||
}, |
}, |
||||
labelWidth: { |
labelWidth: { |
||||
type: String, |
type: String, |
||||
default: 'auto' |
default: 'auto' |
||||
}, |
}, |
||||
inputWidth:{ |
inputWidth: { |
||||
type: String, |
type: String, |
||||
default: 'auto' |
default: 'auto' |
||||
}, |
}, |
||||
placeholder: { |
placeholder: { |
||||
type: String, |
type: String, |
||||
default: '' |
default: '' |
||||
}, |
}, |
||||
candidates: { |
candidates: { |
||||
type: Array, |
type: Array, |
||||
default () { |
default() { |
||||
return [] |
return [] |
||||
} |
} |
||||
}, |
}, |
||||
emptyTips: { |
emptyTips: { |
||||
type: String, |
type: String, |
||||
default: '无匹配项' |
default: '无匹配项' |
||||
}, |
}, |
||||
// #ifndef VUE3 |
// #ifndef VUE3 |
||||
value: { |
value: { |
||||
type: [String, Number], |
type: [String, Number], |
||||
default: '' |
default: '' |
||||
}, |
}, |
||||
// #endif |
// #endif |
||||
// #ifdef VUE3 |
// #ifdef VUE3 |
||||
modelValue: { |
modelValue: { |
||||
type: [String, Number], |
type: [String, Number], |
||||
default: '' |
default: '' |
||||
}, |
} |
||||
// #endif |
// #endif |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
showSelector: false, |
showSelector: false, |
||||
inputVal: '' |
inputVal: '' |
||||
} |
} |
||||
}, |
}, |
||||
computed: { |
computed: { |
||||
labelStyle() { |
labelStyle() { |
||||
if (this.labelWidth === 'auto') { |
if (this.labelWidth === 'auto') { |
||||
return "" |
return '' |
||||
} |
} |
||||
|
|
||||
return `width: ${this.labelWidth}` |
return `width: ${this.labelWidth}` |
||||
}, |
}, |
||||
|
|
||||
inputStyle(){ |
inputStyle() { |
||||
if (this.inputWidth === 'auto') { |
if (this.inputWidth === 'auto') { |
||||
return "" |
return '' |
||||
} |
} |
||||
|
|
||||
return `width: ${this.inputWidth}` |
return `width: ${this.inputWidth}` |
||||
}, |
}, |
||||
filterCandidates() { |
filterCandidates() { |
||||
// return this.candidates.filter((item) => { |
// return this.candidates.filter((item) => { |
||||
// return item.toString().indexOf(this.inputVal) > -1 |
// return item.toString().indexOf(this.inputVal) > -1 |
||||
// }) |
// }) |
||||
return this.candidates; |
return this.candidates |
||||
}, |
}, |
||||
filterCandidatesLength() { |
filterCandidatesLength() { |
||||
return this.filterCandidates.length |
return this.filterCandidates.length |
||||
} |
} |
||||
}, |
}, |
||||
watch: { |
watch: { |
||||
// #ifndef VUE3 |
// #ifndef VUE3 |
||||
value: { |
value: { |
||||
handler(newVal) { |
handler(newVal) { |
||||
this.inputVal = newVal |
this.inputVal = newVal |
||||
}, |
}, |
||||
immediate: true |
immediate: true |
||||
}, |
}, |
||||
// #endif |
// #endif |
||||
// #ifdef VUE3 |
// #ifdef VUE3 |
||||
modelValue: { |
modelValue: { |
||||
handler(newVal) { |
handler(newVal) { |
||||
this.inputVal = newVal |
this.inputVal = newVal |
||||
}, |
}, |
||||
immediate: true |
immediate: true |
||||
}, |
} |
||||
// #endif |
// #endif |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
toggleSelector() { |
toggleSelector() { |
||||
this.showSelector = !this.showSelector |
this.showSelector = !this.showSelector |
||||
}, |
}, |
||||
onFocus() { |
onFocus() { |
||||
this.showSelector = true |
this.showSelector = true |
||||
}, |
}, |
||||
onBlur() { |
onBlur() { |
||||
setTimeout(() => { |
setTimeout(() => { |
||||
this.showSelector = false |
this.showSelector = false |
||||
}, 153) |
}, 153) |
||||
}, |
}, |
||||
onSelectorClick(index) { |
onSelectorClick(index) { |
||||
this.inputVal = this.filterCandidates[index] |
this.inputVal = this.filterCandidates[index] |
||||
this.showSelector = false |
this.showSelector = false |
||||
this.$emit('input', this.inputVal) |
this.$emit('input', this.inputVal) |
||||
this.$emit('update:modelValue', this.inputVal) |
this.$emit('update:modelValue', this.inputVal) |
||||
}, |
}, |
||||
onInput() { |
onInput() { |
||||
setTimeout(() => { |
setTimeout(() => { |
||||
this.$emit('input', this.inputVal) |
this.$emit('input', this.inputVal) |
||||
this.$emit('update:modelValue', this.inputVal) |
this.$emit('update:modelValue', this.inputVal) |
||||
}) |
}) |
||||
}, |
}, |
||||
confirm(){ |
confirm() { |
||||
setTimeout(() => { |
setTimeout(() => { |
||||
this.$emit('confirm', this.inputVal) |
this.$emit('confirm', this.inputVal) |
||||
this.$emit('update:modelValue', this.inputVal) |
this.$emit('update:modelValue', this.inputVal) |
||||
}) |
}) |
||||
} |
} |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss"> |
||||
.uni-combox { |
.uni-combox { |
||||
font-size: 14px; |
font-size: 14px; |
||||
border: 1px solid #DCDFE6; |
border: 1px solid #dcdfe6; |
||||
border-radius: 4px; |
border-radius: 4px; |
||||
padding: 6px 10px; |
padding: 6px 10px; |
||||
position: relative; |
position: relative; |
||||
/* #ifndef APP-NVUE */ |
/* #ifndef APP-NVUE */ |
||||
display: flex; |
display: flex; |
||||
/* #endif */ |
/* #endif */ |
||||
// height: 40px; |
// height: 40px; |
||||
flex-direction: row; |
flex-direction: row; |
||||
align-items: center; |
align-items: center; |
||||
// border-bottom: solid 1px #DDDDDD; |
// border-bottom: solid 1px #DDDDDD; |
||||
} |
} |
||||
|
|
||||
.uni-combox__label { |
.uni-combox__label { |
||||
font-size: 16px; |
font-size: 16px; |
||||
line-height: 22px; |
line-height: 22px; |
||||
padding-right: 10px; |
padding-right: 10px; |
||||
color: #999999; |
color: #999999; |
||||
} |
} |
||||
|
|
||||
.uni-combox__input-box { |
.uni-combox__input-box { |
||||
position: relative; |
position: relative; |
||||
/* #ifndef APP-NVUE */ |
/* #ifndef APP-NVUE */ |
||||
display: flex; |
display: flex; |
||||
/* #endif */ |
/* #endif */ |
||||
flex: 1; |
flex: 1; |
||||
flex-direction: row; |
flex-direction: row; |
||||
align-items: center; |
align-items: center; |
||||
} |
} |
||||
|
|
||||
.uni-combox__input { |
.uni-combox__input { |
||||
flex: 1; |
flex: 1; |
||||
font-size: 14px; |
font-size: 14px; |
||||
height: 22px; |
height: 26px; |
||||
line-height: 22px; |
line-height: 26px; |
||||
} |
} |
||||
|
|
||||
.uni-combox__input-plac { |
.uni-combox__input-plac { |
||||
font-size: 14px; |
font-size: 14px; |
||||
color: #999; |
color: #999; |
||||
} |
} |
||||
|
|
||||
.uni-combox__selector { |
.uni-combox__selector { |
||||
/* #ifndef APP-NVUE */ |
/* #ifndef APP-NVUE */ |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
/* #endif */ |
/* #endif */ |
||||
position: absolute; |
position: absolute; |
||||
top: calc(100% + 12px); |
top: calc(100% + 12px); |
||||
left: 0; |
left: 0; |
||||
width: 100%; |
width: 100%; |
||||
background-color: #FFFFFF; |
background-color: #ffffff; |
||||
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 0 rgba(0, 0, 0, 0.1); |
||||
z-index: 2; |
z-index: 2; |
||||
padding: 4px 0; |
padding: 4px 0; |
||||
} |
} |
||||
|
|
||||
.uni-combox__selector-scroll { |
.uni-combox__selector-scroll { |
||||
/* #ifndef APP-NVUE */ |
/* #ifndef APP-NVUE */ |
||||
max-height: 200px; |
max-height: 200px; |
||||
height: 200rpx; |
height: 200rpx; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
/* #endif */ |
/* #endif */ |
||||
} |
} |
||||
|
|
||||
.uni-combox__selector-empty, |
.uni-combox__selector-empty, |
||||
.uni-combox__selector-item { |
.uni-combox__selector-item { |
||||
/* #ifndef APP-NVUE */ |
/* #ifndef APP-NVUE */ |
||||
display: flex; |
display: flex; |
||||
cursor: pointer; |
cursor: pointer; |
||||
/* #endif */ |
/* #endif */ |
||||
line-height: 36px; |
line-height: 36px; |
||||
font-size: 14px; |
font-size: 60rpx; |
||||
text-align: center; |
text-align: center; |
||||
// border-bottom: solid 1px #DDDDDD; |
// border-bottom: solid 1px #DDDDDD; |
||||
padding: 0px 10px; |
padding: 0px 10px; |
||||
} |
} |
||||
|
|
||||
.uni-combox__selector-item:hover { |
.uni-combox__selector-item:hover { |
||||
background-color: #f9f9f9; |
background-color: #f9f9f9; |
||||
} |
} |
||||
|
|
||||
.uni-combox__selector-empty:last-child, |
.uni-combox__selector-empty:last-child, |
||||
.uni-combox__selector-item:last-child { |
.uni-combox__selector-item:last-child { |
||||
/* #ifndef APP-NVUE */ |
/* #ifndef APP-NVUE */ |
||||
border-bottom: none; |
border-bottom: none; |
||||
/* #endif */ |
/* #endif */ |
||||
} |
} |
||||
|
|
||||
// picker 弹出层通用的指示小三角 |
// picker 弹出层通用的指示小三角 |
||||
.uni-popper__arrow, |
.uni-popper__arrow, |
||||
.uni-popper__arrow::after { |
.uni-popper__arrow::after { |
||||
position: absolute; |
position: absolute; |
||||
display: block; |
display: block; |
||||
width: 0; |
width: 0; |
||||
height: 0; |
height: 0; |
||||
border-color: transparent; |
border-color: transparent; |
||||
border-style: solid; |
border-style: solid; |
||||
border-width: 6px; |
border-width: 6px; |
||||
} |
} |
||||
|
|
||||
.uni-popper__arrow { |
.uni-popper__arrow { |
||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); |
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); |
||||
top: -6px; |
top: -6px; |
||||
left: 10%; |
left: 10%; |
||||
margin-right: 3px; |
margin-right: 3px; |
||||
border-top-width: 0; |
border-top-width: 0; |
||||
border-bottom-color: #EBEEF5; |
border-bottom-color: #ebeef5; |
||||
} |
} |
||||
|
|
||||
.uni-popper__arrow::after { |
.uni-popper__arrow::after { |
||||
content: " "; |
content: ' '; |
||||
top: 1px; |
top: 1px; |
||||
margin-left: -6px; |
margin-left: -6px; |
||||
border-top-width: 0; |
border-top-width: 0; |
||||
border-bottom-color: #fff; |
border-bottom-color: #fff; |
||||
} |
} |
||||
|
|
||||
.uni-combox__no-border { |
.uni-combox__no-border { |
||||
border: none; |
border: none; |
||||
} |
} |
||||
|
.uni-input-input { |
||||
|
font-size: 60rpx; |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue