1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
| import { computed, getCurrentInstance, type StyleValue } from "vue";
| import { parseRpx } from "/@/cool/utils";
| import { assign, fromPairs } from "lodash-es";
|
| const styles = [
| {
| key: "padding",
| rpx: true,
| },
| {
| key: "margin",
| rpx: true,
| },
| {
| key: "height",
| rpx: true,
| },
| {
| key: "width",
| rpx: true,
| },
| {
| key: "font-size",
| alias: ["fontSize"],
| rpx: true,
| },
| {
| key: "border-radius",
| alias: ["radius", "borderRadius"],
| rpx: true,
| },
| {
| key: "background-color",
| alias: ["backgroundColor"],
| },
| {
| key: "background",
| },
| {
| key: "custom-style",
| alias: ["customStyle"],
| },
| ];
|
| export function useStyle(data: StyleValue = {}) {
| // 当前组件实例
| const instance = getCurrentInstance();
|
| // 基础样式
| const baseStyle = computed(() => {
| return fromPairs(
| styles
| .map((e) => {
| // keys
| const keys = [e.key, ...(e.alias || [])];
|
| // val
| const val = keys
| .map((k) => {
| // 标签值
| const a = assign({}, instance?.proxy?.$attrs, instance?.proxy?.$props)[
| k
| ];
|
| // 默认值
| const b = (data as any)[k];
|
| // 判定值
| return a !== undefined ? a : b;
| })
| .find((e) => e !== undefined);
|
| // 是否需要 rpx 解析
| return [e.key, e.rpx ? parseRpx(val) : val];
| })
| // 过滤空值
| .filter((e) => e[1] !== undefined)
| );
| });
|
| return {
| baseStyle,
| parseRpx,
| };
| }
|
|
