|
|
@@ -1,8 +1,11 @@
|
|
|
<template>
|
|
|
<view class="wa-attr">
|
|
|
<view class="wa-attr__label">
|
|
|
- <text>{{ title }}</text>
|
|
|
- <text v-if="list.length > perRow * 2" class="wa-attr__toggle" @tap="expanded = !expanded">{{ expanded ? '收起' : '展开' }}</text>
|
|
|
+ <text class="wa-attr__label-row">
|
|
|
+ <text v-if="required" class="wa-attr__required">*</text>
|
|
|
+ <text>{{ title }}</text>
|
|
|
+ </text>
|
|
|
+ <text v-if="list.length > perRow * 2" class="wa-attr__toggle" @tap="expanded = !expanded">{{ expanded ? '收起' : '展开更多' }}<text v-if="!expanded" class="wa-attr__count">(共 {{ list.length }} 项)</text></text>
|
|
|
</view>
|
|
|
<view class="wa-btn-group" :class="{ 'wa-btn-group--fold': !expanded && list.length > perRow * 2 }">
|
|
|
<view
|
|
|
@@ -24,7 +27,8 @@ export default {
|
|
|
title: { type: String, default: '' },
|
|
|
list: { type: Array, default: () => [] },
|
|
|
field: { type: String, default: 'descripts' },
|
|
|
- pickIndex: { type: Number, default: -1 }
|
|
|
+ pickIndex: { type: Number, default: -1 },
|
|
|
+ required: { type: Boolean, default: false }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -53,20 +57,35 @@ export default {
|
|
|
color: #6b7280;
|
|
|
margin-bottom: 12rpx;
|
|
|
}
|
|
|
+.wa-attr__label-row {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.wa-attr__required {
|
|
|
+ color: #ef4444;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
.wa-attr__toggle {
|
|
|
color: #1890ff;
|
|
|
font-size: 22rpx;
|
|
|
}
|
|
|
+.wa-attr__count {
|
|
|
+ color: #9ca3af;
|
|
|
+ font-size: 22rpx;
|
|
|
+ margin-left: 4rpx;
|
|
|
+}
|
|
|
.wa-btn-group {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
.wa-btn-group--fold {
|
|
|
- max-height: 76rpx; /* 约2行 */
|
|
|
+ max-height: 156rpx; /* 折叠时仅显示约 5 个(约 1.3 行),配合展开更多 */
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.wa-btn {
|
|
|
- padding: 12rpx 24rpx;
|
|
|
+ padding: 10rpx 24rpx;
|
|
|
margin: 0 16rpx 16rpx 0;
|
|
|
background: #f3f4f6;
|
|
|
color: #374151;
|