449 lines
11 KiB
Vue
449 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view
|
|||
|
|
class="e-stat__select"
|
|||
|
|
:style="{ width: width, minWidth: minWidth }">
|
|||
|
|
<!-- 主体区域 -->
|
|||
|
|
<view class="e-select-main">
|
|||
|
|
<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"
|
|||
|
|
v-model="currentData"
|
|||
|
|
@input="filter"
|
|||
|
|
v-if="search && !disabled" />
|
|||
|
|
<view
|
|||
|
|
class="e-select__input-text"
|
|||
|
|
v-else>
|
|||
|
|
{{ currentData || currentData === 0 ? currentData : placeholder }}
|
|||
|
|
</view>
|
|||
|
|
<!-- 用一个更大的盒子包裹图标,便于点击 -->
|
|||
|
|
<view
|
|||
|
|
class="e-select-icon"
|
|||
|
|
@click.stop="clearVal"
|
|||
|
|
v-if="currentData && clear && !disabled">
|
|||
|
|
<uni-icons
|
|||
|
|
type="clear"
|
|||
|
|
color="#e1e1e1"
|
|||
|
|
size="18"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="e-select-icon"
|
|||
|
|
@click.stop="toggleSelector"
|
|||
|
|
v-else>
|
|||
|
|
<uni-icons
|
|||
|
|
size="14"
|
|||
|
|
color="#999"
|
|||
|
|
type="top"
|
|||
|
|
class="arrowAnimation"
|
|||
|
|
:class="showSelector ? 'top' : 'bottom'"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 全屏遮罩-->
|
|||
|
|
<view
|
|||
|
|
class="e-select--mask"
|
|||
|
|
v-if="showSelector"
|
|||
|
|
@click="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"
|
|||
|
|
v-show="showSelector">
|
|||
|
|
<!-- 三角小箭头 -->
|
|||
|
|
<view class="e-popper__arrow"></view>
|
|||
|
|
<scroll-view
|
|||
|
|
scroll-y="true"
|
|||
|
|
:scroll-top="scrollTop"
|
|||
|
|
class="e-select__selector-scroll"
|
|||
|
|
: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)">
|
|||
|
|
<text>{{ item[props.text] }}</text>
|
|||
|
|
<view
|
|||
|
|
id="scrollToId"
|
|||
|
|
v-if="currentData == item[props.text]"></view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<slot />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'e-select',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 是否显示下拉选择列表
|
|||
|
|
showSelector: false,
|
|||
|
|
// 当前选项
|
|||
|
|
currentOptions: [],
|
|||
|
|
// 当前值
|
|||
|
|
currentData: '',
|
|||
|
|
// 旧的滚动高度
|
|||
|
|
oldScrollTop: 0,
|
|||
|
|
// 最新的滚动高度
|
|||
|
|
scrollTop: 0,
|
|||
|
|
// 滚动至的id
|
|||
|
|
scrollToId: '',
|
|||
|
|
// 滚动动画
|
|||
|
|
scrollWithAnimation: false,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
// 选项列表
|
|||
|
|
options: {
|
|||
|
|
type: Array,
|
|||
|
|
default() {
|
|||
|
|
return [];
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// 配置选项
|
|||
|
|
props: {
|
|||
|
|
type: Object,
|
|||
|
|
default: function () {
|
|||
|
|
return {
|
|||
|
|
text: 'text',
|
|||
|
|
value: 'value',
|
|||
|
|
disabled: 'disabled',
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// vue2 v-model传值方式
|
|||
|
|
value: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: '',
|
|||
|
|
},
|
|||
|
|
// vue3 v-model传值方式
|
|||
|
|
modelValue: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: '',
|
|||
|
|
},
|
|||
|
|
// 占位
|
|||
|
|
placeholder: {
|
|||
|
|
type: String,
|
|||
|
|
default: '请选择',
|
|||
|
|
},
|
|||
|
|
// 宽度
|
|||
|
|
width: {
|
|||
|
|
type: String,
|
|||
|
|
default: '100%',
|
|||
|
|
},
|
|||
|
|
// 最小宽度
|
|||
|
|
minWidth: {
|
|||
|
|
type: String,
|
|||
|
|
default: '120rpx',
|
|||
|
|
},
|
|||
|
|
// 空值占位
|
|||
|
|
emptyTips: {
|
|||
|
|
type: String,
|
|||
|
|
default: '暂无选项',
|
|||
|
|
},
|
|||
|
|
// 是否可清除
|
|||
|
|
clear: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false,
|
|||
|
|
},
|
|||
|
|
// 是否禁用
|
|||
|
|
disabled: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false,
|
|||
|
|
},
|
|||
|
|
// 开启搜索
|
|||
|
|
search: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
// 搜索开启滚动动画
|
|||
|
|
animation: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
options: {
|
|||
|
|
handler() {
|
|||
|
|
this.currentOptions = this.options;
|
|||
|
|
this.initData();
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
deep: true,
|
|||
|
|
},
|
|||
|
|
modelValue: {
|
|||
|
|
handler() {
|
|||
|
|
this.initData();
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
},
|
|||
|
|
value: {
|
|||
|
|
handler() {
|
|||
|
|
this.initData();
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/** 处理数据，此函数用于兼容vue2 vue3 */
|
|||
|
|
initData() {
|
|||
|
|
this.currentData = '';
|
|||
|
|
// vue2
|
|||
|
|
if (this.value || this.value === 0) {
|
|||
|
|
for (let item of this.options) {
|
|||
|
|
if (item[this.props.value] === this.value) {
|
|||
|
|
this.currentData = item[this.props.text];
|
|||
|
|
this.$emit('getText', this.currentData);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// vue3
|
|||
|
|
if (this.modelValue || this.modelValue === 0) {
|
|||
|
|
for (let item of this.options) {
|
|||
|
|
if (item[this.props.value] === this.modelValue) {
|
|||
|
|
this.currentData = item[this.props.text];
|
|||
|
|
this.$emit('getText', this.currentData);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/** 过滤选项列表，会自动回到顶部 */
|
|||
|
|
filter() {
|
|||
|
|
this.$emit('getText', this.currentData);
|
|||
|
|
if (this.currentData) {
|
|||
|
|
this.currentOptions = this.options.filter((item) => {
|
|||
|
|
return item[this.props.text].indexOf(this.currentData) > -1;
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
this.currentOptions = this.options;
|
|||
|
|
}
|
|||
|
|
// scrollTop变化，才能触发滚动顶部
|
|||
|
|
this.scrollTop = 1;
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.scrollTop = 0;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/** 改变值 */
|
|||
|
|
change(item, index) {
|
|||
|
|
if (item[this.props.disabled]) return;
|
|||
|
|
const data = {
|
|||
|
|
...item,
|
|||
|
|
index,
|
|||
|
|
};
|
|||
|
|
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) {
|
|||
|
|
this.currentOptions = this.options;
|
|||
|
|
// scrollToId变化，才能触发scroll-to-view的滚动
|
|||
|
|
this.scrollToId = '';
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.scrollToId = 'scrollToId';
|
|||
|
|
// 设计理念：只在filter时触发滚动动画，因为每次打开就触发，用户体验不好
|
|||
|
|
if (this.animation) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// 开启滚动动画
|
|||
|
|
this.scrollWithAnimation = true;
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 关闭时关闭动画
|
|||
|
|
this.scrollWithAnimation = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.e-stat__select {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|||
|
|
}
|
|||
|
|
.e-select-main {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.e-select-disabled {
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
.e-select {
|
|||
|
|
font-size: 14px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 0 5px;
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
user-select: none;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
border: 1px solid #dcdfe6;
|
|||
|
|
border-bottom: solid 1px #dddddd;
|
|||
|
|
.e-select__input-box {
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 34px;
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
flex: 1;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
.e-select-icon {
|
|||
|
|
width: 50px;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.arrowAnimation {
|
|||
|
|
transition: transform 0.3s;
|
|||
|
|
}
|
|||
|
|
.top {
|
|||
|
|
transform: rotateZ(0deg);
|
|||
|
|
}
|
|||
|
|
.bottom {
|
|||
|
|
transform: rotateZ(180deg);
|
|||
|
|
}
|
|||
|
|
.e-select__input-text {
|
|||
|
|
color: #303030;
|
|||
|
|
padding-left: 7px;
|
|||
|
|
width: 100%;
|
|||
|
|
color: #333;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
-o-text-overflow: ellipsis;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.e-select__input-placeholder {
|
|||
|
|
padding-left: 7px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.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;
|
|||
|
|
top: calc(100% + 12px);
|
|||
|
|
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 4px;
|
|||
|
|
transition: all 2s;
|
|||
|
|
.e-popper__arrow,
|
|||
|
|
.e-popper__arrow::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-select__selector-scroll {
|
|||
|
|
max-height: 200px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.e-select__selector-empty,
|
|||
|
|
.e-select__selector-item {
|
|||
|
|
display: flex;
|
|||
|
|
cursor: pointer;
|
|||
|
|
line-height: 34px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 0px 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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|