You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
363 lines
7.2 KiB
363 lines
7.2 KiB
<template> |
|
<view class="select_wrap" :style="{'width': size +'rpx'}"> |
|
<view :class="['select_input',isClick?'select_input_select':'']" ref="select-input"> |
|
<view class="input_info" @click="openSelect"> |
|
<input :focus="isClick" @input="selectData" :value="value" type="text" :readonly="readonly" :disabled="readonly" autocomplete="off" :placeholder="placeholder" class="text_tips"> |
|
</view> |
|
<view class="icon_arrow" @click="sjpd"> |
|
<view v-if="(!value&&!clearable) || (value&&!clearable) || (!value&&clearable) && !filterable" :class="['arrow',show?'arrow_down':'arrow_up']" ></view> |
|
<view class="arrow-clear" v-if="value&&clearable"> |
|
<image src="./cha.png"></image> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="select_modal_con" v-if="show" |
|
@touchmove.stop.prevent="() => {}"> |
|
<view class="select_modal"> |
|
<view class="select_content" ref="select_content"> |
|
<view v-for="(item, index) in showData" :key="index" class="select_content_li" |
|
:class="{'selected': value == item[valueType.value]}" @click="change(item)">{{item.label}}</view> |
|
|
|
<view class="select_content_li" v-if="!showData.length"> |
|
{{noDataText}} |
|
</view> |
|
</view> |
|
<!-- <scroll-view scroll-y="true" class="scrollYcons"> |
|
|
|
</scroll-view> --> |
|
</view> |
|
<view class="cons_arrow"></view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
props: { |
|
data: { |
|
type: Array, |
|
default: () => [ |
|
{ |
|
label:'label', |
|
value:'value' |
|
} |
|
] |
|
}, |
|
valueType: { |
|
type: Object, |
|
default: { |
|
label:'label', |
|
value:'value' |
|
} |
|
}, |
|
value: { |
|
type: String, |
|
default: '全部' |
|
}, |
|
clearable:{ |
|
type: Boolean, |
|
default: false |
|
}, |
|
filterable:{ |
|
type: Boolean, |
|
default: false |
|
}, |
|
searchType:{ |
|
type: Number, |
|
default: 1 |
|
}, |
|
placeholder:{ |
|
type: String, |
|
default: '请选择' |
|
}, |
|
noDataText:{ |
|
type: String, |
|
default: '暂无数据' |
|
}, |
|
arrLeft:{ |
|
type: Number, |
|
default: 20 |
|
}, |
|
size:{ |
|
type: Number, |
|
default: 240 |
|
} |
|
}, |
|
data() { |
|
return { |
|
show: false, |
|
readonly:true, |
|
isClick:false, |
|
totalArr:[], |
|
showData:[] |
|
} |
|
}, |
|
watch:{ |
|
'filterable':{ |
|
immediate:true, |
|
deep:true, |
|
handler(news){ |
|
this.readonly = !news |
|
} |
|
}, |
|
'data':{ |
|
immediate:true, |
|
deep:true, |
|
handler(news){ |
|
this.showData = news |
|
this.totalArr = news |
|
} |
|
}, |
|
}, |
|
created() {}, |
|
methods: { |
|
sjpd(){ |
|
if(this.value){ |
|
this.clearItem() |
|
}else{ |
|
this.openSelect() |
|
} |
|
}, |
|
openSelect(){ |
|
// if(!this.filterable){ |
|
// this.show=!this.show |
|
// } |
|
this.show=!this.show |
|
this.isClick = !this.isClick |
|
}, |
|
change(item) { |
|
if (this.value != item[this.valueType]) { |
|
this.$emit('input', item[this.valueType.value]) |
|
this.$emit('change', item[this.valueType.value]) |
|
} |
|
this.show = false |
|
this.isClick = false |
|
this.showData = this.data |
|
}, |
|
clearItem(){ |
|
if(this.clearable){ |
|
this.$emit('input', '') |
|
this.$emit('change', '') |
|
} |
|
|
|
}, |
|
selectData(e){ |
|
let sel = e.detail.value |
|
if(sel){ |
|
let arrCons = [] |
|
let selVal = [] |
|
this.data.forEach(item=>{ |
|
arrCons.push(item) |
|
}) |
|
arrCons.forEach((item)=>{ |
|
console.log(item,sel,'arrCons---',item.label.indexOf(sel)) |
|
if(this.searchType==1){ |
|
if(item[this.valueType.label].indexOf(sel)!=-1){ |
|
selVal.push(item) |
|
} |
|
}else{ |
|
if(item[this.valueType.label]==sel){ |
|
selVal.push(item) |
|
} |
|
} |
|
|
|
}) |
|
this.show = true |
|
this.showData = selVal |
|
}else{ |
|
this.showData = this.data |
|
} |
|
} |
|
}, |
|
beforeDestroy() {} |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.select_wrap { |
|
width: 240upx; |
|
height: 64upx; |
|
box-sizing: border-box; |
|
display: inline-block; |
|
position: relative; |
|
|
|
.select_input { |
|
-webkit-appearance: none; |
|
background-color: #F5F5F6; |
|
background-image: none; |
|
border-radius: 10upx; |
|
border: 1upx solid #EEEEEE; |
|
box-sizing: border-box; |
|
color: #092C4D; |
|
// display: inline-block; |
|
font-size: inherit; |
|
display: flex; |
|
align-items: center; |
|
outline: none; |
|
padding: 0 10upx; |
|
height: 64upx; |
|
box-sizing: border-box; |
|
transition: border-color .2s cubic-bezier(.645, .045, .355, 1); |
|
width: 100%; |
|
padding-right: 10upx; |
|
|
|
.input_info { |
|
font-size: 28upx; |
|
width: 100%; |
|
height: 100%; |
|
margin-left: 10upx; |
|
.text_tips{ |
|
height: 100%; |
|
color: #092C4D; |
|
font-size: 28upx; |
|
} |
|
} |
|
|
|
.icon_arrow { |
|
position: absolute; |
|
width:50upx; |
|
height: 64upx; |
|
right: 0; |
|
top: 0; |
|
text-align: center; |
|
color: #c0c4cc; |
|
cursor: pointer; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
z-index: 999; |
|
.arrow { |
|
width: 18upx; |
|
height: 18upx; |
|
background-color: transparent; |
|
/* 模块背景为透明 */ |
|
border-color: #c0c4cc; |
|
border-style: solid; |
|
border-width: 1upx 1upx 0 0; |
|
box-sizing: border-box; |
|
transition: all .3s; |
|
box-sizing: border-box; |
|
/*箭头方向可以自由切换角度*/ |
|
} |
|
.arrow_down{ |
|
transform: rotate(-45deg); |
|
margin-top: 5upx; |
|
} |
|
.arrow_up{ |
|
transform: rotate(135deg); |
|
margin-top: -5upx; |
|
} |
|
.arrow-clear{ |
|
width: 27upx; |
|
height: 27upx; |
|
border: 1upx solid #c0c4cc; |
|
color: #c0c4cc; |
|
border-radius: 50%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
font-size: 26upx; |
|
>image{ |
|
width: 21upx; |
|
height: 21upx; |
|
} |
|
} |
|
} |
|
} |
|
.select_input_select{ |
|
border-color: #D3832A80; |
|
} |
|
} |
|
|
|
.select_modal_con { |
|
width: 100%; |
|
transform-origin: center top; |
|
z-index: 2062; |
|
position: absolute; |
|
top: 40upx; |
|
left: 0; |
|
border: 1upx solid #e4e7ed; |
|
border-radius: 4upx; |
|
background-color: #fff; |
|
box-shadow: 0 2upx 12upx 0 rgba(0, 0, 0, .1); |
|
box-sizing: border-box; |
|
margin-top: 40upx; |
|
|
|
.cons_arrow { |
|
position: absolute; |
|
display: block; |
|
width: 0; |
|
height: 0; |
|
border-color: transparent; |
|
border-style: solid; |
|
top: -6upx; |
|
left: 10%; |
|
margin-right: 3upx; |
|
border-top-width: 0; |
|
border-bottom-color: #ebeef5; |
|
|
|
} |
|
|
|
.cons_arrow:after { |
|
content: " "; |
|
border-width: 6upx; |
|
position: absolute; |
|
display: block; |
|
width: 0; |
|
height: 0; |
|
border-color: transparent; |
|
border-style: solid; |
|
// top: 5upx; |
|
margin-left: -6upx; |
|
border-top-width: 0; |
|
border-bottom-color: #fff; |
|
} |
|
} |
|
|
|
.select_modal { |
|
overflow: scroll; |
|
// height: 160upx; |
|
.select_content{ |
|
list-style: none; |
|
padding: 12upx 0; |
|
margin: 0; |
|
box-sizing: border-box; |
|
.select_content_li { |
|
font-size: 28upx; |
|
padding: 8upx 18upx; |
|
position: relative; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
color: #606266; |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-start; |
|
box-sizing: border-box; |
|
cursor: pointer; |
|
&.selected { |
|
color: #D3832A90; |
|
font-weight: 700; |
|
background-color: #f5f7fa; |
|
} |
|
} |
|
|
|
.select_content_li:hover { |
|
background-color: #f5f7fa; |
|
} |
|
} |
|
|
|
|
|
|
|
} |
|
|
|
// .select_content { |
|
// background-color: #fff; |
|
|
|
// .select_content_li { |
|
// padding: 12upx; |
|
|
|
|
|
// } |
|
// } |
|
</style>
|
|
|