<template>
<view style="width: 500px;">
<view v-if="type === 'select'" class="pull__down__select">
<u-input v-model="value" :type="type" :border="true" @click="handerInput" :custom-style="styleInputL" :selectOpen="selectOpen"
height="30.21" :placeholder="placeholder" />
<view :animation="animationData" v-show="show" class="pull__down__panel" :class="show ? 'pull__down__panel__active' : ''">
<scroll-view scroll-y="true" class="scroll-Y">
<view style="display: flex; flex-wrap: wrap; align-items: center; margin-left: 10.98rpx;">
<view v-for="(item,index) in pullDownList" :key="index" class="pull__down__panel__item" @tap="ahnderItem(item,index)">
<view class="pull__down__panel__checkbox__box">
<image v-if="!item.checkbox" class="pull__down__panel__checkbox" :src="checkboxNo"></image>
<image v-else class="pull__down__panel__checkbox" :src="checkboxYes"></image>
<view class="pull__down__panel__text">{{item.text}}</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view v-else class="pull__down__text">
<u-input class="pull__down__input" id="pull__down__input" v-model="value2" :type="type" :border="true" height="30.21"
:placeholder="placeholder" @blur="inputBlur" @focus="inputFocus" :imgRightSrc="imgRightSrc" @handerRightImg="handerRightImg" />
<view v-show="coverShow" class="cover-box">
<view v-for="(item,index) in coveData" :key="index" class="cove-item">{{item}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value: '',
value2: '',
show: false,
coverShow: false,
border: false,
styleInputL: {
'min-height': 'initial',
height: '30.21rpx',
},
selectOpen: false,
coveData: [],
animationData: {},
textIdList: [],
flag: true
}
},
props: {
pullDownList: {
type: Array,
default: function() {
return
},
},
type: {
type: String,
default: 'select',
},
externalShow: {
type: Boolean,
default: true,
},
imgRightSrc: {
type: String,
default: '',
},
placeholder: {
type: String,
default: '',
},
checkboxNo: {
type: String,
default: ''
},
checkboxYes: {
type: String,
default: ''
},
initText: {
type: String,
default: ''
}
},
watch: {
externalShow: function(value) {
if (!value) {
this.show = false
}
},
pullDownList: function(value) {
if(this.flag) {
value.forEach( item => {
if(item.checkbox) {
this.textIdList.push(item)
this.value = this.value + item.text + ' '
}
})
this.flag = false
}
},
initText: function(value) {
if(value !== '') {
this.coveData = value.replace(/\s+/g, '').split(',')
setTimeout(() => {
this.coverShow = true
}, 100)
}
}
},
mounted() {
},
methods: {
actionSheetCallback(index) {
this.value = this.actionSheetList[index].text
},
handerInput() {
let animation = uni.createAnimation({
duration: 400
})
this.selectOpen = !this.selectOpen
if (!this.show) {
animation.height(uni.upx2px(128)).step()
} else {
animation.height(0).step()
}
this.animationData = animation.export()
if (!this.show) {
this.show = true
} else {
setTimeout(() => {
this.show = false
}, 400)
}
},
ahnderItem(item, index) {
if (this.value.indexOf(item.text) === -1) {
this.value = this.value + item.text + ' '
} else {
this.value = this.value.replace(item.text + ' ', '')
}
let flag = true
this.textIdList.forEach((item1, index) => {
if (item1.id === item.id) {
this.textIdList.splice(index,1)
flag = false
}
})
if (flag) {
this.textIdList.push(item)
}
this.pullDownList[index].checkbox = !this.pullDownList[index].checkbox
this.$emit('handerCheckbox', {
item: this.textIdList
})
},
inputBlur() {
if (this.value2) {
const coveData = this.value2.replace(/\s+/g, '').split(',')
coveData.forEach((item, index) => {
if (!item) coveData.splice(index)
})
this.coveData = coveData
this.value2 = ''
setTimeout(() => {
this.coverShow = true
}, 100)
this.$emit('coveBlur', {
coveData,
})
}
},
inputFocus() {
if (this.coveData.length > 0) {
this.value2 = this.coveData.join(',')
}
this.coverShow = false
},
handerRightImg() {
this.$emit('handerRightImg')
},
},
}
</script>
<style lang="scss" scoped>
.pull__down__select {
position: relative;
width: 100%;
height: 27.47rpx;
/deep/ .u-flex{
top: 30%;
}
/deep/ .u-input {
position: relative;
width: 100%;
padding-left: 34.04rpx;
/deep/ .u-input__input{
position: relative;
top: 3.84rpx;
left: 3.84rpx;
}
}
/deep/ .uni-input-placeholder {
margin-left: 10px;
}
/deep/ .uni-input-input {
margin-left: 10px;
}
.pull__down__panel {
margin-top: 2px;
box-sizing: border-box;
width: 100%;
height: 0;
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1), 0px 9.61rpx 13.73rpx 0px rgba(0, 0, 0, 0.25);
border-radius: 3.84rpx;
border: 1px solid rgba(135, 135, 135, 1);
z-index: 9999;
.scroll-Y {
height: 100%;
/deep/ .uni-scroll-view {
z-index: 9999;
background: rgba(255, 255, 255, 1) !important;
.uni-scroll-view-content {
.pull__down__panel__item {
margin-top: 16.48rpx;
width: 124.72rpx;
height: 18.13rpx;
font-size: 14.83rpx;
font-weight: bold;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
height: 31.31rpx;
display: flex;
.pull__down__panel__checkbox__box {
display: flex;
.pull__down__panel__checkbox {
width: 18.13rpx;
height: 18.13rpx;
}
.pull__down__panel__text {
margin-left: 5.49rpx;
font-size: 11.53rpx;
color:rgba(0,0,0,1);
font-family:SourceHanSansCN-Medium,SourceHanSansCN;
}
}
}
}
}
}
}
.fade-enter-active,
.fade-leave-active {
transition: height 0.4s;
}
.fade-enter,
.fade-leave-to {
height: 0;
}
}
.pull__down__text {
position: relative;
height: 27.47rpx;
.pull__down__input {
/deep/ .u-input__input{
position: relative;
width: 100%;
padding-left: 34.04rpx;
/deep/ .u-input__input{
position: relative;
top: 3.84rpx;
left: 3.84rpx;
}
}
}
.cover-box {
position: absolute;
top: 5.04rpx;
height: 100%;
bottom: 6.04rpx;
left: 0;
display: flex;
align-items: center;
.cove-item {
padding: 3.84rpx 10.98rpx;
background: rgba(235, 235, 235, 1);
border-radius: 10.43rpx;
font-size: 10.98rpx;
font-weight: bold;
margin-left: 10.98rpx;
}
.cove-item:nth-child(1) {
margin-left: 8.24rpx;
}
}
}
</style>
