<script lang="ts" setup>
|
import { inject, computed } from 'vue'
|
import { getCSSVariable } from '@/utils/color'
|
|
const props = defineProps({
|
options: {
|
type: Array,
|
default: () => []
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
activeItems: {
|
type: Array,
|
default: () => []
|
},
|
selectStyle: {
|
type: Object,
|
default: () => ({})
|
}
|
})
|
const customStyle: any = inject('$custom-style-filter')
|
|
const customSelectStyle = computed(() => {
|
return customStyle
|
? { ...props.selectStyle, background: customStyle.background }
|
: props.selectStyle
|
})
|
|
const customColor = computed(() => {
|
return customStyle
|
? { color: customStyle.text, fontSize: customStyle.placeholderSize + 'px' }
|
: {}
|
})
|
|
const boxHeight = computed(() => {
|
return `${customStyle?.queryConditionHeight || 32}px`
|
})
|
|
const btnColor = computed(() => {
|
return customStyle ? customStyle.btnColor : getCSSVariable()
|
})
|
|
const emits = defineEmits(['handleItemClick'])
|
const handleItemClick = (item: any) => {
|
if (props.disabled) return
|
emits('handleItemClick', item.value)
|
}
|
</script>
|
|
<template>
|
<div :style="customSelectStyle" class="flat-select" :class="disabled && 'disabled-flat'">
|
<el-scrollbar>
|
<div class="scrollbar-flex-content">
|
<p
|
@click="handleItemClick(item)"
|
v-for="item in options"
|
:key="item"
|
:style="customColor"
|
class="select-item"
|
:class="activeItems.includes(item.value) && 'active-select'"
|
>
|
{{ item.label }}
|
</p>
|
</div>
|
</el-scrollbar>
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
.flat-select {
|
.ed-scrollbar.ed-scrollbar.ed-scrollbar {
|
padding: 0;
|
}
|
.scrollbar-flex-content {
|
display: flex;
|
width: fit-content;
|
.select-item {
|
height: v-bind(boxHeight);
|
padding: 0 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
cursor: pointer;
|
white-space: nowrap;
|
&.active-select::after {
|
content: '';
|
width: 80%;
|
height: 2px;
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translateX(-50%);
|
background-color: v-bind(btnColor) !important;
|
}
|
}
|
}
|
|
&.disabled-flat {
|
.select-item {
|
cursor: not-allowed;
|
&.active-select::after {
|
background-color: #eff0f1 !important;
|
}
|
}
|
}
|
}
|
</style>
|
