Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(ns-newform): 修复选择器箭头对齐与布局问题

Browse Source 
1. 调整选择器容器布局，将箭头移入flex容器内，统一picker类布局结构
2. 新增box-flex样式类，实现picker与箭头的自适应右对齐布局
3. 修复城市选择器的flex布局类缺失问题
4. 优化原生picker和自定义组件的宽度适配，确保文本对齐生效
This commit is contained in:
ZF Sun
2026-06-12 16:23:23 +08:00
parent 4a5bac7aa5
commit 5847612a58
1 changed files with 49 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
components/ns-newform/ns-newform.vue
View File

@@ -48,11 +48,11 @@
<text class="tit">{{ item.value.title }}</text>
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
</view>
<view :class="['box', 'align-right']">
<view :class="['box', 'box-flex', 'align-right']">
<text v-if="item.val != ''">{{ item.val }}</text>
<text v-else class="color-tip">{{ item.value.placeholder || '请选择' }}</text>
<text class="iconfont icon-right"></text>
</view>
<text class="iconfont icon-right"></text>
</view>
</picker>
</view>
@@ -140,17 +140,17 @@
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
</view>
<view :class="['box', 'box-flex', 'align-right']">
<picker
mode="date"
:value="item.val"
<picker
mode="date"
:value="item.val"
@change="bindDateChange($event, index)"
>
<view :class="['uni-input', !item.val ? 'color-tip' : '']">
{{ item.val ? item.val : (item.value.placeholder || '请选择日期') }}
</view>
</picker>
<text class="iconfont icon-right"></text>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
@@ -201,17 +201,17 @@
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
</view>
<view :class="['box', 'box-flex', 'align-right']">
<picker
mode="time"
:value="item.val"
<picker
mode="time"
:value="item.val"
@change="bindTimeChange($event, index)"
>
<view :class="['uni-input', !item.val ? 'color-tip' : '']">
{{ item.val ? item.val : (item.value.placeholder || '请选择时间') }}
</view>
</picker>
<text class="iconfont icon-right"></text>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
@@ -256,13 +256,13 @@
<!-- 城市选择器 -->
<view v-if="item.controller == 'City'" class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle">
<view :class="['order-cell', 'box-flex', { 'vertical-layout': mode === 'vertical' }]">
<view :class="['order-cell', { 'vertical-layout': mode === 'vertical' }]">
<view class="name" :style="item._labelStyle">
<text class="tit">{{ item.value.title }}</text>
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
</view>
<view :class="['box', 'align-right']">
<pick-regions
<view :class="['box', 'box-flex', 'align-right']">
<pick-regions
:defaultRegions="item.default_regions"
:selectArr="item.select_arr"
@getRegions="handleGetRegions($event, index)"
@@ -271,8 +271,8 @@
{{ item.val ? item.val : (item.value.placeholder || '请选择城市') }}
</view>
</pick-regions>
<text class="iconfont icon-right"></text>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
</view>
@@ -1158,19 +1158,51 @@ export default {
padding: 0;
line-height: inherit;
min-width: 0; // 防止 flex 子元素内容溢出
// 对齐方式
&.align-left {
text-align: left;
}
&.align-right {
text-align: right;
}
&.align-center {
text-align: center;
}
// 让 box 在 City / Select / Date / Time 等"picker + 右侧箭头"场景下成为
// 独立的 flex 行容器：picker 占满剩余宽度，箭头自然贴右
// （与 .order-cell.vertical-layout 不冲突 —— 在垂直布局下 .order-cell 是
// column，.box.box-flex 自身仍是 row，箭头与 picker 仍同行）
&.box-flex {
display: flex;
align-items: center;
justify-content: space-between;
picker,
.pick-regions {
flex: 1;
min-width: 0;
width: auto; // 覆盖下方 .box picker,.pick-regions 的 width: 100%
}
.iconfont.icon-right {
flex-shrink: 0;
margin-left: 8rpx;
line-height: 1;
}
}
// 让原生 picker 与自定义 pick-regions 撑满父容器，
// 使 .box.align-right / align-center 的 text-align 能正确传递到内部
// .uni-input / .select-address（inline-block），与后端 .more 的右对齐效果一致
picker,
.pick-regions {
display: block;
width: 100%;
}
input {
font-size: var(--label-font-size, 28rpx);