muzhiyu-ui 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/muzhiyu/mu-button/mu-button.vue +11 -2
- package/components/muzhiyu/mu-cell/mu-cell.vue +23 -7
- package/components/muzhiyu/mu-input/mu-input.vue +3 -3
- package/components/muzhiyu/mu-keyboard/mu-keyboard.vue +1 -1
- package/components/muzhiyu/mu-section/mu-section.vue +8 -0
- package/package.json +2 -2
|
@@ -196,7 +196,14 @@ const buttonClass = computed(() => [
|
|
|
196
196
|
|
|
197
197
|
const wrapStyle = computed(() => {
|
|
198
198
|
const style = {}
|
|
199
|
-
if (props.block)
|
|
199
|
+
if (props.block) {
|
|
200
|
+
style.width = '100%'
|
|
201
|
+
style.display = 'block'
|
|
202
|
+
} else if (props.width) {
|
|
203
|
+
style.width = '100%'
|
|
204
|
+
style.display = 'flex'
|
|
205
|
+
style.justifyContent = 'center'
|
|
206
|
+
}
|
|
200
207
|
if (props.margin) style.margin = props.margin
|
|
201
208
|
return style
|
|
202
209
|
})
|
|
@@ -290,7 +297,8 @@ function onChooseAvatar(e) { emit('chooseavatar', e) }
|
|
|
290
297
|
display: inline-flex;
|
|
291
298
|
align-items: center;
|
|
292
299
|
justify-content: center;
|
|
293
|
-
line-height: 1
|
|
300
|
+
line-height: 1;
|
|
301
|
+
vertical-align: middle;
|
|
294
302
|
}
|
|
295
303
|
|
|
296
304
|
&__icon {
|
|
@@ -299,6 +307,7 @@ function onChooseAvatar(e) { emit('chooseavatar', e) }
|
|
|
299
307
|
justify-content: center;
|
|
300
308
|
line-height: 1;
|
|
301
309
|
flex-shrink: 0;
|
|
310
|
+
vertical-align: middle;
|
|
302
311
|
|
|
303
312
|
&--left { margin-right: 8rpx; }
|
|
304
313
|
&--right { margin-left: 8rpx; }
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
</view>
|
|
29
29
|
|
|
30
30
|
<!-- 中间标题与副说明 -->
|
|
31
|
-
<view class="mu-cell__content">
|
|
31
|
+
<view class="mu-cell__content" :style="contentStyle">
|
|
32
32
|
<view class="mu-cell__title">
|
|
33
33
|
<slot><text class="mu-cell__title-text">{{ title }}</text></slot>
|
|
34
34
|
</view>
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
</view>
|
|
39
39
|
|
|
40
40
|
<!-- 右侧自定义插槽 (支持绑定/授权手机号按钮、开关、文案等) -->
|
|
41
|
-
<view class="mu-cell__right" @tap
|
|
41
|
+
<view class="mu-cell__right" @tap="handleClick">
|
|
42
42
|
<slot name="right">
|
|
43
43
|
<slot name="value">
|
|
44
44
|
<text v-if="value" class="mu-cell__value">{{ value }}</text>
|
|
@@ -75,7 +75,8 @@ import { ref, computed } from 'vue'
|
|
|
75
75
|
const props = defineProps({
|
|
76
76
|
title: { type: String, default: '' },
|
|
77
77
|
label: { type: String, default: '' },
|
|
78
|
-
value: { type: String, default: '' },
|
|
78
|
+
value: { type: [String, Number], default: '' },
|
|
79
|
+
titleWidth: { type: [String, Number], default: '' }, // 支持自定义标题固定宽度,如 '180rpx'
|
|
79
80
|
icon: { type: String, default: '' },
|
|
80
81
|
iconSize: { type: [Number, String], default: 20 },
|
|
81
82
|
iconColor: { type: String, default: '' },
|
|
@@ -97,6 +98,18 @@ const props = defineProps({
|
|
|
97
98
|
|
|
98
99
|
const emit = defineEmits(['click', 'click-swipe', 'delete'])
|
|
99
100
|
|
|
101
|
+
const contentStyle = computed(() => {
|
|
102
|
+
if (props.titleWidth) {
|
|
103
|
+
const w = typeof props.titleWidth === 'number' ? `${props.titleWidth}rpx` : props.titleWidth
|
|
104
|
+
return {
|
|
105
|
+
width: w,
|
|
106
|
+
flexShrink: 0,
|
|
107
|
+
flexGrow: 0
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
return {}
|
|
111
|
+
})
|
|
112
|
+
|
|
100
113
|
const touchStartX = ref(0)
|
|
101
114
|
const touchStartY = ref(0)
|
|
102
115
|
const swipeOffset = ref(0)
|
|
@@ -231,10 +244,11 @@ function handleClick(e) {
|
|
|
231
244
|
&--disabled { opacity: 0.45; pointer-events: none; }
|
|
232
245
|
&--center .mu-cell__body { align-items: center; }
|
|
233
246
|
|
|
234
|
-
|
|
247
|
+
/* 必填红星号后置 */
|
|
248
|
+
&--required .mu-cell__title-text::after {
|
|
235
249
|
content: '*';
|
|
236
|
-
color:
|
|
237
|
-
margin-
|
|
250
|
+
color: #ef4444;
|
|
251
|
+
margin-left: 4rpx;
|
|
238
252
|
font-size: 26rpx;
|
|
239
253
|
font-weight: 700;
|
|
240
254
|
}
|
|
@@ -291,8 +305,10 @@ function handleClick(e) {
|
|
|
291
305
|
&__right {
|
|
292
306
|
display: flex;
|
|
293
307
|
align-items: center;
|
|
308
|
+
justify-content: flex-end;
|
|
294
309
|
margin-left: 20rpx;
|
|
295
|
-
flex
|
|
310
|
+
flex: 1; /* 自动填满右侧剩余宽度 */
|
|
311
|
+
min-width: 0;
|
|
296
312
|
}
|
|
297
313
|
|
|
298
314
|
&__value {
|
|
@@ -7,12 +7,12 @@
|
|
|
7
7
|
error && 'mu-input--error',
|
|
8
8
|
filled && 'mu-input--filled'
|
|
9
9
|
]">
|
|
10
|
-
<!-- 标题 Label (
|
|
10
|
+
<!-- 标题 Label (必填红星号后置) -->
|
|
11
11
|
<view v-if="label || $slots.label" class="mu-input__label-box" :style="labelBoxStyle">
|
|
12
|
-
<text v-if="required" class="mu-input__required">*</text>
|
|
13
12
|
<slot name="label">
|
|
14
13
|
<text class="mu-input__label-text">{{ label }}</text>
|
|
15
14
|
</slot>
|
|
15
|
+
<text v-if="required" class="mu-input__required" style="color: #ef4444; margin-left: 4rpx;">*</text>
|
|
16
16
|
</view>
|
|
17
17
|
|
|
18
18
|
<!-- 输入框主容器 Main Box -->
|
|
@@ -116,7 +116,7 @@ const props = defineProps({
|
|
|
116
116
|
placeholder: { type: String, default: '请输入' },
|
|
117
117
|
disabled: { type: Boolean, default: false },
|
|
118
118
|
clearable: { type: Boolean, default: false },
|
|
119
|
-
maxlength: { type: Number, default: -1 },
|
|
119
|
+
maxlength: { type: [Number, String], default: -1 },
|
|
120
120
|
counter: { type: Boolean, default: false },
|
|
121
121
|
autoHeight: { type: Boolean, default: false },
|
|
122
122
|
error: { type: Boolean, default: false },
|
|
@@ -80,7 +80,7 @@ const props = defineProps({
|
|
|
80
80
|
title: { type: String, default: '' },
|
|
81
81
|
value: { type: String, default: '' },
|
|
82
82
|
mode: { type: String, default: 'number' }, // number | idcard | car
|
|
83
|
-
maxlength: { type: Number, default: 0 },
|
|
83
|
+
maxlength: { type: [Number, String], default: 0 },
|
|
84
84
|
decimal: { type: Boolean, default: false },
|
|
85
85
|
showToolbar: { type: Boolean, default: true },
|
|
86
86
|
extraKey: { type: String, default: '' }
|
|
@@ -42,6 +42,14 @@
|
|
|
42
42
|
<script setup>
|
|
43
43
|
import { computed } from 'vue'
|
|
44
44
|
|
|
45
|
+
defineOptions({
|
|
46
|
+
name: 'mu-section',
|
|
47
|
+
options: {
|
|
48
|
+
virtualHost: true,
|
|
49
|
+
styleIsolation: 'shared'
|
|
50
|
+
}
|
|
51
|
+
})
|
|
52
|
+
|
|
45
53
|
const props = defineProps({
|
|
46
54
|
title: { type: String, default: '' },
|
|
47
55
|
desc: { type: String, default: '' },
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "muzhiyu-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "基于 UniApp Vue3 + SCSS 打造的全端极奢组件库",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"uni_modules": {
|
|
30
30
|
"id": "muzhiyu-ui",
|
|
31
31
|
"name": "muzhiyu-ui 极奢组件库",
|
|
32
|
-
"version": "1.0.
|
|
32
|
+
"version": "1.0.5",
|
|
33
33
|
"description": "基于 UniApp Vue3 + SCSS 打造的全端极奢 UI 组件库",
|
|
34
34
|
"site": "",
|
|
35
35
|
"displayName": "MuzhiyuUI 极奢全端组件库"
|