fix: 修复登录环境选择器选中框错位
This commit is contained in:
@@ -46,20 +46,27 @@
|
|||||||
></u-icon>
|
></u-icon>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="loading" class="u-select__loading">搜索中...</view>
|
<view v-if="loading" class="u-select__loading">搜索中...</view>
|
||||||
<view class="u-select__body">
|
<view class="u-select__body" :style="hasCustomItemHeight ? bodyStyle : null">
|
||||||
<view v-if="isColumnEmpty && !loading" class="u-select__empty">无匹配选项</view>
|
<view v-if="isColumnEmpty && !loading" class="u-select__empty">无匹配选项</view>
|
||||||
<picker-view
|
<picker-view
|
||||||
v-else-if="value && !isColumnEmpty"
|
v-else-if="value && !isColumnEmpty"
|
||||||
:key="pickerKey"
|
:key="pickerKey"
|
||||||
@change="columnChange"
|
@change="columnChange"
|
||||||
class="u-select__body__picker-view"
|
class="u-select__body__picker-view"
|
||||||
|
:style="pickerViewStyle"
|
||||||
|
:indicator-style="indicatorStyle"
|
||||||
:value="defaultSelector"
|
:value="defaultSelector"
|
||||||
@pickstart="pickstart"
|
@pickstart="pickstart"
|
||||||
@pickend="pickend"
|
@pickend="pickend"
|
||||||
>
|
>
|
||||||
<picker-view-column v-for="(item, index) in columnData" :key="'col-' + pickerKey + '-' + index">
|
<picker-view-column v-for="(item, index) in columnData" :key="'col-' + pickerKey + '-' + index">
|
||||||
<view class="u-select__body__picker-view__item" v-for="(item1, index1) in item" :key="item1[valueName] != null ? item1[valueName] : index1">
|
<view
|
||||||
<view class="u-line-1">{{ item1[labelName] }}</view>
|
class="u-select__body__picker-view__item"
|
||||||
|
:style="hasCustomItemHeight ? itemStyle : null"
|
||||||
|
v-for="(item1, index1) in item"
|
||||||
|
:key="item1[valueName] != null ? item1[valueName] : index1"
|
||||||
|
>
|
||||||
|
<view class="u-line-1" :style="hasCustomItemHeight ? itemStyle : null">{{ item1[labelName] }}</view>
|
||||||
</view>
|
</view>
|
||||||
</picker-view-column>
|
</picker-view-column>
|
||||||
</picker-view>
|
</picker-view>
|
||||||
@@ -172,6 +179,16 @@ export default {
|
|||||||
debounce: {
|
debounce: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 400
|
default: 400
|
||||||
|
},
|
||||||
|
/** 选项行高(rpx)。App 端需与 indicator 同步,避免选中框错位 */
|
||||||
|
itemHeight: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
/** 可见行数,用于计算滚轮高度;需为奇数,选中行才能居中 */
|
||||||
|
visibleItemCount: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 5
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -225,7 +242,37 @@ export default {
|
|||||||
},
|
},
|
||||||
isColumnEmpty() {
|
isColumnEmpty() {
|
||||||
return !this.columnData || !this.columnData.length || !this.columnData[0] || !this.columnData[0].length;
|
return !this.columnData || !this.columnData.length || !this.columnData[0] || !this.columnData[0].length;
|
||||||
}
|
},
|
||||||
|
hasCustomItemHeight() {
|
||||||
|
return Number(this.itemHeight) > 0;
|
||||||
|
},
|
||||||
|
itemHeightRpx() {
|
||||||
|
return Number(this.itemHeight) || 70;
|
||||||
|
},
|
||||||
|
itemHeightPx() {
|
||||||
|
return uni.upx2px(this.itemHeightRpx);
|
||||||
|
},
|
||||||
|
visibleCount() {
|
||||||
|
const n = Number(this.visibleItemCount) || 5;
|
||||||
|
return n % 2 === 0 ? n + 1 : n;
|
||||||
|
},
|
||||||
|
indicatorStyle() {
|
||||||
|
if (!this.hasCustomItemHeight) return '';
|
||||||
|
return `height: ${this.itemHeightPx}px;`;
|
||||||
|
},
|
||||||
|
itemStyle() {
|
||||||
|
return {
|
||||||
|
height: `${this.itemHeightPx}px`,
|
||||||
|
lineHeight: `${this.itemHeightPx}px`,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
pickerViewStyle() {
|
||||||
|
if (!this.hasCustomItemHeight) return null;
|
||||||
|
return { height: `${this.itemHeightPx * this.visibleCount}px` };
|
||||||
|
},
|
||||||
|
bodyStyle() {
|
||||||
|
return this.pickerViewStyle;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
pickstart() {
|
pickstart() {
|
||||||
|
|||||||
@@ -105,7 +105,8 @@
|
|||||||
<!-- </view>-->
|
<!-- </view>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<u-select class="login-env-picker" v-model="showApiUrlPicker" :list="apiUrlList" :default-value="apiUrlDefaultIndex"
|
<u-select class="login-env-picker" v-model="showApiUrlPicker" :list="apiUrlList" :default-value="apiUrlDefaultIndex"
|
||||||
title="选择服务器" @confirm="onApiUrlConfirm" @cancel="showApiUrlPicker = false"></u-select>
|
title="选择服务器" :show-search="false" :item-height="88" :visible-item-count="5"
|
||||||
|
@confirm="onApiUrlConfirm" @cancel="showApiUrlPicker = false"></u-select>
|
||||||
<!-- 版本信息显示 -->
|
<!-- 版本信息显示 -->
|
||||||
<view class="version-info">
|
<view class="version-info">
|
||||||
<text class="version-text">版本: {{ appVersion }}</text>
|
<text class="version-text">版本: {{ appVersion }}</text>
|
||||||
@@ -607,15 +608,13 @@ export default {
|
|||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .u-select__body {
|
::v-deep .u-select__header__title {
|
||||||
height: 560rpx;
|
font-size: 36rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .u-select__body__picker-view__item,
|
::v-deep .u-select__body__picker-view__item,
|
||||||
::v-deep .u-line-1 {
|
::v-deep .u-line-1 {
|
||||||
height: 88rpx;
|
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
line-height: 88rpx;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user