diff --git a/src/components/u-select/u-select.vue b/src/components/u-select/u-select.vue index 6a86c20..a05b2bd 100644 --- a/src/components/u-select/u-select.vue +++ b/src/components/u-select/u-select.vue @@ -46,20 +46,27 @@ > 搜索中... - + 无匹配选项 - - {{ item1[labelName] }} + + {{ item1[labelName] }} @@ -172,6 +179,16 @@ export default { debounce: { type: Number, default: 400 + }, + /** 选项行高(rpx)。App 端需与 indicator 同步,避免选中框错位 */ + itemHeight: { + type: [Number, String], + default: 0 + }, + /** 可见行数,用于计算滚轮高度;需为奇数,选中行才能居中 */ + visibleItemCount: { + type: [Number, String], + default: 5 } }, data() { @@ -225,7 +242,37 @@ export default { }, isColumnEmpty() { 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: { pickstart() { diff --git a/src/pages/sys/login/index.vue b/src/pages/sys/login/index.vue index 8725a39..9663b8b 100644 --- a/src/pages/sys/login/index.vue +++ b/src/pages/sys/login/index.vue @@ -105,7 +105,8 @@ + title="选择服务器" :show-search="false" :item-height="88" :visible-item-count="5" + @confirm="onApiUrlConfirm" @cancel="showApiUrlPicker = false"> 版本: {{ appVersion }} @@ -607,15 +608,13 @@ export default { font-size: 36rpx; } - ::v-deep .u-select__body { - height: 560rpx; + ::v-deep .u-select__header__title { + font-size: 36rpx; } ::v-deep .u-select__body__picker-view__item, ::v-deep .u-line-1 { - height: 88rpx; font-size: 40rpx; - line-height: 88rpx; } }