|
@ -1,24 +1,20 @@ |
|
|
<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"/> |
|
|
|
|
|
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector"> |
|
|
|
|
|
</uni-icons> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
<view class="uni-combox__selector" v-if="showSelector"> |
|
|
<view class="uni-combox__selector" v-if="showSelector"> |
|
|
<view class="uni-popper__arrow"></view> |
|
|
<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"> |
|
|
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0"> |
|
|
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0"> |
|
|
<text>{{emptyTips}}</text> |
|
|
<text>{{ emptyTips }}</text> |
|
|
</view> |
|
|
</view> |
|
|
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" |
|
|
<view class="uni-combox__selector-item" v-for="(item, index) in filterCandidates" :key="index" @click="onSelectorClick(index)"> |
|
|
@click="onSelectorClick(index)"> |
|
|
<text>{{ item }}</text> |
|
|
<text>{{item}}</text> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</scroll-view> |
|
|
</scroll-view> |
|
|
</view> |
|
|
</view> |
|
@ -26,7 +22,7 @@ |
|
|
</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 |
|
@ -37,9 +33,9 @@ |
|
|
* @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, |
|
@ -53,7 +49,7 @@ |
|
|
type: String, |
|
|
type: String, |
|
|
default: 'auto' |
|
|
default: 'auto' |
|
|
}, |
|
|
}, |
|
|
inputWidth:{ |
|
|
inputWidth: { |
|
|
type: String, |
|
|
type: String, |
|
|
default: 'auto' |
|
|
default: 'auto' |
|
|
}, |
|
|
}, |
|
@ -63,7 +59,7 @@ |
|
|
}, |
|
|
}, |
|
|
candidates: { |
|
|
candidates: { |
|
|
type: Array, |
|
|
type: Array, |
|
|
default () { |
|
|
default() { |
|
|
return [] |
|
|
return [] |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
@ -81,7 +77,7 @@ |
|
|
modelValue: { |
|
|
modelValue: { |
|
|
type: [String, Number], |
|
|
type: [String, Number], |
|
|
default: '' |
|
|
default: '' |
|
|
}, |
|
|
} |
|
|
// #endif |
|
|
// #endif |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
@ -93,15 +89,15 @@ |
|
|
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}` |
|
@ -110,7 +106,7 @@ |
|
|
// 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 |
|
@ -131,7 +127,7 @@ |
|
|
this.inputVal = newVal |
|
|
this.inputVal = newVal |
|
|
}, |
|
|
}, |
|
|
immediate: true |
|
|
immediate: true |
|
|
}, |
|
|
} |
|
|
// #endif |
|
|
// #endif |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
@ -158,21 +154,20 @@ |
|
|
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; |
|
@ -183,16 +178,16 @@ |
|
|
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; |
|
@ -200,21 +195,21 @@ |
|
|
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 */ |
|
@ -222,49 +217,49 @@ |
|
|
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; |
|
@ -272,26 +267,29 @@ |
|
|
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> |
|
|