|
@@ -5,16 +5,26 @@
|
|
|
:src="styleMap?.mainStyle?.imageSrc"
|
|
:src="styleMap?.mainStyle?.imageSrc"
|
|
|
:imageStyle="styleMap?.mainStyle?.imageStyle"
|
|
:imageStyle="styleMap?.mainStyle?.imageStyle"
|
|
|
/>
|
|
/>
|
|
|
- <div class="relative w-full overflow-hidden" :class="direction === 'left' ? 'text-right' : ''">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="relative w-full overflow-hidden"
|
|
|
|
|
+ :class="direction === 'LV_DIR_LEFT' ? 'text-right' : ''"
|
|
|
|
|
+ >
|
|
|
<span :style="selectedTextStyle">{{ resolvedOptions?.[0]?.text || '' }}</span>
|
|
<span :style="selectedTextStyle">{{ resolvedOptions?.[0]?.text || '' }}</span>
|
|
|
- <div class="absolute right-0 top-0" :class="direction === 'left' ? 'left-0 right-auto' : ''">
|
|
|
|
|
- <i class="lvgl-icon not-italic" v-html="icon ? getSymbol(icon) : ''" :style="iconStyle"></i>
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="absolute right-0 top-0"
|
|
|
|
|
+ :class="direction === 'LV_DIR_LEFT' ? 'left-0 right-auto' : ''"
|
|
|
|
|
+ >
|
|
|
|
|
+ <i
|
|
|
|
|
+ class="lvgl-icon not-italic"
|
|
|
|
|
+ v-html="symbol ? getSymbol(symbol) : ''"
|
|
|
|
|
+ :style="iconStyle"
|
|
|
|
|
+ ></i>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div
|
|
<div
|
|
|
v-if="showList"
|
|
v-if="showList"
|
|
|
- :style="{ ...styleMap?.listStyle, ...popStyle }"
|
|
|
|
|
- style="padding: 0; width: 100%; height: auto"
|
|
|
|
|
|
|
+ :style="{ ...styleMap?.listStyle, ...popStyle, height: props.listheight + 'px' }"
|
|
|
|
|
+ style="padding: 0; width: 100%"
|
|
|
class="absolute bg-white max-h-[120px] overflow-y-auto dropdown-pop"
|
|
class="absolute bg-white max-h-[120px] overflow-y-auto dropdown-pop"
|
|
|
>
|
|
>
|
|
|
<ImageBg
|
|
<ImageBg
|
|
@@ -26,12 +36,12 @@
|
|
|
class="truncate h-24px leading-24px px-10px box-border"
|
|
class="truncate h-24px leading-24px px-10px box-border"
|
|
|
v-for="(item, index) in resolvedOptions"
|
|
v-for="(item, index) in resolvedOptions"
|
|
|
:key="`${item.raw}-${index}`"
|
|
:key="`${item.raw}-${index}`"
|
|
|
- :style="index === 0 ? styleMap?.listSelectedStyle : ''"
|
|
|
|
|
|
|
+ :style="index === 0 ? styleMap?.SelectedStyle : ''"
|
|
|
>
|
|
>
|
|
|
<ImageBg
|
|
<ImageBg
|
|
|
- v-if="styleMap?.listSelectedStyle?.imageSrc && index === 0"
|
|
|
|
|
- :src="styleMap?.listSelectedStyle?.imageSrc"
|
|
|
|
|
- :imageStyle="styleMap?.listSelectedStyle?.imageStyle"
|
|
|
|
|
|
|
+ v-if="styleMap?.SelectedStyle?.imageSrc && index === 0"
|
|
|
|
|
+ :src="styleMap?.SelectedStyle?.imageSrc"
|
|
|
|
|
+ :imageStyle="styleMap?.SelectedStyle?.imageStyle"
|
|
|
/>
|
|
/>
|
|
|
<span class="z-1" :style="item.style">{{ item.text }}</span>
|
|
<span class="z-1" :style="item.style">{{ item.text }}</span>
|
|
|
</div>
|
|
</div>
|
|
@@ -50,12 +60,13 @@ import { useLanguage } from '../hooks/useLanguage'
|
|
|
const props = defineProps<{
|
|
const props = defineProps<{
|
|
|
width: number
|
|
width: number
|
|
|
height: number
|
|
height: number
|
|
|
- icon?: string
|
|
|
|
|
|
|
+ symbol?: string
|
|
|
|
|
+ listheight?: number
|
|
|
styles: any
|
|
styles: any
|
|
|
state?: string
|
|
state?: string
|
|
|
part?: string
|
|
part?: string
|
|
|
options: string[]
|
|
options: string[]
|
|
|
- direction?: 'top' | 'bottom' | 'left' | 'right'
|
|
|
|
|
|
|
+ direction?: 'LV_DIR_TOP' | 'LV_DIR_BOTTOM' | 'LV_DIR_LEFT' | 'LV_DIR_RIGHT'
|
|
|
}>()
|
|
}>()
|
|
|
const { resolveText, getResolvedFontStyle } = useLanguage()
|
|
const { resolveText, getResolvedFontStyle } = useLanguage()
|
|
|
|
|
|
|
@@ -83,17 +94,17 @@ const popStyle = computed((): CSSProperties => {
|
|
|
? (styleMap.value?.mainStyle?.borderWidth as string)?.replace('px', '')
|
|
? (styleMap.value?.mainStyle?.borderWidth as string)?.replace('px', '')
|
|
|
: '0'
|
|
: '0'
|
|
|
|
|
|
|
|
- return props.direction === 'left'
|
|
|
|
|
|
|
+ return props.direction === 'LV_DIR_LEFT'
|
|
|
? {
|
|
? {
|
|
|
top: `-${Number(border || 0)}px`,
|
|
top: `-${Number(border || 0)}px`,
|
|
|
left: `calc(-100% - ${Number(border || 0) * 3}px)`
|
|
left: `calc(-100% - ${Number(border || 0) * 3}px)`
|
|
|
}
|
|
}
|
|
|
- : props.direction === 'right'
|
|
|
|
|
|
|
+ : props.direction === 'LV_DIR_RIGHT'
|
|
|
? {
|
|
? {
|
|
|
right: `calc(-100% - ${Number(border || 0) * 3}px)`,
|
|
right: `calc(-100% - ${Number(border || 0) * 3}px)`,
|
|
|
top: `-${Number(border || 0)}px`
|
|
top: `-${Number(border || 0)}px`
|
|
|
}
|
|
}
|
|
|
- : props.direction === 'top'
|
|
|
|
|
|
|
+ : props.direction === 'LV_DIR_TOP'
|
|
|
? {
|
|
? {
|
|
|
top: 'auto',
|
|
top: 'auto',
|
|
|
bottom: `calc(100% + ${Number(border || 0)}px)`,
|
|
bottom: `calc(100% + ${Number(border || 0)}px)`,
|
|
@@ -121,7 +132,13 @@ const scrollbarStyle = computed(() => {
|
|
|
const iconStyle = computed(() => {
|
|
const iconStyle = computed(() => {
|
|
|
const direction = props.direction
|
|
const direction = props.direction
|
|
|
const rotate =
|
|
const rotate =
|
|
|
- direction === 'top' ? 180 : direction === 'left' ? 90 : direction === 'right' ? -90 : 0
|
|
|
|
|
|
|
+ direction === 'LV_DIR_TOP'
|
|
|
|
|
+ ? 180
|
|
|
|
|
+ : direction === 'LV_DIR_LEFT'
|
|
|
|
|
+ ? 90
|
|
|
|
|
+ : direction === 'LV_DIR_RIGHT'
|
|
|
|
|
+ ? -90
|
|
|
|
|
+ : 0
|
|
|
return {
|
|
return {
|
|
|
display: 'flex',
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
alignItems: 'center',
|