@hlw-uni/mp-vue 1.1.1 → 1.1.3
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/README.md +82 -0
- package/dist/index.js +185 -172
- package/dist/index.mjs +186 -173
- package/dist/style.css +87 -59
- package/package.json +1 -1
- package/src/components/hlw-modal/index.vue +14 -34
- package/src/components/hlw-page/index.vue +5 -1
- package/src/components/hlw-popup/index.vue +40 -17
- package/src/components/hlw-tag/index.vue +27 -3
package/README.md
CHANGED
|
@@ -48,6 +48,88 @@ import { HlwEmpty, HlwLoading } from '@hlw-uni/mp-vue';
|
|
|
48
48
|
</template>
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
+
## 主题能力
|
|
52
|
+
|
|
53
|
+
`mp-vue` 内置了基础主题能力，`useThemePageStyle()` 会返回一组可直接挂到页面根节点上的 CSS 变量样式。
|
|
54
|
+
|
|
55
|
+
当前内置变量主要包括：
|
|
56
|
+
|
|
57
|
+
- 主题色：`--primary-color`、`--primary-light`、`--primary-dark`
|
|
58
|
+
- 字体档位：`--font-xs`、`--font-sm`、`--font-base`、`--font-md`、`--font-lg`、`--font-xl`
|
|
59
|
+
|
|
60
|
+
### 基础用法
|
|
61
|
+
|
|
62
|
+
```vue
|
|
63
|
+
<script setup lang="ts">
|
|
64
|
+
import { useThemePageStyle } from "@hlw-uni/mp-vue";
|
|
65
|
+
|
|
66
|
+
const { themePageStyle } = useThemePageStyle();
|
|
67
|
+
</script>
|
|
68
|
+
|
|
69
|
+
<template>
|
|
70
|
+
<hlw-page :style="themePageStyle" title="首页">
|
|
71
|
+
<view class="demo-card">主题演示</view>
|
|
72
|
+
</hlw-page>
|
|
73
|
+
</template>
|
|
74
|
+
|
|
75
|
+
<style scoped lang="scss">
|
|
76
|
+
.demo-card {
|
|
77
|
+
color: var(--primary-color);
|
|
78
|
+
background: var(--primary-light);
|
|
79
|
+
font-size: var(--font-base);
|
|
80
|
+
}
|
|
81
|
+
</style>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### 叠加项目自定义主题变量
|
|
85
|
+
|
|
86
|
+
如果业务项目还需要自己的主题参数，推荐在 `themePageStyle` 的基础上继续追加，而不是直接修改组件库源码。
|
|
87
|
+
|
|
88
|
+
```vue
|
|
89
|
+
<script setup lang="ts">
|
|
90
|
+
import { computed } from "vue";
|
|
91
|
+
import { useThemePageStyle } from "@hlw-uni/mp-vue";
|
|
92
|
+
import { useThemeStore } from "@/store";
|
|
93
|
+
|
|
94
|
+
const { themePageStyle } = useThemePageStyle();
|
|
95
|
+
const themeStore = useThemeStore();
|
|
96
|
+
|
|
97
|
+
const pageStyle = computed(() => {
|
|
98
|
+
return [
|
|
99
|
+
themePageStyle.value,
|
|
100
|
+
`--page-bg: ${themeStore.primaryColor}10`,
|
|
101
|
+
`--card-shadow: 0 12rpx 40rpx ${themeStore.primaryColor}22`,
|
|
102
|
+
`--header-gradient: linear-gradient(135deg, ${themeStore.primaryColor}, #0f172a)`,
|
|
103
|
+
`--brand-text-color: #0f172a`,
|
|
104
|
+
].join(";");
|
|
105
|
+
});
|
|
106
|
+
</script>
|
|
107
|
+
|
|
108
|
+
<template>
|
|
109
|
+
<hlw-page :style="pageStyle" title="首页">
|
|
110
|
+
<view class="hero">项目自定义主题</view>
|
|
111
|
+
</hlw-page>
|
|
112
|
+
</template>
|
|
113
|
+
|
|
114
|
+
<style scoped lang="scss">
|
|
115
|
+
.hero {
|
|
116
|
+
background: var(--header-gradient);
|
|
117
|
+
box-shadow: var(--card-shadow);
|
|
118
|
+
color: var(--brand-text-color);
|
|
119
|
+
}
|
|
120
|
+
</style>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### 推荐做法
|
|
124
|
+
|
|
125
|
+
当项目里有较多业务主题变量时，建议再封装一层自己的组合式函数，例如 `useAppThemeStyle()`，统一输出：
|
|
126
|
+
|
|
127
|
+
- `mp-vue` 基础变量
|
|
128
|
+
- 项目自定义变量
|
|
129
|
+
- 页面级视觉变量
|
|
130
|
+
|
|
131
|
+
这样可以保持组件库主题和业务主题解耦，后续升级 `mp-vue` 时也更稳定。
|
|
132
|
+
|
|
51
133
|
## 组件
|
|
52
134
|
|
|
53
135
|
### HlwAd — 广告组件
|