uview-pro 0.3.4 → 0.3.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/changelog.md +44 -17
- package/components/u-action-sheet/types.ts +10 -3
- package/components/u-action-sheet/u-action-sheet.vue +21 -9
- package/components/u-action-sheet-item/types.ts +27 -0
- package/components/u-action-sheet-item/u-action-sheet-item.vue +85 -0
- package/components/u-input/u-input.vue +2 -1
- package/components/u-line-progress/u-line-progress.vue +1 -1
- package/components/u-popup/u-popup.vue +12 -17
- package/components/u-search/u-search.vue +14 -3
- package/libs/function/addUnit.ts +40 -3
- package/libs/hooks/useCompRelation.ts +15 -2
- package/package.json +1 -1
- package/types/components.d.ts +2 -2
package/changelog.md
CHANGED
|
@@ -1,19 +1,46 @@
|
|
|
1
|
-
## 0.3.
|
|
2
|
-
|
|
3
|
-
###
|
|
4
|
-
|
|
5
|
-
- **
|
|
6
|
-
- **u-
|
|
7
|
-
- **u-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
1
|
+
## 0.3.5(2025-10-21)
|
|
2
|
+
|
|
3
|
+
### 🐛 Bug Fixes | Bug 修复
|
|
4
|
+
|
|
5
|
+
- **u-input:** 修复input组件不支持input事件的问题 ([52d6a6a](https://github.com/anyup/uView-Pro/commit/52d6a6aaeec9ec78e4088234ff7ba056cc10fd9c))
|
|
6
|
+
- **u-search:** 修复search组件不支持input事件的问题 ([603b96f](https://github.com/anyup/uView-Pro/commit/603b96f7eeb16d3e54c82b0be7dd03deb930aef5))
|
|
7
|
+
- **u-popup:** 修复微信小程序环境下,u-popup 组件 mode=center 时,设置关闭图标位置无效的问题 ([f08197a](https://github.com/anyup/uView-Pro/commit/f08197aafdc3f874b1efcddf6cc6ff9c9edde954))
|
|
8
|
+
- **u-line-progress:** type 属性设置后仍被 active-color 内联样式覆盖的问题 ([c6f29f9](https://github.com/anyup/uView-Pro/commit/c6f29f9dc8437035a0e698e869af2fd418d0bd65))
|
|
9
|
+
|
|
10
|
+
### ✨ Features | 新功能
|
|
11
|
+
|
|
12
|
+
- **useChildren:** 添加子组件索引功能 ([8ad744f](https://github.com/anyup/uView-Pro/commit/8ad744fd51df934cc20c099686cbdc5512b22c79))
|
|
13
|
+
- **addUnit:** 增强 addUnit 函数支持多值空格分隔 ([6d89cd3](https://github.com/anyup/uView-Pro/commit/6d89cd3c5aacc0770f6f2684fd737d0f05a6e929))
|
|
14
|
+
- **u-action-sheet:** 新增自定义 ActionSheet 组件 ([f709523](https://github.com/anyup/uView-Pro/commit/f709523cba5a089eed7c717cc36b9ab199ae24da))
|
|
15
|
+
|
|
16
|
+
### 📝 Documentation | 文档
|
|
17
|
+
|
|
18
|
+
- 移除issue模板中的提交格式参考 ([83799e8](https://github.com/anyup/uView-Pro/commit/83799e882f69b0e8787a014cfab9f16ab34ba57c))
|
|
19
|
+
|
|
20
|
+
### ♻️ Code Refactoring | 代码重构
|
|
21
|
+
|
|
22
|
+
- **u-popup:** 移除弹窗组件中的冗余代码 ([40c5b64](https://github.com/anyup/uView-Pro/commit/40c5b641539fce56af4f9a4ad2440b9240464a89))
|
|
23
|
+
|
|
24
|
+
### 👥 Contributors
|
|
25
|
+
|
|
26
|
+
<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> <a href="https://github.com/sunjianwei"><img src="https://github.com/sunjianwei.png?size=40" width="40" height="40" alt="sunjianwei" title="sunjianwei"/></a> <a href="https://github.com/koboshi"><img src="https://github.com/koboshi.png?size=40" width="40" height="40" alt="koboshi" title="koboshi"/></a>
|
|
27
|
+
|
|
28
|
+
## 0.3.4(2025-10-20)
|
|
29
|
+
|
|
30
|
+
### ♻️ Code Refactoring | 代码重构
|
|
31
|
+
|
|
32
|
+
- **components:** 移除不必要的父组件和事件总线相关代码,优化组件间通信 ([280c2f8](https://github.com/anyup/uView-Pro/commit/280c2f8acc75764a7706ec38c742cc16703c941a))
|
|
33
|
+
- **u-safe-bottom:** 优化底部安全区组件 ([161f2d3](https://github.com/anyup/uView-Pro/commit/161f2d32ff6b9abbb6f8221a4dd99c438a606e94))
|
|
34
|
+
- **u-status-bar:** 优化状态栏组件 ([53c50ab](https://github.com/anyup/uView-Pro/commit/53c50ab8b6314a7d702b90e6b48b79301a334090))
|
|
35
|
+
|
|
36
|
+
### 🐛 Bug Fixes | Bug 修复
|
|
37
|
+
|
|
38
|
+
- **u-subsection:** 优化列表和模式变化的监听逻辑,移除不必要的初始化调用 ([f77ee7c](https://github.com/anyup/uView-Pro/commit/f77ee7ccc7521ec2472f72dcf2fb47362ca0abd9))
|
|
39
|
+
|
|
40
|
+
### 👥 Contributors
|
|
41
|
+
|
|
42
|
+
<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a>
|
|
43
|
+
|
|
17
44
|
## 0.3.3(2025-10-16)
|
|
18
45
|
|
|
19
46
|
### 🐛 Bug Fixes | Bug 修复
|
|
@@ -30,7 +57,7 @@
|
|
|
30
57
|
|
|
31
58
|
### 👥 Contributors
|
|
32
59
|
|
|
33
|
-
<a href="https://github.com/koboshi"><img src="https://github.com/koboshi.png?size=40" width="40" height="40" alt="koboshi" title="koboshi"/></a> <a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> <a href="https://github.com/lonelyflyer"><img src="https://github.com/lonelyflyer.png?size=40" width="40" height="40" alt="Lonelyflyer" title="Lonelyflyer"/></a>
|
|
60
|
+
<a href="https://github.com/koboshi"><img src="https://github.com/koboshi.png?size=40" width="40" height="40" alt="koboshi" title="koboshi"/></a> <a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> <a href="https://github.com/lonelyflyer"><img src="https://github.com/lonelyflyer.png?size=40" width="40" height="40" alt="Lonelyflyer" title="Lonelyflyer"/></a>
|
|
34
61
|
|
|
35
62
|
## 0.3.2(2025-10-15)
|
|
36
63
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type ExtractPropTypes, type PropType } from 'vue';
|
|
2
2
|
import type { ActionSheetItem, ActionSheetTips } from '../../types/global';
|
|
3
3
|
import { baseProps } from '../common/props';
|
|
4
|
+
import { $u } from '../../';
|
|
4
5
|
|
|
5
6
|
/**
|
|
6
7
|
* actionSheet 操作菜单
|
|
@@ -8,7 +9,7 @@ import { baseProps } from '../common/props';
|
|
|
8
9
|
*/
|
|
9
10
|
export const ActionSheetProps = {
|
|
10
11
|
...baseProps,
|
|
11
|
-
/** 点击遮罩是否可以关闭
|
|
12
|
+
/** 点击遮罩是否可以关闭actionSheet */
|
|
12
13
|
maskCloseAble: { type: Boolean, default: true },
|
|
13
14
|
/** 按钮的文字数组,可以自定义颜色和字体大小,字体单位为rpx */
|
|
14
15
|
list: {
|
|
@@ -18,7 +19,7 @@ export const ActionSheetProps = {
|
|
|
18
19
|
/** 顶部的提示文字 */
|
|
19
20
|
tips: {
|
|
20
21
|
type: Object as unknown as PropType<ActionSheetTips>,
|
|
21
|
-
default: () => ({ text: '', color:
|
|
22
|
+
default: () => ({ text: '', color: $u.color.tipsColor, fontSize: '26rpx' })
|
|
22
23
|
},
|
|
23
24
|
/** 底部的取消按钮 */
|
|
24
25
|
cancelBtn: { type: Boolean, default: true },
|
|
@@ -31,7 +32,13 @@ export const ActionSheetProps = {
|
|
|
31
32
|
/** 弹出的z-index值 */
|
|
32
33
|
zIndex: { type: [String, Number], default: 0 },
|
|
33
34
|
/** 取消按钮的文字提示 */
|
|
34
|
-
cancelText: { type: String, default: '取消' }
|
|
35
|
+
cancelText: { type: String, default: '取消' },
|
|
36
|
+
/** 字体颜色 */
|
|
37
|
+
color: { type: String, default: $u.color.mainColor },
|
|
38
|
+
/** 字体大小 */
|
|
39
|
+
fontSize: { type: [String, Number], default: '32rpx' },
|
|
40
|
+
/** 是否异步关闭 */
|
|
41
|
+
asyncClose: { type: Boolean, default: false }
|
|
35
42
|
};
|
|
36
43
|
|
|
37
44
|
export type ActionSheetProps = ExtractPropTypes<typeof ActionSheetProps>;
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
<view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
|
|
16
16
|
{{ tips.text }}
|
|
17
17
|
</view>
|
|
18
|
-
<block v-for="(item, index) in list" :key="index">
|
|
18
|
+
<block v-if="list && list.length > 0" v-for="(item, index) in list" :key="index">
|
|
19
19
|
<view
|
|
20
20
|
@touchmove.stop.prevent
|
|
21
21
|
@tap="itemClick(index)"
|
|
@@ -28,10 +28,13 @@
|
|
|
28
28
|
<text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText">{{ item.subText }}</text>
|
|
29
29
|
</view>
|
|
30
30
|
</block>
|
|
31
|
+
<template v-else>
|
|
32
|
+
<slot></slot>
|
|
33
|
+
</template>
|
|
31
34
|
<view class="u-gab" v-if="cancelBtn"> </view>
|
|
32
35
|
<view
|
|
33
36
|
@touchmove.stop.prevent
|
|
34
|
-
class="u-
|
|
37
|
+
class="u-action-sheet-cancel u-action-sheet-item"
|
|
35
38
|
hover-class="u-hover-class"
|
|
36
39
|
:hover-stay-time="150"
|
|
37
40
|
v-if="cancelBtn"
|
|
@@ -57,7 +60,7 @@ export default {
|
|
|
57
60
|
|
|
58
61
|
<script setup lang="ts">
|
|
59
62
|
import { computed } from 'vue';
|
|
60
|
-
import { $u } from '../..';
|
|
63
|
+
import { $u, useParent } from '../..';
|
|
61
64
|
import { ActionSheetProps } from './types';
|
|
62
65
|
|
|
63
66
|
/**
|
|
@@ -82,6 +85,8 @@ const props = defineProps(ActionSheetProps);
|
|
|
82
85
|
|
|
83
86
|
const emit = defineEmits(['update:modelValue', 'click', 'close']);
|
|
84
87
|
|
|
88
|
+
useParent('u-action-sheet');
|
|
89
|
+
|
|
85
90
|
const popupValue = computed({
|
|
86
91
|
get: () => props.modelValue,
|
|
87
92
|
set: (val: boolean) => emit('update:modelValue', val)
|
|
@@ -90,18 +95,18 @@ const popupValue = computed({
|
|
|
90
95
|
// 顶部提示的样式
|
|
91
96
|
const tipsStyle = computed(() => {
|
|
92
97
|
let style: Record<string, string> = {};
|
|
93
|
-
|
|
94
|
-
|
|
98
|
+
style.color = props.tips?.color || $u.color.tipsColor;
|
|
99
|
+
style.fontSize = $u.addUnit(props.tips?.fontSize || '26rpx');
|
|
95
100
|
return style;
|
|
96
101
|
});
|
|
97
102
|
|
|
98
103
|
// 操作项目的样式
|
|
99
104
|
const itemStyle = (index: number) => {
|
|
100
105
|
let style: Record<string, string> = {};
|
|
101
|
-
|
|
102
|
-
|
|
106
|
+
style.color = props.list[index]?.color || props.color;
|
|
107
|
+
style.fontSize = $u.addUnit(props.list[index]?.fontSize || props.fontSize);
|
|
103
108
|
// 选项被禁用的样式
|
|
104
|
-
if (props.list[index]?.disabled) style.color =
|
|
109
|
+
if (props.list[index]?.disabled) style.color = $u.color.lightColor;
|
|
105
110
|
return style;
|
|
106
111
|
};
|
|
107
112
|
|
|
@@ -136,8 +141,15 @@ function itemClick(index: number) {
|
|
|
136
141
|
// disabled的项禁止点击
|
|
137
142
|
if (props.list[index]?.disabled) return;
|
|
138
143
|
emit('click', index);
|
|
144
|
+
if (props.asyncClose) return;
|
|
139
145
|
emit('update:modelValue', false);
|
|
140
146
|
}
|
|
147
|
+
|
|
148
|
+
defineExpose({
|
|
149
|
+
props,
|
|
150
|
+
close,
|
|
151
|
+
itemClick
|
|
152
|
+
});
|
|
141
153
|
</script>
|
|
142
154
|
|
|
143
155
|
<style lang="scss" scoped>
|
|
@@ -172,7 +184,7 @@ function itemClick(index: number) {
|
|
|
172
184
|
background-color: rgb(234, 234, 236);
|
|
173
185
|
}
|
|
174
186
|
|
|
175
|
-
.u-
|
|
187
|
+
.u-action-sheet-cancel {
|
|
176
188
|
color: $u-main-color;
|
|
177
189
|
}
|
|
178
190
|
</style>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { type ExtractPropTypes, type PropType } from 'vue';
|
|
2
|
+
import { baseProps } from '../common/props';
|
|
3
|
+
import { $u } from '../../';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* actionSheet 操作菜单
|
|
7
|
+
* @description 本组件用于从底部弹出一个操作菜单,供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI,配置更加灵活,所有平台都表现一致。
|
|
8
|
+
*/
|
|
9
|
+
export const ActionSheetItemProps = {
|
|
10
|
+
...baseProps,
|
|
11
|
+
/** 标题 */
|
|
12
|
+
text: { type: String, default: '' },
|
|
13
|
+
/** 描述 */
|
|
14
|
+
subText: { type: String, default: '' },
|
|
15
|
+
/** 边距 */
|
|
16
|
+
padding: { type: [Number, String] as PropType<number | string>, default: '34rpx 0' },
|
|
17
|
+
/** 字体颜色 */
|
|
18
|
+
color: { type: String, default: $u.color.mainColor },
|
|
19
|
+
/** 字体大小 */
|
|
20
|
+
fontSize: { type: [String, Number], default: '32rpx' },
|
|
21
|
+
/** 是否禁用 */
|
|
22
|
+
disabled: { type: Boolean, default: false },
|
|
23
|
+
/** 是否异步关闭 */
|
|
24
|
+
asyncClose: { type: Boolean, default: false }
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export type ActionSheetItemProps = ExtractPropTypes<typeof ActionSheetItemProps>;
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view
|
|
3
|
+
class="u-action-sheet-item u-line-1"
|
|
4
|
+
:class="[!isLast ? 'u-border-bottom' : '', disabled ? 'u-action-sheet-item--disabled' : '', customClass]"
|
|
5
|
+
:style="$u.toStyle(itemStyle, customStyle)"
|
|
6
|
+
@click="handleClick"
|
|
7
|
+
@touchmove.stop.prevent
|
|
8
|
+
hover-class="u-hover-class"
|
|
9
|
+
:hover-stay-time="150"
|
|
10
|
+
>
|
|
11
|
+
<slot>
|
|
12
|
+
<text>{{ text }}</text>
|
|
13
|
+
<text class="u-action-sheet-item__subtext u-line-1" v-if="subText">{{ subText }}</text>
|
|
14
|
+
</slot>
|
|
15
|
+
</view>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script lang="ts">
|
|
19
|
+
export default {
|
|
20
|
+
name: 'u-action-sheet-item',
|
|
21
|
+
options: {
|
|
22
|
+
addGlobalClass: true,
|
|
23
|
+
// #ifndef MP-TOUTIAO
|
|
24
|
+
virtualHost: true,
|
|
25
|
+
// #endif
|
|
26
|
+
styleIsolation: 'shared'
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<script setup lang="ts">
|
|
32
|
+
import { computed } from 'vue';
|
|
33
|
+
import { ActionSheetItemProps } from './types';
|
|
34
|
+
import { $u, useChildren } from '../../libs';
|
|
35
|
+
|
|
36
|
+
const props = defineProps(ActionSheetItemProps);
|
|
37
|
+
const emit = defineEmits(['click']);
|
|
38
|
+
|
|
39
|
+
const { parent, parentExposed, childIndex, emitToParent } = useChildren('u-action-sheet-item', 'u-action-sheet');
|
|
40
|
+
|
|
41
|
+
const isLast = computed(() => {
|
|
42
|
+
return (childIndex?.value ?? 0) + 1 >= (parent?.value?.getChildren()?.length ?? 0);
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
const itemStyle = computed(() => {
|
|
46
|
+
const style: Record<string, string> = {};
|
|
47
|
+
style.color = props.color || parentExposed?.value?.props?.color;
|
|
48
|
+
style.fontSize = $u.addUnit(props.fontSize || parentExposed?.value?.props?.fontSize);
|
|
49
|
+
style.padding = $u.addUnit(props.padding);
|
|
50
|
+
if (props.disabled) style.color = '#c0c4cc';
|
|
51
|
+
return style;
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
function handleClick() {
|
|
55
|
+
if (props.disabled) return;
|
|
56
|
+
emit('click', childIndex?.value || 0);
|
|
57
|
+
if (!props.asyncClose && !parentExposed?.value?.props?.asyncClose) {
|
|
58
|
+
emitToParent('itemClick', childIndex?.value || 0);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
</script>
|
|
62
|
+
|
|
63
|
+
<style lang="scss" scoped>
|
|
64
|
+
@import '../../libs/css/style.components.scss';
|
|
65
|
+
|
|
66
|
+
.u-action-sheet-item {
|
|
67
|
+
@include vue-flex;
|
|
68
|
+
line-height: 1;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
align-items: center;
|
|
71
|
+
font-size: 32rpx;
|
|
72
|
+
padding: 34rpx 0;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.u-action-sheet-item--disabled {
|
|
77
|
+
color: $u-light-color;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.u-action-sheet-item__subtext {
|
|
81
|
+
font-size: 24rpx;
|
|
82
|
+
color: $u-tips-color;
|
|
83
|
+
margin-top: 20rpx;
|
|
84
|
+
}
|
|
85
|
+
</style>
|
|
@@ -110,7 +110,7 @@ import { $u, useChildren } from '../..';
|
|
|
110
110
|
import { InputProps } from './types';
|
|
111
111
|
|
|
112
112
|
const props = defineProps(InputProps);
|
|
113
|
-
const emit = defineEmits(['update:modelValue', 'blur', 'focus', 'confirm', 'click']);
|
|
113
|
+
const emit = defineEmits(['update:modelValue', 'input', 'blur', 'focus', 'confirm', 'click']);
|
|
114
114
|
|
|
115
115
|
const { emitToParent } = useChildren('u-input', 'u-form-item');
|
|
116
116
|
|
|
@@ -168,6 +168,7 @@ function handleInput(event: any) {
|
|
|
168
168
|
// 判断是否去除空格
|
|
169
169
|
if (props.trim) value = $u.trim(value);
|
|
170
170
|
emit('update:modelValue', value);
|
|
171
|
+
emit('input', value);
|
|
171
172
|
// 当前model 赋值
|
|
172
173
|
defaultValue.value = value;
|
|
173
174
|
// 过一个生命周期再发送事件给u-form-item,否则this.$emit('update:modelValue')更新了父组件的值,但是微信小程序上
|
|
@@ -65,7 +65,7 @@ const slots = useSlots();
|
|
|
65
65
|
const progressStyle = computed(() => {
|
|
66
66
|
let style: Record<string, string> = {};
|
|
67
67
|
style.width = props.percent + '%';
|
|
68
|
-
if (props.activeColor) style.backgroundColor = props.activeColor;
|
|
68
|
+
if (!props.type && props.activeColor) style.backgroundColor = props.activeColor;
|
|
69
69
|
return style;
|
|
70
70
|
});
|
|
71
71
|
</script>
|
|
@@ -28,21 +28,16 @@
|
|
|
28
28
|
:style="[style]"
|
|
29
29
|
>
|
|
30
30
|
<view
|
|
31
|
+
v-if="mode == 'center'"
|
|
31
32
|
class="u-mode-center-box"
|
|
32
33
|
@tap.stop.prevent
|
|
33
34
|
@touchmove.stop.prevent
|
|
34
|
-
v-if="mode == 'center'"
|
|
35
35
|
:style="[centerStyle]"
|
|
36
36
|
>
|
|
37
|
-
<u-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
:class="['u-close--' + closeIconPos]"
|
|
42
|
-
:name="closeIcon"
|
|
43
|
-
:color="closeIconColor"
|
|
44
|
-
:size="closeIconSize"
|
|
45
|
-
></u-icon>
|
|
37
|
+
<view v-if="closeable" @click="close" class="u-close" :class="['u-close--' + closeIconPos]">
|
|
38
|
+
<u-icon :name="closeIcon" :color="closeIconColor" :size="closeIconSize"></u-icon>
|
|
39
|
+
</view>
|
|
40
|
+
|
|
46
41
|
<scroll-view class="u-drawer__scroll-view" scroll-y="true">
|
|
47
42
|
<slot />
|
|
48
43
|
</scroll-view>
|
|
@@ -50,13 +45,13 @@
|
|
|
50
45
|
<scroll-view class="u-drawer__scroll-view" scroll-y="true" v-else>
|
|
51
46
|
<slot />
|
|
52
47
|
</scroll-view>
|
|
53
|
-
<view
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
></u-icon>
|
|
48
|
+
<view
|
|
49
|
+
v-if="mode != 'center' && closeable"
|
|
50
|
+
@click="close"
|
|
51
|
+
class="u-close"
|
|
52
|
+
:class="['u-close--' + closeIconPos]"
|
|
53
|
+
>
|
|
54
|
+
<u-icon :name="closeIcon" :color="closeIconColor" :size="closeIconSize"></u-icon>
|
|
60
55
|
</view>
|
|
61
56
|
</view>
|
|
62
57
|
</view>
|
|
@@ -28,7 +28,6 @@
|
|
|
28
28
|
:value="modelValue"
|
|
29
29
|
@confirm="search"
|
|
30
30
|
@input="inputChange"
|
|
31
|
-
:disabled="disabled"
|
|
32
31
|
@focus="getFocus"
|
|
33
32
|
:focus="focus"
|
|
34
33
|
:maxlength="maxlength"
|
|
@@ -41,7 +40,8 @@
|
|
|
41
40
|
{
|
|
42
41
|
textAlign: inputAlign,
|
|
43
42
|
color: color,
|
|
44
|
-
backgroundColor: bgColor
|
|
43
|
+
backgroundColor: bgColor,
|
|
44
|
+
pointerEvents: disabled ? 'none' : 'auto'
|
|
45
45
|
},
|
|
46
46
|
inputStyle
|
|
47
47
|
]"
|
|
@@ -114,7 +114,17 @@ import { $u } from '../..';
|
|
|
114
114
|
|
|
115
115
|
const props = defineProps(SearchProps);
|
|
116
116
|
|
|
117
|
-
const emit = defineEmits([
|
|
117
|
+
const emit = defineEmits([
|
|
118
|
+
'update:modelValue',
|
|
119
|
+
'input',
|
|
120
|
+
'change',
|
|
121
|
+
'search',
|
|
122
|
+
'custom',
|
|
123
|
+
'clear',
|
|
124
|
+
'focus',
|
|
125
|
+
'blur',
|
|
126
|
+
'click'
|
|
127
|
+
]);
|
|
118
128
|
|
|
119
129
|
// 绑定输入框的值
|
|
120
130
|
const keyword = ref(props.modelValue);
|
|
@@ -134,6 +144,7 @@ watch(
|
|
|
134
144
|
);
|
|
135
145
|
watch(keyword, nVal => {
|
|
136
146
|
emit('update:modelValue', nVal);
|
|
147
|
+
emit('input', nVal);
|
|
137
148
|
emit('change', nVal);
|
|
138
149
|
});
|
|
139
150
|
|
package/libs/function/addUnit.ts
CHANGED
|
@@ -1,13 +1,50 @@
|
|
|
1
1
|
import validation from './test';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
5
|
-
*
|
|
4
|
+
* 添加单位,支持以下场景:
|
|
5
|
+
* 1. 单值:如果有rpx、%、px等单位结尾或者值为auto,直接返回,否则加上rpx单位结尾
|
|
6
|
+
* 2. 多值(空格分隔):分别处理每个值,如 "10 20" => "10rpx 20rpx"
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```ts
|
|
10
|
+
* addUnit(10) => "10rpx"
|
|
11
|
+
* addUnit('10px') => "10px"
|
|
12
|
+
* addUnit('auto') => "auto"
|
|
13
|
+
* addUnit('10 20') => "10rpx 20rpx"
|
|
14
|
+
* addUnit('10rpx 20') => "10rpx 20rpx"
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
17
|
+
* @param value 输入值,可以为字符串或数字,默认'auto'。支持空格分隔的多值(用于 padding、margin 等)
|
|
6
18
|
* @param unit 单位,默认'rpx'
|
|
7
19
|
* @returns 添加单位后的字符串
|
|
8
20
|
*/
|
|
9
21
|
export default function addUnit(value: string | number = 'auto', unit: string = 'rpx'): string {
|
|
22
|
+
// 若传入 number 类型,转为 string
|
|
10
23
|
const strValue = String(value);
|
|
11
|
-
|
|
24
|
+
|
|
25
|
+
// 如果是空值,直接返回
|
|
26
|
+
if (!strValue) return '';
|
|
27
|
+
|
|
28
|
+
// auto 直接返回
|
|
29
|
+
if (strValue === 'auto') return strValue;
|
|
30
|
+
|
|
31
|
+
// 检查是否包含空格(多值场景)
|
|
32
|
+
if (strValue.includes(' ')) {
|
|
33
|
+
// 分割每个值并单独处理
|
|
34
|
+
return strValue
|
|
35
|
+
.split(' ')
|
|
36
|
+
.map(s => {
|
|
37
|
+
// 如果当前值已有单位或为 auto,直接返回
|
|
38
|
+
if (s === 'auto' || /^-?\d*\.?\d+(%|px|rpx|em|rem|vh|vw)$/.test(s)) return s;
|
|
39
|
+
// 数字类型的值添加单位
|
|
40
|
+
return validation.number(s) ? `${s}${unit}` : s;
|
|
41
|
+
})
|
|
42
|
+
.join(' ');
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// 单值场景:如果已有单位或为 auto,直接返回
|
|
46
|
+
if (/^-?\d*\.?\d+(%|px|rpx|em|rem|vh|vw)$/.test(strValue)) return strValue;
|
|
47
|
+
|
|
48
|
+
// 用 uView 内置验证规则判断是否为数值,是则加上单位
|
|
12
49
|
return validation.number(strValue) ? `${strValue}${unit}` : strValue;
|
|
13
50
|
}
|
|
@@ -27,6 +27,7 @@ interface ParentContext {
|
|
|
27
27
|
interface ChildContext {
|
|
28
28
|
id: string;
|
|
29
29
|
name: string;
|
|
30
|
+
getChildIndex: () => number;
|
|
30
31
|
emitToParent: (event: string, data?: any) => void;
|
|
31
32
|
getParentExposed: () => Record<string, any>;
|
|
32
33
|
getInstance: () => any;
|
|
@@ -117,8 +118,8 @@ export function useParent(componentName?: string) {
|
|
|
117
118
|
const broadcast = (event: string, data?: any, childIds?: string | string[]) => {
|
|
118
119
|
const targetChildren = childIds
|
|
119
120
|
? ((Array.isArray(childIds) ? childIds : [childIds])
|
|
120
|
-
|
|
121
|
-
|
|
121
|
+
.map(id => childrenMap.get(id))
|
|
122
|
+
.filter(Boolean) as ChildContext[])
|
|
122
123
|
: Array.from(childrenMap.values());
|
|
123
124
|
|
|
124
125
|
logger.log(`Parent ${name} broadcasting event: ${event} to ${targetChildren.length} children`);
|
|
@@ -319,9 +320,20 @@ export function useChildren(componentName?: string, parentName?: string) {
|
|
|
319
320
|
}
|
|
320
321
|
};
|
|
321
322
|
|
|
323
|
+
const getChildIndex = () => {
|
|
324
|
+
if (!parentRef.value) return -1;
|
|
325
|
+
try {
|
|
326
|
+
const children = parentRef.value.getChildren();
|
|
327
|
+
return children.findIndex((child: ChildContext) => child.id === instanceId);
|
|
328
|
+
} catch (error) {
|
|
329
|
+
return -1;
|
|
330
|
+
}
|
|
331
|
+
};
|
|
332
|
+
|
|
322
333
|
const childContext: ChildContext = {
|
|
323
334
|
id: instanceId,
|
|
324
335
|
name: name || 'anonymous',
|
|
336
|
+
getChildIndex,
|
|
325
337
|
emitToParent,
|
|
326
338
|
getParentExposed,
|
|
327
339
|
getInstance: () => instance,
|
|
@@ -350,6 +362,7 @@ export function useChildren(componentName?: string, parentName?: string) {
|
|
|
350
362
|
return {
|
|
351
363
|
childId: instanceId,
|
|
352
364
|
childName: name || 'anonymous',
|
|
365
|
+
childIndex: computed(getChildIndex),
|
|
353
366
|
parent: parentRef,
|
|
354
367
|
emitToParent,
|
|
355
368
|
getParentExposed,
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"id": "uview-pro",
|
|
3
3
|
"name": "uview-pro",
|
|
4
4
|
"displayName": "【Vue3重构版】uView Pro|基于Vue3+TS全面重构的70+精选UI组件库",
|
|
5
|
-
"version": "0.3.
|
|
5
|
+
"version": "0.3.5",
|
|
6
6
|
"description": "uView Pro,是全面支持Vue3的uni-app生态框架,70+精选组件已使用TypeScript重构,已全面支持uni-app Vue3.0",
|
|
7
7
|
"main": "index.ts",
|
|
8
8
|
"module": "index.ts",
|
package/types/components.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
declare module 'vue' {
|
|
2
2
|
export interface GlobalComponents {
|
|
3
|
-
// 基础组件
|
|
4
3
|
uActionSheet: (typeof import('../components/u-action-sheet/u-action-sheet.vue'))['default'];
|
|
4
|
+
uActionSheetItem: (typeof import('../components/u-action-sheet-item/u-action-sheet-item.vue'))['default'];
|
|
5
5
|
uAlertTips: (typeof import('../components/u-alert-tips/u-alert-tips.vue'))['default'];
|
|
6
6
|
uAvatar: (typeof import('../components/u-avatar/u-avatar.vue'))['default'];
|
|
7
7
|
uAvatarCropper: (typeof import('../components/u-avatar-cropper/u-avatar-cropper.vue'))['default'];
|
|
@@ -96,4 +96,4 @@ declare module 'vue' {
|
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
export {
|
|
99
|
+
export {};
|