修改单位控件适应微信小程序
This commit is contained in:
parent
4350152488
commit
bb71cacfd1
@ -28,8 +28,11 @@
|
|||||||
left: unitSelectorLeft + 'px',
|
left: unitSelectorLeft + 'px',
|
||||||
top: unitSelectorTop + 'px'
|
top: unitSelectorTop + 'px'
|
||||||
}">
|
}">
|
||||||
<scroll-view scroll-y :style="{ maxHeight: '200px' }">
|
<scroll-view scroll-y :style="{ maxHeight: '300px' }">
|
||||||
<view v-for="unit in sortedUnits" :key="unit.id" class="unit-option" @tap="selectUnit(unit)">
|
<view v-for="(unit, index) in sortedUnits" :key="unit.id" class="unit-option"
|
||||||
|
:class="{ active: activeIndex === index }" <!-- 动态绑定active类 -->
|
||||||
|
@tap="() => { selectUnit(unit); setActiveIndex(index); }" <!-- 点击时设置active -->
|
||||||
|
>
|
||||||
{{ showEnglishOnly ? unit.unitName.split('(')[0] : unit.unitName }}
|
{{ showEnglishOnly ? unit.unitName.split('(')[0] : unit.unitName }}
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
@ -40,7 +43,11 @@
|
|||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
storage
|
storage
|
||||||
} from '@/utils/storageUnit.ts';
|
} from '@/utils/storageUnit.ts';
|
||||||
|
import {
|
||||||
|
ref
|
||||||
|
} from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'UniUnitConverter',
|
name: 'UniUnitConverter',
|
||||||
emits: ['update:modelValue', 'update:unitOrder', 'conversion'],
|
emits: ['update:modelValue', 'update:unitOrder', 'conversion'],
|
||||||
@ -105,9 +112,16 @@
|
|||||||
/* 新增三个数据项 */
|
/* 新增三个数据项 */
|
||||||
originalValue: this.modelValue, // 原始输入值
|
originalValue: this.modelValue, // 原始输入值
|
||||||
originalUnit: null, // 原始输入单位
|
originalUnit: null, // 原始输入单位
|
||||||
isInternalUpdate: false // 更新锁定标志
|
isInternalUpdate: false, // 更新锁定标志
|
||||||
};
|
|
||||||
|
// 新增:管理当前选中的索引
|
||||||
|
activeIndex: -1
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initComponent();
|
this.initComponent();
|
||||||
this.setGlobalClickHandler();
|
this.setGlobalClickHandler();
|
||||||
@ -162,7 +176,10 @@
|
|||||||
await this.$nextTick();
|
await this.$nextTick();
|
||||||
this.updateInputWidth();
|
this.updateInputWidth();
|
||||||
},
|
},
|
||||||
|
// 新增:设置active索引
|
||||||
|
setActiveIndex(index) {
|
||||||
|
activeIndex.value = index;
|
||||||
|
},
|
||||||
setGlobalClickHandler() {
|
setGlobalClickHandler() {
|
||||||
if (typeof document !== 'undefined') {
|
if (typeof document !== 'undefined') {
|
||||||
document.addEventListener('click', this.handleClickOutside);
|
document.addEventListener('click', this.handleClickOutside);
|
||||||
@ -283,6 +300,7 @@
|
|||||||
this.updateInputWidth();
|
this.updateInputWidth();
|
||||||
this.convertAndEmit();
|
this.convertAndEmit();
|
||||||
});
|
});
|
||||||
|
activeIndex.value = -1; // 选择后重置active态(可选)
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 修改输入处理 */
|
/* 修改输入处理 */
|
||||||
@ -415,11 +433,7 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.unit-option:hover {
|
.unit-option:active {
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
scroll-view {
|
|
||||||
max-height: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user