483 lines
23 KiB
Vue
483 lines
23 KiB
Vue
<template>
|
||
<view class="uni-select-lay" :style="{'z-index':zindex}">
|
||
<input type="text" :name="name" v-model="value" class="uni-select-input" >
|
||
<view class="uni-select-lay-select" :class="{'active':active}">
|
||
<!-- 禁用mask -->
|
||
<view class="uni-disabled" v-if="disabled"></view>
|
||
<!-- 禁用mask -->
|
||
<!-- 清空 -->
|
||
<view class="uni-select-lay-input-close" v-if="changevalue!=''&&this.active">
|
||
<text @click="removevalue"></text>
|
||
</view>
|
||
<!-- 清空 -->
|
||
<input type="text" class="uni-select-lay-input" :class="{active:changevalue!=''&&changevalue!=placeholder}"
|
||
v-model="changevalue" :disabled="disabled" :placeholder="placeholder" @focus="unifocus"
|
||
@input="intchange">
|
||
<view class="uni-select-lay-icon" @click="select"><text></text></view>
|
||
</view>
|
||
<!-- 下拉框展示内容 :单选-->
|
||
<view v-if="!multiple" class="uni-select-lay-options" :class="optionsDirection === 'top' ? 'uni-select-lay-options-top' :'uni-select-lay-options-bottom' " v-show="active">
|
||
<!-- 加载中 -->
|
||
<template v-if="loading">
|
||
<view class="uni-select-lay-item" style="color: #777777;">
|
||
<image
|
||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlBMzU3OTlEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlBMzU3OUFEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUEzNTc5N0Q5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUEzNTc5OEQ5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+ALSwAAA6CSURBVHja1FsLkFZV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"
|
||
mode="widthFix" style="width: 16px;height: 16px;margin-right: 5px;" class=".rotating__animation">
|
||
</image>
|
||
<text>{{loadingText}}</text>
|
||
</view>
|
||
</template>
|
||
<!-- 加载中 -->
|
||
<!-- 未输入是显示内容 -->
|
||
<template v-else-if="!changes">
|
||
<view class="uni-select-lay-item" :class="{active:value==''}" @click="selectitem(-1,null)">
|
||
{{placeholder}}
|
||
</view>
|
||
<view class="uni-select-lay-item" :class="{active:value==item[svalue]}" v-for="(item,index) in options"
|
||
:key="index" @click="selectitem(index,item)">{{item[slabel]}}</view>
|
||
</template>
|
||
<!-- 未输入是显示内容 -->
|
||
<!-- 搜索时显示内容 -->
|
||
<template v-else>
|
||
<template v-if="vlist.length>0 ">
|
||
<view class="uni-select-lay-item" :class="{active:value==item[svalue]}"
|
||
v-for="(item,index) in vlist" :key="index" @click="selectitem(index,item)">{{item[slabel]}}
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="nosearch">无匹配内容！</view>
|
||
</template>
|
||
</template>
|
||
<!-- 搜索时显示内容 -->
|
||
</view>
|
||
<!-- 下拉框展示内容 :单选 -->
|
||
<!-- 下拉展示内容:多选 -->
|
||
<!-- <view v-else class="uni-select-lay-options" :class="optionsDirection === 'top' ? 'uni-select-lay-options-top' :'uni-select-lay-options-bottom' " v-show="active"> -->
|
||
<!-- 加载中 -->
|
||
<!-- <template v-if="loading">
|
||
<view class="uni-select-lay-item" style="color: #777777;">
|
||
<image
|
||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlBMzU3OTlEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlBMzU3OUFEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUEzNTc5N0Q5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUEzNTc5OEQ5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+ALSwAAA6CSURBVHja1FsLkFZV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"
|
||
mode="widthFix" style="width: 16px;height: 16px;margin-right: 5px;" class=".rotating__animation">
|
||
</image>
|
||
<text>{{loadingText}}</text>
|
||
</view>
|
||
</template> -->
|
||
<!-- 加载中 -->
|
||
<!-- 默认显示内容 -->
|
||
<!-- <template v-else>
|
||
<view class="uni-select-lay-item" :class="{active:value==''}" @click="selectitem(-1,null)">
|
||
{{placeholder}}
|
||
</view>
|
||
<view class="uni-select-lay-item" :class="{active:value==item[svalue]}" v-for="(item,index) in options"
|
||
:key="index">
|
||
<checkbox></checkbox>
|
||
{{item[slabel]}}
|
||
</view>
|
||
</template> -->
|
||
<!-- </view> -->
|
||
<!-- 下拉展示内容:多选 -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* Select 下拉选择插件
|
||
* @description 简单的下拉选择插件
|
||
* @tutorial url https://ext.dcloud.net.cn/plugin?id=5627
|
||
* @property {Boolean} disabled =[true | false] 是否禁用(默认false)
|
||
* @property {Number} zindex 层级，默认999，防止多个组件一起使用是下拉栏穿透
|
||
* @property {Array} options 数据列表
|
||
* @property {String} optionsDirection 数据列表的位置（默认值bottom）
|
||
* @value top 数据列表位于上方
|
||
* @value bottom 数据列表位于下方
|
||
* @property {Boolean} loading 是否加载中
|
||
* @property {String} loadingText 加载时提示文字
|
||
* @property {Boolean} multiple 是否多选（默认false）
|
||
* @property {String} name input字段名
|
||
* @property {String} value 默认展示的value值
|
||
* @property {String} placeholder 无选项时展示的文字
|
||
* @property {String} slabel 自定义列表中键值对应关系 (默认label)（键值对应label）
|
||
* @property {String} svalue 自定义列表中键值对应关系（默认value）(键值对应value)
|
||
* @event {Function()} selectitem 点击选项时触发事件
|
||
*/
|
||
/**
|
||
* 也参考了插件：https://ext.dcloud.net.cn/plugin?id=2868
|
||
*/
|
||
export default {
|
||
name: "luyj-select-lay",
|
||
props: {
|
||
// 是否禁用
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 层级
|
||
zindex: {
|
||
type: Number,
|
||
default: 999
|
||
},
|
||
// 数据列表
|
||
options: {
|
||
type: Array,
|
||
default () {
|
||
return []
|
||
}
|
||
},
|
||
// 数据列表的位置
|
||
optionsDirection:{
|
||
type:String,
|
||
default:'bottom'
|
||
},
|
||
// 是否加载中
|
||
loading: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 加载提示文字
|
||
loadingText: {
|
||
type: String,
|
||
default: '数据加载中……'
|
||
},
|
||
// 是否多选
|
||
multiple :{
|
||
type: Boolean,
|
||
default:false
|
||
},
|
||
// input字段名
|
||
name: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 默认展示value值
|
||
value: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 无选项时展示文字
|
||
placeholder: {
|
||
type: String,
|
||
default: '请选择'
|
||
},
|
||
// 自定义列表中键值对应关系label
|
||
slabel: {
|
||
type: String,
|
||
default: 'label'
|
||
},
|
||
// 自定义列表中键值对应关系 value
|
||
svalue: {
|
||
type: String,
|
||
default: 'value'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
active: false, //组件是否激活，
|
||
changevalue: "", //搜索框同步
|
||
oldvalue: "", //数据回滚
|
||
changes: false, //正在搜索
|
||
vlist: [] //搜索框查询的列表
|
||
};
|
||
},
|
||
// created之后，元素加载完毕
|
||
mounted() {
|
||
this.itemcheck();
|
||
},
|
||
watch: {
|
||
//value改变
|
||
value() {
|
||
this.itemcheck();
|
||
},
|
||
//初始化数组
|
||
options() {
|
||
// 此处判断是否有初始value,存在则判断显示文字
|
||
this.itemcheck();
|
||
}
|
||
},
|
||
methods: {
|
||
// 单选和多选的方式本身有相似性,这里先分开.后期再改.
|
||
// ========================================= 单选 ============================================================
|
||
/**
|
||
* 判断数组及当前active值
|
||
*/
|
||
itemcheck() {
|
||
// 此处判断是否有初始value,存在则判断显示文字
|
||
if (this.value != "") {
|
||
// 展示plachhoder
|
||
//判断数组
|
||
if (this.options.length > 0) {
|
||
this.options.forEach(item => {
|
||
if (this.value == item[this.svalue]) {
|
||
this.oldvalue = this.changevalue = item[this.slabel];
|
||
return;
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
this.oldvalue = this.changevalue = "";
|
||
}
|
||
},
|
||
/**
|
||
* 点击组件
|
||
*/
|
||
select() {
|
||
if (this.disabled) {
|
||
return;
|
||
}
|
||
this.active = !this.active;
|
||
if (this.active) {
|
||
this.changes = false;
|
||
} else {
|
||
this.changevalue = this.oldvalue;
|
||
}
|
||
},
|
||
/**
|
||
* 获得焦点
|
||
*/
|
||
unifocus() {
|
||
if (this.disabled) {
|
||
return
|
||
};
|
||
this.active = true;
|
||
this.changes = false;
|
||
},
|
||
/**
|
||
* 移除数据
|
||
*/
|
||
removevalue() {
|
||
this.changes = false;
|
||
this.changevalue = "";
|
||
},
|
||
/**
|
||
* value值改变
|
||
*/
|
||
intchange() {
|
||
if (this.changevalue == '') {
|
||
this.changes = false;
|
||
return;
|
||
};
|
||
this.changes = true;
|
||
this.vlist = this.options.filter(item => {
|
||
return item[this.slabel].includes(this.changevalue)
|
||
})
|
||
},
|
||
/** 点击组件列
|
||
* @param {Object} index 索引
|
||
* @param {Object} item 值
|
||
*/
|
||
selectitem(index, item) {
|
||
this.active = false;
|
||
this.$emit("selectitem", index, item)
|
||
},
|
||
// =============================================== 多选 =======================================================
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.uni-select-lay {
|
||
position: relative;
|
||
z-index: 999;
|
||
|
||
.uni-select-input {
|
||
opacity: 0;
|
||
position: absolute;
|
||
z-index: -111;
|
||
}
|
||
|
||
// select部分
|
||
.uni-select-lay-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;
|
||
|
||
.uni-disabled {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 19;
|
||
cursor: no-drop;
|
||
}
|
||
|
||
// input 框的清除按钮
|
||
.uni-select-lay-input-close {
|
||
position: absolute;
|
||
right: 35px;
|
||
top: 0;
|
||
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);
|
||
}
|
||
}
|
||
}
|
||
|
||
.uni-select-lay-input {
|
||
font-size: 14px;
|
||
color: #999;
|
||
display: block;
|
||
width: 98%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
line-height: 30px;
|
||
|
||
&.active {
|
||
color: #333
|
||
}
|
||
}
|
||
|
||
.uni-select-lay-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;
|
||
}
|
||
}
|
||
|
||
&.active .uni-select-lay-icon {
|
||
text {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
// options部分
|
||
.uni-select-lay-options {
|
||
user-select: none;
|
||
position: absolute;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 500rpx;
|
||
overflow-y: auto;
|
||
border-radius: 4px;
|
||
border: 1px solid rgb(229, 229, 229);
|
||
background: #fff;
|
||
padding: 5px 0;
|
||
box-sizing: border-box;
|
||
z-index: 9;
|
||
|
||
.uni-select-lay-item {
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
cursor: pointer;
|
||
line-height: 2.5;
|
||
transition: .3s;
|
||
font-size: 14px;
|
||
|
||
&.active {
|
||
background: #007AFF;
|
||
color: #fff;
|
||
|
||
&:hover {
|
||
background: #007AFF;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
&:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
}
|
||
|
||
.nosearch {
|
||
font-size: 16px;
|
||
line-height: 3;
|
||
text-align: center;
|
||
color: #666;
|
||
}
|
||
}
|
||
.uni-select-lay-options-top {
|
||
bottom: calc(100% + 5px);
|
||
}
|
||
.uni-select-lay-options-bottom{
|
||
top:calc(100% + 5px);
|
||
}
|
||
}
|
||
|
||
|
||
.rotating__animation{
|
||
-webkit-animation: spin 1s linear 1s 5 alternate;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
// 旋转
|
||
@-webkit-keyframes spin {
|
||
from {
|
||
-webkit-transform: rotate(0deg);
|
||
}
|
||
to {
|
||
-webkit-transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes spin {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
</style>
|