<template>
|
<view class="uni-select-cy" :style="{'z-index':zindex}">
|
<view class="uni-select-cy-select" :class="{ active: active }" @click.stop="handleSelect">
|
<!-- 禁用mask -->
|
<view class="uni-disabled" v-if="disabled"></view>
|
<!-- 清空 -->
|
<view class="close-icon close-postion" v-if="realValue.length && !active && !disabled && showClearIcon">
|
<text @click.stop="handleRemove(null)"></text>
|
</view>
|
<!-- 显示框 -->
|
<view class="uni-select-multiple" v-show="realValue.length">
|
<view class="uni-select-multiple-item" v-for="(item, index) in realValue" :key="index">
|
<view class="uni-select-multiple-item-row">
|
{{ item }}
|
</view>
|
<view class="close-icon" v-if="showValueClear"><text @click.stop="handleRemove(index)"></text>
|
</view>
|
</view>
|
</view>
|
<!-- 为空时的显示文案 -->
|
<view v-if="realValue.length == 0&&showplaceholder">{{ placeholder }}</view>
|
<!-- 禁用图标 -->
|
<view class="uni-select-cy-icon" :class="{ disabled: disabled }"><text></text></view>
|
</view>
|
<!-- 下拉选项 -->
|
<scroll-view class="uni-select-cy-options" :scroll-y="true" v-show="active" @scrolltolower="scrolltolower">
|
<template>
|
<view class="uni-select-cy-item" :class="{ active: realValue.includes(item[svalue]) }"
|
v-for="(item, index) in options" :key="index" @click.stop="handleChange(index, item)">
|
{{ item[slabel] }}
|
</view>
|
</template>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: 'select-cy',
|
props: {
|
//是否显示全部清空按钮
|
showClearIcon: {
|
type: Boolean,
|
default: false
|
},
|
//是否显示单个删除
|
showValueClear: {
|
type: Boolean,
|
default: true
|
},
|
zindex: {
|
type: Number,
|
default: 999
|
},
|
//禁用组件
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
options: {
|
type: Array,
|
default () {
|
return [];
|
}
|
},
|
value: {
|
type: Array,
|
default () {
|
return [];
|
}
|
},
|
placeholder: {
|
type: String,
|
default: '请选择'
|
},
|
showplaceholder: {
|
type: Boolean,
|
default: true
|
},
|
slabel: {
|
type: String,
|
default: 'label'
|
},
|
svalue: {
|
type: String,
|
default: 'value'
|
},
|
// 是否开启分页
|
isPaging: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
active: false, //组件是否激活，
|
changevalue: [], //搜索框同步
|
realValue: []
|
};
|
},
|
watch: {
|
value: {
|
deep: true,
|
handle(val) {
|
//初始化
|
this.init();
|
}
|
}
|
},
|
methods: {
|
close() {
|
this.active = false
|
},
|
init() {
|
if (this.value.length > 0) {
|
this.changevalue = this.options.map(item => {
|
this.value.forEach(i => {
|
if (item[this.svalue] == i[this.svalue]) {
|
return item;
|
}
|
});
|
});
|
this.realValue = this.value;
|
} else {
|
this.changevalue = [];
|
this.realValue = [];
|
}
|
},
|
scrolltolower() {
|
if (this.isPaging) {
|
this.$emit('scrolltolower')
|
}
|
|
},
|
//点击展示选项
|
handleSelect() {
|
if (this.disabled) return;
|
this.active = !this.active;
|
},
|
//移除数据
|
handleRemove(index) {
|
var delvalue = [];
|
for (var i in this.changevalue) {
|
delvalue.push({
|
attr: this.changevalue[i].attr,
|
Name: this.changevalue[i].Name
|
});
|
}
|
if (index === null) {
|
this.realValue = [];
|
this.changevalue = [];
|
} else {
|
this.realValue.splice(index, 1);
|
this.changevalue.splice(index, 1);
|
}
|
this.$emit('change', this.changevalue, this.realValue, delvalue);
|
},
|
//点击组件列
|
handleChange(index, item) {
|
let arrIndex = this.realValue.indexOf(item[this.svalue]);
|
if (arrIndex > -1) {
|
this.changevalue.splice(arrIndex, 1);
|
this.realValue.splice(arrIndex, 1);
|
} else {
|
this.changevalue.push(item);
|
this.realValue.push(item[this.svalue]);
|
}
|
console.log(this.realValue, 'this.realValue')
|
this.$emit('change', this.changevalue, this.realValue);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.uni-select-cy {
|
position: relative;
|
z-index: 999;
|
|
.uni-select-mask {
|
width: 100%;
|
height: 100%;
|
}
|
|
/* 删除按钮样式*/
|
.close-icon {
|
height: 100%;
|
width: 15px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
z-index: 3;
|
cursor: pointer;
|
|
text {
|
position: relative;
|
background: #fff;
|
width: 13px;
|
height: 13px;
|
border-radius: 50%;
|
border: 1px solid #bbb;
|
|
&::before,
|
&::after {
|
content: "";
|
position: absolute;
|
left: 20%;
|
top: 50%;
|
height: 1px;
|
width: 60%;
|
transform: rotate(45deg);
|
background-color: #bbb;
|
}
|
|
&::after {
|
transform: rotate(-45deg);
|
}
|
|
}
|
}
|
|
//所有清空的定位
|
.close-postion {
|
position: absolute;
|
right: 35px;
|
top: 0;
|
height: 100%;
|
width: 15px;
|
}
|
|
/* 多选盒子 */
|
.uni-select-multiple {
|
overflow-x: auto;
|
display: flex;
|
flex: 1;
|
width: 0;
|
flex-wrap: nowrap;
|
|
.uni-select-multiple-item {
|
background: #bbb;
|
margin-right: 5rpx;
|
padding: 2rpx 4rpx;
|
border-radius: 4rpx;
|
color: #fff;
|
display: flex;
|
flex: 0 0 140rpx;
|
|
.uni-select-multiple-item-row {
|
flex: 1;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
}
|
|
// select部分
|
.uni-select-cy-select {
|
user-select: none;
|
position: relative;
|
z-index: 3;
|
height: 36px;
|
padding: 0 30px 0 10px;
|
box-sizing: border-box;
|
border-radius: 4px;
|
border: 1px solid rgb(229, 229, 229);
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
color: #999;
|
flex-wrap: nowrap;
|
|
.uni-disabled {
|
position: absolute;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 19;
|
cursor: no-drop;
|
background: rgba(255, 255, 255, .5);
|
}
|
|
|
.uni-select-cy-input {
|
font-size: 14px;
|
color: #999;
|
display: block;
|
width: 96%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
line-height: 30px;
|
box-sizing: border-box;
|
|
&.active {
|
color: #333;
|
}
|
|
}
|
|
.uni-select-cy-icon {
|
cursor: pointer;
|
position: absolute;
|
right: 0;
|
top: 0;
|
height: 100%;
|
width: 30px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
&::before {
|
content: "";
|
width: 1px;
|
height: 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
background-color: #e5e5e5;
|
}
|
|
text {
|
display: block;
|
width: 0;
|
height: 0;
|
border-width: 12rpx 12rpx 0;
|
border-style: solid;
|
border-color: #bbb transparent transparent;
|
transition: .3s;
|
}
|
|
&.disabled {
|
cursor: no-drop;
|
|
text {
|
width: 20rpx;
|
height: 20rpx;
|
border: 2px solid #ff0000;
|
border-radius: 50%;
|
transition: .3s;
|
position: relative;
|
z-index: 999;
|
|
&::after {
|
content: "";
|
position: absolute;
|
top: 50%;
|
left: 0;
|
width: 100%;
|
height: 2px;
|
margin-top: -1px;
|
background-color: #ff0000;
|
transform: rotate(45deg);
|
|
}
|
}
|
}
|
}
|
|
&.active .uni-select-cy-icon {
|
text {
|
transform: rotate(180deg);
|
}
|
}
|
}
|
|
// options部分
|
.uni-select-cy-options {
|
user-select: none;
|
position: absolute;
|
top: calc(100% + 5px);
|
left: 0;
|
width: 100%;
|
height: 500rpx;
|
border-radius: 4px;
|
border: 1px solid rgb(229, 229, 229);
|
background: #fff;
|
padding: 5px 0;
|
box-sizing: border-box;
|
z-index: 9;
|
|
.uni-select-cy-item {
|
padding: 0 10px;
|
box-sizing: border-box;
|
cursor: pointer;
|
line-height: 2.5;
|
transition: .3s;
|
font-size: 14px;
|
|
&.active {
|
color: #409eff;
|
|
background-color: #f5f7fa;
|
&:hover {
|
color: #409eff;
|
background-color: #f5f7fa
|
}
|
}
|
|
&:hover {
|
background-color: #f5f5f5;
|
}
|
}
|
}
|
}
|
</style>
|
