@hlw-uni/mp-vue 1.0.5 → 1.0.7
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/dist/index.js +4 -2
- package/dist/index.mjs +4 -2
- package/dist/style.css +14 -11
- package/package.json +3 -2
- package/src/components/hlw-header/index.vue +89 -83
package/dist/index.js
CHANGED
|
@@ -240,7 +240,9 @@
|
|
|
240
240
|
}, [..._cache[0] || (_cache[0] = [
|
|
241
241
|
vue.createElementVNode("text", { class: "iconfont icon-back" }, null, -1)
|
|
242
242
|
])]),
|
|
243
|
-
vue.createElementVNode("view", _hoisted_1$3,
|
|
243
|
+
vue.createElementVNode("view", _hoisted_1$3, [
|
|
244
|
+
vue.createElementVNode("text", null, vue.toDisplayString(props.title), 1)
|
|
245
|
+
]),
|
|
244
246
|
_cache[1] || (_cache[1] = vue.createElementVNode("view", { class: "header-placeholder" }, null, -1))
|
|
245
247
|
], 64)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
|
|
246
248
|
props.title ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$3, vue.toDisplayString(props.title), 1)) : vue.createCommentVNode("", true)
|
|
@@ -250,7 +252,7 @@
|
|
|
250
252
|
};
|
|
251
253
|
}
|
|
252
254
|
});
|
|
253
|
-
const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-
|
|
255
|
+
const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-cebafa4e"]]);
|
|
254
256
|
const _hoisted_1$2 = { class: "hlw-loading" };
|
|
255
257
|
const _hoisted_2$2 = {
|
|
256
258
|
key: 0,
|
package/dist/index.mjs
CHANGED
|
@@ -237,7 +237,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
237
237
|
}, [..._cache[0] || (_cache[0] = [
|
|
238
238
|
createElementVNode("text", { class: "iconfont icon-back" }, null, -1)
|
|
239
239
|
])]),
|
|
240
|
-
createElementVNode("view", _hoisted_1$3,
|
|
240
|
+
createElementVNode("view", _hoisted_1$3, [
|
|
241
|
+
createElementVNode("text", null, toDisplayString(props.title), 1)
|
|
242
|
+
]),
|
|
241
243
|
_cache[1] || (_cache[1] = createElementVNode("view", { class: "header-placeholder" }, null, -1))
|
|
242
244
|
], 64)) : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
|
|
243
245
|
props.title ? (openBlock(), createElementBlock("view", _hoisted_2$3, toDisplayString(props.title), 1)) : createCommentVNode("", true)
|
|
@@ -247,7 +249,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
247
249
|
};
|
|
248
250
|
}
|
|
249
251
|
});
|
|
250
|
-
const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-
|
|
252
|
+
const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-cebafa4e"]]);
|
|
251
253
|
const _hoisted_1$2 = { class: "hlw-loading" };
|
|
252
254
|
const _hoisted_2$2 = {
|
|
253
255
|
key: 0,
|
package/dist/style.css
CHANGED
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
font-size: 28rpx;
|
|
58
58
|
color: #bbb;
|
|
59
59
|
}
|
|
60
|
-
.hlw-header[data-v-
|
|
60
|
+
.hlw-header[data-v-cebafa4e] {
|
|
61
61
|
position: sticky;
|
|
62
62
|
top: 0;
|
|
63
63
|
z-index: 999;
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
flex-direction: column;
|
|
66
66
|
overflow: hidden;
|
|
67
67
|
}
|
|
68
|
-
.header-bg-layer[data-v-
|
|
68
|
+
.header-bg-layer[data-v-cebafa4e] {
|
|
69
69
|
position: absolute;
|
|
70
70
|
top: 0;
|
|
71
71
|
left: 0;
|
|
@@ -73,13 +73,13 @@
|
|
|
73
73
|
bottom: 0;
|
|
74
74
|
z-index: 0;
|
|
75
75
|
}
|
|
76
|
-
.status-bar-spacer[data-v-
|
|
76
|
+
.status-bar-spacer[data-v-cebafa4e] {
|
|
77
77
|
flex-shrink: 0;
|
|
78
78
|
width: 100%;
|
|
79
79
|
position: relative;
|
|
80
80
|
z-index: 1;
|
|
81
81
|
}
|
|
82
|
-
.header-content-area[data-v-
|
|
82
|
+
.header-content-area[data-v-cebafa4e] {
|
|
83
83
|
flex-shrink: 0;
|
|
84
84
|
width: 100%;
|
|
85
85
|
display: flex;
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
position: relative;
|
|
88
88
|
z-index: 1;
|
|
89
89
|
}
|
|
90
|
-
.header-back[data-v-
|
|
90
|
+
.header-back[data-v-cebafa4e] {
|
|
91
91
|
width: 88rpx;
|
|
92
92
|
height: 100%;
|
|
93
93
|
display: flex;
|
|
@@ -95,19 +95,22 @@
|
|
|
95
95
|
justify-content: center;
|
|
96
96
|
flex-shrink: 0;
|
|
97
97
|
}
|
|
98
|
-
.header-back .iconfont[data-v-
|
|
98
|
+
.header-back .iconfont[data-v-cebafa4e] {
|
|
99
99
|
font-size: 40rpx;
|
|
100
100
|
}
|
|
101
|
-
.header-title[data-v-
|
|
101
|
+
.header-title[data-v-cebafa4e] {
|
|
102
102
|
flex: 1;
|
|
103
|
-
text-align: center;
|
|
104
|
-
font-size: 28rpx;
|
|
105
|
-
font-weight: 500;
|
|
106
103
|
overflow: hidden;
|
|
107
104
|
text-overflow: ellipsis;
|
|
108
105
|
white-space: nowrap;
|
|
106
|
+
letter-spacing: 1rpx;
|
|
107
|
+
}
|
|
108
|
+
.header-title text[data-v-cebafa4e] {
|
|
109
|
+
text-align: center;
|
|
110
|
+
font-size: 26rpx;
|
|
111
|
+
font-weight: 500;
|
|
109
112
|
}
|
|
110
|
-
.header-placeholder[data-v-
|
|
113
|
+
.header-placeholder[data-v-cebafa4e] {
|
|
111
114
|
width: 88rpx;
|
|
112
115
|
flex-shrink: 0;
|
|
113
116
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hlw-uni/mp-vue",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"description": "hlw-uni Vue 组件库 — 供小程序业务方使用的 UI 组件集合",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -20,7 +20,8 @@
|
|
|
20
20
|
],
|
|
21
21
|
"scripts": {
|
|
22
22
|
"build": "vite build",
|
|
23
|
-
"dev": "vite build --watch"
|
|
23
|
+
"dev": "vite build --watch",
|
|
24
|
+
"publish:npm": "pnpm build && npm publish --access public"
|
|
24
25
|
},
|
|
25
26
|
"publishConfig": {
|
|
26
27
|
"access": "public"
|
|
@@ -1,70 +1,72 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
2
|
+
<view class="hlw-header" :style="{ height: totalNavBarHeight + 'px' }">
|
|
3
|
+
<view class="header-bg-layer" :class="hasBgSlot ? '' : props.bgClass">
|
|
4
|
+
<slot v-if="!props.isBack" name="bg"></slot>
|
|
5
|
+
</view>
|
|
6
|
+
<view class="status-bar-spacer" :style="{ height: statusBarHeight + 'px' }"></view>
|
|
7
|
+
<view class="header-content-area" :style="{ height: NAV_BAR_CONTENT_HEIGHT + 'px' }">
|
|
8
|
+
<template v-if="props.isBack">
|
|
9
|
+
<view class="header-back" @click="handleBack">
|
|
10
|
+
<text class="iconfont icon-back"></text>
|
|
11
|
+
</view>
|
|
12
|
+
<view class="header-title">
|
|
13
|
+
<text>{{ props.title }}</text>
|
|
14
|
+
</view>
|
|
15
|
+
<view class="header-placeholder"></view>
|
|
16
|
+
</template>
|
|
17
|
+
<slot v-else>
|
|
18
|
+
<view v-if="props.title" class="header-title">{{ props.title }}</view>
|
|
19
|
+
</slot>
|
|
11
20
|
</view>
|
|
12
|
-
<view class="header-title">{{ props.title }}</view>
|
|
13
|
-
<view class="header-placeholder"></view>
|
|
14
|
-
</template>
|
|
15
|
-
<slot v-else>
|
|
16
|
-
<view v-if="props.title" class="header-title">{{ props.title }}</view>
|
|
17
|
-
</slot>
|
|
18
21
|
</view>
|
|
19
|
-
</view>
|
|
20
22
|
</template>
|
|
21
23
|
|
|
22
24
|
<script setup lang="ts">
|
|
23
|
-
import { ref, computed, useSlots } from
|
|
25
|
+
import { ref, computed, useSlots } from "vue";
|
|
24
26
|
|
|
25
27
|
const getNavBarContentHeight = (): number => {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
28
|
+
try {
|
|
29
|
+
const menuInfo = uni.getMenuButtonBoundingClientRect?.();
|
|
30
|
+
if (!menuInfo) return 44;
|
|
31
|
+
const systemInfo = uni.getSystemInfoSync();
|
|
32
|
+
return (menuInfo.top - systemInfo.statusBarHeight!) * 2 + menuInfo.height;
|
|
33
|
+
} catch {
|
|
34
|
+
return 44;
|
|
35
|
+
}
|
|
34
36
|
};
|
|
35
37
|
|
|
36
38
|
const getStatusBarHeight = (): number => {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
39
|
+
try {
|
|
40
|
+
const systemInfo = uni.getSystemInfoSync();
|
|
41
|
+
return systemInfo.statusBarHeight || 20;
|
|
42
|
+
} catch {
|
|
43
|
+
return 20;
|
|
44
|
+
}
|
|
43
45
|
};
|
|
44
46
|
|
|
45
47
|
const NAV_BAR_CONTENT_HEIGHT = getNavBarContentHeight();
|
|
46
48
|
|
|
47
49
|
interface Props {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
extraHeight?: number;
|
|
51
|
+
bgClass?: string;
|
|
52
|
+
isBack?: boolean;
|
|
53
|
+
title?: string;
|
|
52
54
|
}
|
|
53
55
|
|
|
54
56
|
const props = withDefaults(defineProps<Props>(), {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
extraHeight: 0,
|
|
58
|
+
bgClass: "",
|
|
59
|
+
isBack: false,
|
|
60
|
+
title: "",
|
|
59
61
|
});
|
|
60
62
|
|
|
61
63
|
const emit = defineEmits<{
|
|
62
|
-
|
|
64
|
+
back: [];
|
|
63
65
|
}>();
|
|
64
66
|
|
|
65
67
|
const handleBack = () => {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
+
emit("back");
|
|
69
|
+
uni.navigateBack({ delta: 1 });
|
|
68
70
|
};
|
|
69
71
|
|
|
70
72
|
const slots = useSlots();
|
|
@@ -75,64 +77,68 @@ const totalNavBarHeight = computed(() => statusBarHeight.value + NAV_BAR_CONTENT
|
|
|
75
77
|
|
|
76
78
|
<style lang="scss" scoped>
|
|
77
79
|
.hlw-header {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
80
|
+
position: sticky;
|
|
81
|
+
top: 0;
|
|
82
|
+
z-index: 999;
|
|
83
|
+
display: flex;
|
|
84
|
+
flex-direction: column;
|
|
85
|
+
overflow: hidden;
|
|
84
86
|
}
|
|
85
87
|
|
|
86
88
|
.header-bg-layer {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
89
|
+
position: absolute;
|
|
90
|
+
top: 0;
|
|
91
|
+
left: 0;
|
|
92
|
+
right: 0;
|
|
93
|
+
bottom: 0;
|
|
94
|
+
z-index: 0;
|
|
93
95
|
}
|
|
94
96
|
|
|
95
97
|
.status-bar-spacer {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
98
|
+
flex-shrink: 0;
|
|
99
|
+
width: 100%;
|
|
100
|
+
position: relative;
|
|
101
|
+
z-index: 1;
|
|
100
102
|
}
|
|
101
103
|
|
|
102
104
|
.header-content-area {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
105
|
+
flex-shrink: 0;
|
|
106
|
+
width: 100%;
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
position: relative;
|
|
110
|
+
z-index: 1;
|
|
109
111
|
}
|
|
110
112
|
|
|
111
113
|
.header-back {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
114
|
+
width: 88rpx;
|
|
115
|
+
height: 100%;
|
|
116
|
+
display: flex;
|
|
117
|
+
align-items: center;
|
|
118
|
+
justify-content: center;
|
|
119
|
+
flex-shrink: 0;
|
|
120
|
+
|
|
121
|
+
.iconfont {
|
|
122
|
+
font-size: 40rpx;
|
|
123
|
+
}
|
|
122
124
|
}
|
|
123
125
|
|
|
124
126
|
.header-title {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
127
|
+
flex: 1;
|
|
128
|
+
overflow: hidden;
|
|
129
|
+
text-overflow: ellipsis;
|
|
130
|
+
white-space: nowrap;
|
|
131
|
+
letter-spacing: 1rpx;
|
|
132
|
+
|
|
133
|
+
text {
|
|
134
|
+
text-align: center;
|
|
135
|
+
font-size: 26rpx;
|
|
136
|
+
font-weight: 500;
|
|
137
|
+
}
|
|
132
138
|
}
|
|
133
139
|
|
|
134
140
|
.header-placeholder {
|
|
135
|
-
|
|
136
|
-
|
|
141
|
+
width: 88rpx;
|
|
142
|
+
flex-shrink: 0;
|
|
137
143
|
}
|
|
138
144
|
</style>
|