549 lines
13 KiB
Vue
549 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view
|
|||
|
|
class="e-select-box"
|
|||
|
|
:style="{ width: width, minWidth: minWidth }">
|
|||
|
|
<view
|
|||
|
|
class="e-select"
|
|||
|
|
:class="{ 'e-select-disabled': disabled }">
|
|||
|
|
<view
|
|||
|
|
class="e-select-input-box"
|
|||
|
|
@click="toggleSelector">
|
|||
|
|
<!-- 微信小程序input组件在部分安卓机型上会出现文字重影，placeholder抖动问题，2019年时微信小程序就有这个问题，一直没修复，估计短时间内也别指望修复了 -->
|
|||
|
|
<input
|
|||
|
|
class="e-select-input-text"
|
|||
|
|
:placeholder="placeholder"
|
|||
|
|
placeholder-class="e-select-input-placeholder"
|
|||
|
|
v-model="currentData"
|
|||
|
|
@input="filter"
|
|||
|
|
v-if="search && !disabled" />
|
|||
|
|
<view
|
|||
|
|
class="e-select-input-text"
|
|||
|
|
:class="{
|
|||
|
|
'e-select-input-placeholder': !(currentData || currentData === 0),
|
|||
|
|
}"
|
|||
|
|
v-else>
|
|||
|
|
{{ currentData || currentData === 0 ? currentData : placeholder }}
|
|||
|
|
</view>
|
|||
|
|
<!-- 清空图标，用一个更大的盒子包裹图标,便于点击 -->
|
|||
|
|
<view
|
|||
|
|
class="e-select-icon"
|
|||
|
|
@click.stop="clearVal"
|
|||
|
|
v-if="currentData && clearable && !disabled">
|
|||
|
|
<uni-icons
|
|||
|
|
type="clear"
|
|||
|
|
color="#e1e1e1"
|
|||
|
|
size="16"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
<!-- 箭头图标，同上 -->
|
|||
|
|
<view
|
|||
|
|
class="e-select-icon"
|
|||
|
|
@click.stop="toggleSelector"
|
|||
|
|
v-else>
|
|||
|
|
<uni-icons
|
|||
|
|
size="16"
|
|||
|
|
color="#6A6A6A"
|
|||
|
|
type="top"
|
|||
|
|
class="arrowAnimation"
|
|||
|
|
:class="showSelector ? 'top' : 'bottom'"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 全屏遮罩-->
|
|||
|
|
<view
|
|||
|
|
class="e-select--mask"
|
|||
|
|
v-if="showSelector"
|
|||
|
|
@click.stop="toggleSelector" />
|
|||
|
|
<!-- 选项列表 这里用v-show是因为微信小程序会报警告 [Component] slot "" is not found，v-if会导致开发工具不能正确识别到slot -->
|
|||
|
|
<!-- https://developers.weixin.qq.com/community/minihome/doc/000c8295730700d1cd7c81b9656c00 -->
|
|||
|
|
<view
|
|||
|
|
class="e-select-selector"
|
|||
|
|
:style="
|
|||
|
|
position === 'top'
|
|||
|
|
? 'bottom: calc(0px + 42px)'
|
|||
|
|
: 'top: calc(100% + 12px)'
|
|||
|
|
"
|
|||
|
|
v-show="showSelector">
|
|||
|
|
<!-- 三角小箭头 -->
|
|||
|
|
<view
|
|||
|
|
:class="
|
|||
|
|
position === 'top' ? 'e-popper-arrow-bottom' : 'e-popper-arrow'
|
|||
|
|
"></view>
|
|||
|
|
<scroll-view
|
|||
|
|
scroll-y="true"
|
|||
|
|
:scroll-top="scrollTop"
|
|||
|
|
class="e-select-selector-scroll"
|
|||
|
|
:style="{ maxHeight: maxHeight }"
|
|||
|
|
:scroll-into-view="scrollToId"
|
|||
|
|
:scroll-with-animation="scrollWithAnimation"
|
|||
|
|
v-if="showSelector">
|
|||
|
|
<view
|
|||
|
|
class="e-select-selector-empty"
|
|||
|
|
v-if="currentOptions.length === 0">
|
|||
|
|
<text>{{ emptyTips }}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- 非空,渲染选项列表 -->
|
|||
|
|
<view
|
|||
|
|
v-else
|
|||
|
|
class="e-select-selector-item"
|
|||
|
|
:class="[
|
|||
|
|
{ highlight: currentData == item[props.text] },
|
|||
|
|
{
|
|||
|
|
'e-select-selector-item-disabled': item[props.disabled],
|
|||
|
|
},
|
|||
|
|
]"
|
|||
|
|
v-for="(item, index) in currentOptions"
|
|||
|
|
:key="index"
|
|||
|
|
@click="change(item, index)">
|
|||
|
|
<view
|
|||
|
|
id="scrollToId"
|
|||
|
|
v-if="currentData == item[props.text]"></view>
|
|||
|
|
<text>{{ item[props.text] }}</text>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<slot />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'e-select',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 是否显示下拉选择列表
|
|||
|
|
showSelector: false,
|
|||
|
|
// 当前选项列表
|
|||
|
|
currentOptions: [],
|
|||
|
|
// 过滤后的选项列表
|
|||
|
|
filterOptions: [],
|
|||
|
|
// 当前值
|
|||
|
|
currentData: '',
|
|||
|
|
// 滚动高度
|
|||
|
|
scrollTop: 0,
|
|||
|
|
// 滚动至的id
|
|||
|
|
scrollToId: 'scrollToId',
|
|||
|
|
// 滚动动画
|
|||
|
|
scrollWithAnimation: false,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
// vue2 v-model传值方式
|
|||
|
|
value: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: '',
|
|||
|
|
},
|
|||
|
|
// vue3 v-model传值方式
|
|||
|
|
modelValue: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: '',
|
|||
|
|
},
|
|||
|
|
// 选项列表
|
|||
|
|
options: {
|
|||
|
|
type: Array,
|
|||
|
|
default() {
|
|||
|
|
return [];
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// 选项列表自定义数据格式
|
|||
|
|
props: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {
|
|||
|
|
return {
|
|||
|
|
text: 'text',
|
|||
|
|
value: 'value',
|
|||
|
|
disabled: 'disabled',
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// 占位文本
|
|||
|
|
placeholder: {
|
|||
|
|
type: String,
|
|||
|
|
default: '请选择',
|
|||
|
|
},
|
|||
|
|
// 输入框宽度
|
|||
|
|
width: {
|
|||
|
|
type: String,
|
|||
|
|
default: '100%',
|
|||
|
|
},
|
|||
|
|
// 输入框最小宽度
|
|||
|
|
minWidth: {
|
|||
|
|
type: String,
|
|||
|
|
default: '120rpx',
|
|||
|
|
},
|
|||
|
|
// 选项列表悬浮框最大高度
|
|||
|
|
maxHeight: {
|
|||
|
|
type: String,
|
|||
|
|
default: '160px',
|
|||
|
|
},
|
|||
|
|
// 选项列表空值占位空值占位
|
|||
|
|
emptyTips: {
|
|||
|
|
type: String,
|
|||
|
|
default: '暂无选项',
|
|||
|
|
},
|
|||
|
|
// 是否可清空
|
|||
|
|
clearable: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false,
|
|||
|
|
},
|
|||
|
|
// 是否禁用
|
|||
|
|
disabled: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false,
|
|||
|
|
},
|
|||
|
|
// 是否开启搜索
|
|||
|
|
search: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
// 是否开启搜索的滚动动画
|
|||
|
|
animation: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
// 悬浮框位置top/bottom
|
|||
|
|
position: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'bottom',
|
|||
|
|
},
|
|||
|
|
// 分页每页条数
|
|||
|
|
pageSize: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 0,
|
|||
|
|
},
|
|||
|
|
// 分页当前页数
|
|||
|
|
pageIndex: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 1,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
options: {
|
|||
|
|
handler(val) {
|
|||
|
|
this.filterOptions = val.slice();
|
|||
|
|
this.initOptions();
|
|||
|
|
this.initData();
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
deep: true,
|
|||
|
|
},
|
|||
|
|
modelValue: {
|
|||
|
|
handler() {
|
|||
|
|
this.initData();
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
},
|
|||
|
|
value: {
|
|||
|
|
handler() {
|
|||
|
|
this.initData();
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
},
|
|||
|
|
pageSize() {
|
|||
|
|
this.initOptions();
|
|||
|
|
},
|
|||
|
|
pageIndex() {
|
|||
|
|
this.initOptions();
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/** 处理数据，此函数用于兼容vue2 vue3 */
|
|||
|
|
initData() {
|
|||
|
|
this.currentData = '';
|
|||
|
|
// vue2
|
|||
|
|
if (this.value || this.value === 0) {
|
|||
|
|
for (let i = 0; i < this.options.length; i++) {
|
|||
|
|
const item = this.options[i];
|
|||
|
|
if (item[this.props.value] === this.value) {
|
|||
|
|
this.currentData = item[this.props.text];
|
|||
|
|
this.$emit('getText', this.currentData);
|
|||
|
|
// 如果分页，初始化分页当前页数
|
|||
|
|
if (this.pageSize && this.pageIndex) {
|
|||
|
|
this.$emit('update:pageIndex', Math.floor(i / this.pageSize) + 1);
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// vue3
|
|||
|
|
else if (this.modelValue || this.modelValue === 0) {
|
|||
|
|
for (let i = 0; i < this.options.length; i++) {
|
|||
|
|
const item = this.options[i];
|
|||
|
|
if (item[this.props.value] === this.modelValue) {
|
|||
|
|
this.currentData = item[this.props.text];
|
|||
|
|
this.$emit('getText', this.currentData);
|
|||
|
|
if (this.pageSize && this.pageIndex) {
|
|||
|
|
this.$emit('update:pageIndex', Math.floor(i / this.pageSize) + 1);
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/** 初始化选项列表 */
|
|||
|
|
initOptions() {
|
|||
|
|
// 设置分页情况下列表
|
|||
|
|
if (this.pageSize && this.pageIndex) {
|
|||
|
|
this.currentOptions = this.filterOptions.slice(
|
|||
|
|
(this.pageIndex - 1) * this.pageSize,
|
|||
|
|
this.pageIndex * this.pageSize
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
this.currentOptions = this.filterOptions;
|
|||
|
|
}
|
|||
|
|
// scrollTop变化，才能触发滚动顶部，再低如0.01则不能触发，真神奇
|
|||
|
|
this.scrollTop = 0.1;
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.scrollTop = 0;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/** 过滤选项列表，会自动回到顶部 */
|
|||
|
|
filter() {
|
|||
|
|
// 回到分页第一页
|
|||
|
|
this.$emit('update:pageIndex', 1);
|
|||
|
|
this.$emit('getText', this.currentData);
|
|||
|
|
if (this.currentData) {
|
|||
|
|
this.filterOptions = this.options.filter((item) => {
|
|||
|
|
return item[this.props.text].indexOf(this.currentData) > -1;
|
|||
|
|
});
|
|||
|
|
this.$emit('update:total', this.filterOptions.length);
|
|||
|
|
}
|
|||
|
|
// 等待update:pageIndex事件执行完成
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.initOptions();
|
|||
|
|
}, 0);
|
|||
|
|
},
|
|||
|
|
/** 改变值 */
|
|||
|
|
change(item, index) {
|
|||
|
|
if (item[this.props.disabled]) return;
|
|||
|
|
const data = {
|
|||
|
|
index,
|
|||
|
|
...item,
|
|||
|
|
};
|
|||
|
|
this.$emit('change', data);
|
|||
|
|
this.emit(data);
|
|||
|
|
this.toggleSelector();
|
|||
|
|
},
|
|||
|
|
/** 传递父组件值 */
|
|||
|
|
emit(item) {
|
|||
|
|
this.$emit('input', item[this.props.value]);
|
|||
|
|
this.$emit('update:modelValue', item[this.props.value]);
|
|||
|
|
},
|
|||
|
|
/** 清空值 */
|
|||
|
|
clearVal() {
|
|||
|
|
this.$emit('change', 'clear');
|
|||
|
|
this.$emit('input', '');
|
|||
|
|
this.$emit('update:modelValue', '');
|
|||
|
|
},
|
|||
|
|
/** 切换下拉显示 */
|
|||
|
|
toggleSelector() {
|
|||
|
|
if (this.disabled) return;
|
|||
|
|
this.showSelector = !this.showSelector;
|
|||
|
|
if (this.showSelector) {
|
|||
|
|
// 设计理念：只在filter时触发滚动动画，因为每次打开就触发，用户体验不好
|
|||
|
|
if (this.animation) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// 开启滚动动画
|
|||
|
|
this.scrollWithAnimation = true;
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 关闭时重新初始化
|
|||
|
|
this.filterOptions = this.options.slice();
|
|||
|
|
this.initData();
|
|||
|
|
this.initOptions();
|
|||
|
|
this.$emit('update:total', this.options.length);
|
|||
|
|
this.scrollWithAnimation = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.e-select-box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
cursor: pointer;
|
|||
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.e-select {
|
|||
|
|
width: 100%;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
user-select: none;
|
|||
|
|
position: relative;
|
|||
|
|
border: 1px solid #dcdfe6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.e-select-disabled {
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.e-select-input-box {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 0px 20rpx;
|
|||
|
|
min-height: 34px;
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
flex: 1;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.e-select-input-text {
|
|||
|
|
color: #303030;
|
|||
|
|
width: 100%;
|
|||
|
|
color: #333;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
-o-text-overflow: ellipsis;
|
|||
|
|
overflow: hidden;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.e-select-input-placeholder {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.e-select-icon {
|
|||
|
|
width: 50px;
|
|||
|
|
padding-right: 3px;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.arrowAnimation {
|
|||
|
|
transition: transform 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top {
|
|||
|
|
transform: rotateZ(0deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom {
|
|||
|
|
transform: rotateZ(180deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.e-select--mask {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
right: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.e-select-selector {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border: 1px solid #ebeef5;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|||
|
|
z-index: 999;
|
|||
|
|
padding: 4px 2px;
|
|||
|
|
transition: all 1s;
|
|||
|
|
|
|||
|
|
.e-select-selector-scroll {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.e-select-selector-empty,
|
|||
|
|
.e-select-selector-item {
|
|||
|
|
display: flex;
|
|||
|
|
cursor: pointer;
|
|||
|
|
line-height: 35rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
padding: 15rpx 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.e-select-selector-item:hover {
|
|||
|
|
background-color: #f9f9f9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.e-select-selector-empty:last-child,
|
|||
|
|
.e-select-selector-item:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.e-select-selector-item-disabled {
|
|||
|
|
color: #b1b1b1;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.highlight {
|
|||
|
|
color: #409eff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.e-popper-arrow,
|
|||
|
|
.e-popper-arrow::after,
|
|||
|
|
.e-popper-arrow-bottom,
|
|||
|
|
.e-popper-arrow-bottom::after {
|
|||
|
|
position: absolute;
|
|||
|
|
display: block;
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
border-color: transparent;
|
|||
|
|
border-style: solid;
|
|||
|
|
border-width: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.e-popper-arrow {
|
|||
|
|
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
|||
|
|
top: -6px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
margin-right: 3px;
|
|||
|
|
border-top-width: 0;
|
|||
|
|
border-bottom-color: #ebeef5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.e-popper-arrow::after {
|
|||
|
|
content: ' ';
|
|||
|
|
top: 1px;
|
|||
|
|
margin-left: -6px;
|
|||
|
|
border-top-width: 0;
|
|||
|
|
border-bottom-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.e-popper-arrow-bottom {
|
|||
|
|
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
|||
|
|
bottom: -6px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
margin-right: 3px;
|
|||
|
|
border-bottom-width: 0;
|
|||
|
|
border-top-color: #ebeef5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.e-popper-arrow-bottom::after {
|
|||
|
|
content: ' ';
|
|||
|
|
bottom: 1px;
|
|||
|
|
margin-left: -6px;
|
|||
|
|
border-bottom-width: 0;
|
|||
|
|
border-top-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 设置定位元素的位置 */
|
|||
|
|
#scrollToId {
|
|||
|
|
margin-top: -15rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|