@hlw-uni/mp-vue 2.1.55 → 2.1.57
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/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
------------------------------------------------------------------
|
|
4
4
|
用法（业务方从自己的接口配置取对应 unit_id 传入）：
|
|
5
5
|
hlw-ad type="banner" :unit-id="config.banner_unit_id"
|
|
6
|
-
hlw-ad type="grid" :unit-id="config.grid_unit_id"
|
|
6
|
+
hlw-ad type="grid" :unit-id="config.grid_unit_id" placement="right-middle"
|
|
7
7
|
hlw-ad type="custom" :unit-id="config.custom_unit_id"
|
|
8
8
|
|
|
9
9
|
渲染分支：
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
<template>
|
|
18
18
|
<view
|
|
19
19
|
v-if="visible"
|
|
20
|
-
:class="['hlw-ad', `hlw-ad--${type}`, customClass]"
|
|
21
|
-
:style="
|
|
20
|
+
:class="['hlw-ad', `hlw-ad--${type}`, type === 'grid' ? `hlw-ad--${placement}` : '', customClass]"
|
|
21
|
+
:style="style"
|
|
22
22
|
>
|
|
23
23
|
<ad
|
|
24
24
|
v-if="type === 'banner'"
|
|
@@ -41,11 +41,15 @@ import { computed } from "vue";
|
|
|
41
41
|
|
|
42
42
|
defineOptions({ name: "HlwAd" });
|
|
43
43
|
|
|
44
|
+
type GridPlacement = "left-top" | "right-top" | "left-middle" | "right-middle" | "left-bottom" | "right-bottom" | "center";
|
|
45
|
+
|
|
44
46
|
interface Props {
|
|
45
47
|
/** 广告类型 — 仅展示型（banner / grid / custom） */
|
|
46
48
|
type: "banner" | "grid" | "custom";
|
|
47
49
|
/** 微信广告单元 id；空字符串 → 不渲染 */
|
|
48
50
|
unitId: string;
|
|
51
|
+
/** grid 广告悬浮位置 */
|
|
52
|
+
placement?: GridPlacement;
|
|
49
53
|
/** 自定义样式（合并到根元素） */
|
|
50
54
|
customStyle?: string;
|
|
51
55
|
/** 自定义 class */
|
|
@@ -53,6 +57,7 @@ interface Props {
|
|
|
53
57
|
}
|
|
54
58
|
|
|
55
59
|
const props = withDefaults(defineProps<Props>(), {
|
|
60
|
+
placement: "center",
|
|
56
61
|
customStyle: "",
|
|
57
62
|
customClass: "",
|
|
58
63
|
});
|
|
@@ -64,6 +69,7 @@ const emit = defineEmits<{
|
|
|
64
69
|
|
|
65
70
|
/** 有 unit_id 才渲染 */
|
|
66
71
|
const visible = computed(() => !!props.unitId);
|
|
72
|
+
const style = computed(() => props.customStyle);
|
|
67
73
|
|
|
68
74
|
function onLoad(event: any) {
|
|
69
75
|
emit("load", event);
|
|
@@ -81,15 +87,68 @@ function onError(event: any) {
|
|
|
81
87
|
background: var(--surface-card, #ffffff);
|
|
82
88
|
}
|
|
83
89
|
|
|
84
|
-
/*
|
|
90
|
+
/* 格子广告：默认居中悬浮；微信硬性规则要求 wrapper 透明无圆角，customStyle 可覆盖 */
|
|
85
91
|
.hlw-ad--grid {
|
|
86
92
|
position: fixed;
|
|
87
|
-
top: 50%;
|
|
88
|
-
right: 0;
|
|
89
93
|
z-index: 99;
|
|
90
|
-
transform: translateY(-50%);
|
|
91
94
|
border-radius: 0;
|
|
92
95
|
overflow: visible;
|
|
93
96
|
background: transparent;
|
|
94
97
|
}
|
|
98
|
+
|
|
99
|
+
.hlw-ad--left-top {
|
|
100
|
+
top: 24rpx;
|
|
101
|
+
right: auto;
|
|
102
|
+
bottom: auto;
|
|
103
|
+
left: 24rpx;
|
|
104
|
+
transform: none;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.hlw-ad--right-top {
|
|
108
|
+
top: 24rpx;
|
|
109
|
+
right: 24rpx;
|
|
110
|
+
bottom: auto;
|
|
111
|
+
left: auto;
|
|
112
|
+
transform: none;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.hlw-ad--left-middle {
|
|
116
|
+
top: 50%;
|
|
117
|
+
right: auto;
|
|
118
|
+
bottom: auto;
|
|
119
|
+
left: 24rpx;
|
|
120
|
+
transform: translateY(-50%);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.hlw-ad--right-middle {
|
|
124
|
+
top: 50%;
|
|
125
|
+
right: 24rpx;
|
|
126
|
+
bottom: auto;
|
|
127
|
+
left: auto;
|
|
128
|
+
transform: translateY(-50%);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.hlw-ad--left-bottom {
|
|
132
|
+
top: auto;
|
|
133
|
+
right: auto;
|
|
134
|
+
bottom: 200rpx;
|
|
135
|
+
left: 24rpx;
|
|
136
|
+
transform: none;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.hlw-ad--right-bottom {
|
|
140
|
+
top: auto;
|
|
141
|
+
right: 24rpx;
|
|
142
|
+
bottom: 200rpx;
|
|
143
|
+
left: auto;
|
|
144
|
+
transform: none;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.hlw-ad--center {
|
|
148
|
+
top: 50%;
|
|
149
|
+
right: auto;
|
|
150
|
+
bottom: auto;
|
|
151
|
+
left: 50%;
|
|
152
|
+
transform: translate(-50%, -50%);
|
|
153
|
+
}
|
|
95
154
|
</style>
|