382 lines
9.2 KiB
Vue
382 lines
9.2 KiB
Vue
<template>
|
||
<view class='layout-column'>
|
||
<view id="parent" style="width:fit-content;">
|
||
<slot></slot>
|
||
</view>
|
||
<view
|
||
:style="'width:'+slotW+';max-height: '+getListContentHei+'rpx;z-index: 9999;position: absolute;margin-top:'+slotH+';'+(isShow ? '' : 'display:none;')"
|
||
:class="(dataList.length > 0 ? 'data-box-shadow ' : 'data-box ') + animate">
|
||
<block v-if="dataList.length > 0">
|
||
<view class="data-box-scroll"
|
||
:style="'height:'+dataList.length*(itemHeight-1)+'rpx;max-height: '+max*(itemHeight-1)+'rpx;'">
|
||
<text v-for="(item,index) in dataList" :key="item[identifier]"
|
||
:class="'layout-row less-center list-item '+(item.enable === false ? '' : 'active')"
|
||
:style="'color:'+(item.enable === false ? '#dedede' : (checkedIndex.indexOf(index) >= 0 ? itemSelectColor : itemColor))+';font-size:'+itemFontsize+'rpx;'"
|
||
@click="handleListItem(index, item)">{{item[showKey]}}</text>
|
||
</view>
|
||
<view class="layout-row opera-btns less-center" v-if="mode == 'multiple'">
|
||
<view class="opera-cancel layout-row center" @click='handelCancel'>取消</view>
|
||
<view class="opera-sure layout-row center" @click='handelSure'>确定</view>
|
||
</view>
|
||
</block>
|
||
<view v-else :style="'width:'+slotW+';'" class='status-text'>暂无数据</view>
|
||
</view>
|
||
<view class="mask" v-show="isShow" @click="handelCancel"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "down-select",
|
||
props: {
|
||
//要显示的字段
|
||
showKey: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
mode: {
|
||
type: String,
|
||
default: 'single', //multiple
|
||
// default: 'multiple'
|
||
},
|
||
dataList: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
//选中的列表，用作显示列表是展示已选中项
|
||
checkedDataList: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
//最多展示几项后开始滑动
|
||
max: {
|
||
type: Number,
|
||
default: 4
|
||
},
|
||
//数据项每个item高度rpx
|
||
itemHeight: {
|
||
type: Number,
|
||
default: 80
|
||
},
|
||
//唯一标识符字段，用来比对选中项和维持v-for列表中的key,不填此项无选中效果
|
||
identifier: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
itemSelectColor: {
|
||
type: String,
|
||
default: '#00aaff'
|
||
},
|
||
itemColor: {
|
||
type: String,
|
||
default: 'black'
|
||
},
|
||
itemFontsize: {
|
||
type: Number,
|
||
default: 30
|
||
}
|
||
},
|
||
computed: {
|
||
getListContentHei() {
|
||
let len = this.dataList.length
|
||
let signleH = len < this.max ? this.itemHeight * len : this.itemHeight * this.max
|
||
if (this.mode == 'single') {
|
||
return len <= 0 ? this.itemHeight : signleH
|
||
} else {
|
||
return len <= 0 ? this.itemHeight : (signleH + this.itemHeight)
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
dataList: {
|
||
handler: function(newVal, oldVal) {
|
||
if (this.checkedDataList.length >= 0 && this.identifier) {
|
||
this.checkedIndex = []
|
||
this.checkedDataList.forEach(ele => {
|
||
let index = newVal.findIndex(ele1 => ele[this.identifier] === ele1[this
|
||
.identifier])
|
||
if (index >= 0) {
|
||
this.checkedIndex.push(index)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
immediate: true, // 组件创建时立即触发
|
||
deep: true // 对象内部属性变化时也触发
|
||
},
|
||
checkedDataList: {
|
||
handler: function(newVal, oldVal) {
|
||
if (newVal.length >= 0 && this.identifier) {
|
||
this.checkedIndex = []
|
||
newVal.forEach(ele => {
|
||
let index = this.dataList.findIndex(ele1 => ele[this.identifier] === ele1[this
|
||
.identifier])
|
||
if (index >= 0) {
|
||
this.checkedIndex.push(index)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
immediate: true, // 组件创建时立即触发
|
||
deep: true // 对象内部属性变化时也触发
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
uni.createSelectorQuery().in(this).select('#parent').boundingClientRect(res => {
|
||
if (res.width) {
|
||
this.slotW = `${res.width}px`
|
||
this.slotH = `${res.height+5}px`
|
||
}
|
||
}).exec()
|
||
})
|
||
},
|
||
data() {
|
||
return {
|
||
slotW: '0px',
|
||
slotH: '0px',
|
||
isShow: false,
|
||
checkedIndex: [],
|
||
animate: '',
|
||
//传进来选中项，后又改成未选中并确认，多选模式生效
|
||
checkedDels: []
|
||
};
|
||
},
|
||
methods: {
|
||
open() {
|
||
if (this.checkedDataList.length >= 0 && this.identifier) {
|
||
this.checkedIndex = []
|
||
this.checkedDataList.forEach(ele => {
|
||
let index = this.dataList.findIndex(ele1 => ele[this.identifier] === ele1[this
|
||
.identifier])
|
||
if (index >= 0) {
|
||
this.checkedIndex.push(index)
|
||
}
|
||
})
|
||
}
|
||
this.isShow = true
|
||
this.animate = 'show-animate'
|
||
},
|
||
close() {
|
||
this.animate = 'hide-animate'
|
||
this.checkedIndex = []
|
||
this.checkedDels = []
|
||
this.isShow = false
|
||
},
|
||
handleListItem(index, obj) {
|
||
if(obj.enable === false){
|
||
return
|
||
}
|
||
if (this.mode === 'single') {
|
||
this.checkedIndex = []
|
||
this.checkedIndex.push(index)
|
||
this.handelSure()
|
||
} else {
|
||
let sindex = this.checkedIndex.indexOf(index)
|
||
if (sindex >= 0) {
|
||
if (this.identifier) {
|
||
//判断未选中的项在传进来的已选项中是否存在
|
||
let contain = this.checkedDataList.filter(ele => ele[this.identifier] === this.dataList[index][
|
||
this.identifier
|
||
])
|
||
if (contain.length > 0) {
|
||
//传进来的已选项中是否存在选择为未选中的内容
|
||
let contain1 = this.checkedDels.filter(ele => ele[this.identifier] === contain[0][this
|
||
.identifier
|
||
])
|
||
if (contain1.length <= 0) {
|
||
this.checkedDels.push(contain[0])
|
||
}
|
||
}
|
||
}
|
||
this.checkedIndex.splice(sindex, 1);
|
||
} else {
|
||
if (this.identifier) {
|
||
let contain2 = this.checkedDels.filter(ele => ele[this.identifier] === this.dataList[index][
|
||
this.identifier
|
||
])
|
||
if (contain2.length > 0) {
|
||
let tempIndex = this.checkedDels.findIndex(ele => ele[this.identifier] === this.dataList[
|
||
index][this.identifier])
|
||
if (tempIndex >= 0) {
|
||
this.checkedDels.splice(tempIndex, 1)
|
||
}
|
||
}
|
||
}
|
||
this.checkedIndex.push(index)
|
||
}
|
||
}
|
||
},
|
||
handelCancel() {
|
||
this.close()
|
||
this.$emit('cancelDimss', '')
|
||
},
|
||
handelSure() {
|
||
let results = []
|
||
if (this.checkedIndex.length <= 0) {
|
||
uni.showToast({
|
||
title: '请选择至少一项',
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
|
||
this.checkedIndex.forEach(ele => {
|
||
if (this.dataList[ele]) {
|
||
results.push(this.dataList[ele])
|
||
}
|
||
})
|
||
//将本次选中结果清除
|
||
this.checkedIndex = []
|
||
this.$emit('resultBack', results, this.checkedDels)
|
||
this.close()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.active {}
|
||
|
||
.active:active {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.layout-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.layout-column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 整体方向居中 */
|
||
.center {
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 主轴方向居中 */
|
||
.main-center {
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 侧轴方向居中 */
|
||
.less-center {
|
||
align-items: center;
|
||
}
|
||
|
||
.data-box-scroll {
|
||
width: 100%;
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
.data-box-scroll::-webkit-scrollbar {
|
||
display: none
|
||
}
|
||
|
||
.data-box {
|
||
background: white;
|
||
border-radius: 8rpx;
|
||
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
|
||
z-index: 9999;
|
||
}
|
||
|
||
.data-box-shadow {
|
||
background: white;
|
||
border-radius: 8rpx;
|
||
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
|
||
z-index: 9999;
|
||
}
|
||
|
||
.list-item {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
margin-left: 20rpx;
|
||
margin-right: 20rpx;
|
||
border-bottom: 1rpx solid #D8DFEC;
|
||
text-align: right;
|
||
}
|
||
|
||
.opera-btns {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.opera-cancel {
|
||
width: 100rpx;
|
||
height: 50rpx;
|
||
background-color: white;
|
||
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
|
||
border-radius: 5rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.opera-sure {
|
||
width: 100rpx;
|
||
height: 50rpx;
|
||
background-color: #58a2e4;
|
||
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
|
||
border-radius: 5rpx;
|
||
font-size: 26rpx;
|
||
color: white;
|
||
margin-right: 30rpx;
|
||
margin-left: 30rpx;
|
||
}
|
||
|
||
.status-text {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #c2c2c2;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.mask {
|
||
position: fixed;
|
||
background: transparent;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
}
|
||
|
||
.show-animate {
|
||
animation-name: open;
|
||
animation-duration: 1s;
|
||
animation-iteration-count: 1;
|
||
}
|
||
|
||
@keyframes open {
|
||
0% {
|
||
height: 0rpx;
|
||
}
|
||
|
||
100% {
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.hide-animate {
|
||
animation-name: close;
|
||
animation-duration: 1s;
|
||
animation-iteration-count: 1;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
@keyframes close {
|
||
0% {
|
||
height: 100%;
|
||
}
|
||
|
||
100% {
|
||
height: 0rpx;
|
||
}
|
||
}
|
||
</style>
|