Commit 0f3a6079b4103f755232648f124b136776a94a41
1 parent
e2795c64
perf(src/packages): 图表地图组件新增返回按钮显示隐藏和自定义颜色和距离
Showing
3 changed files
with
30 additions
and
13 deletions
... | ... | @@ -22,6 +22,24 @@ |
22 | 22 | ></n-color-picker> |
23 | 23 | </SettingItem> |
24 | 24 | </SettingItemBox> |
25 | + <SettingItemBox name="返回图标距离"> | |
26 | + <SettingItem name="距右"> | |
27 | + <n-input-number | |
28 | + v-model:value="optionData.iconDistanceRight" | |
29 | + :min="1" | |
30 | + size="small" | |
31 | + placeholder="请输入" | |
32 | + ></n-input-number> | |
33 | + </SettingItem> | |
34 | + <SettingItem name="距上"> | |
35 | + <n-input-number | |
36 | + v-model:value="optionData.iconDistanceTop" | |
37 | + :min="1" | |
38 | + size="small" | |
39 | + placeholder="请输入" | |
40 | + ></n-input-number> | |
41 | + </SettingItem> | |
42 | + </SettingItemBox> | |
25 | 43 | <SettingItemBox name="区域颜色"> |
26 | 44 | <SettingItem name="0%处颜色"> |
27 | 45 | <n-color-picker | ... | ... |
... | ... | @@ -71,7 +71,8 @@ const option = reactive({ |
71 | 71 | |
72 | 72 | const toolBoxOption = ref({ |
73 | 73 | show: true, |
74 | - right: 20, | |
74 | + right: 110, | |
75 | + top: 20, | |
75 | 76 | feature: { |
76 | 77 | myFullButton: { |
77 | 78 | show: true, |
... | ... | @@ -86,23 +87,19 @@ const toolBoxOption = ref({ |
86 | 87 | }) |
87 | 88 | |
88 | 89 | watch( |
89 | - () => props.chartConfig.option.iconColor, | |
90 | - (newData: string) => { | |
91 | - toolBoxOption.value.feature.myFullButton.iconStyle.color = newData | |
92 | - }, | |
93 | - { | |
94 | - deep: true | |
95 | - } | |
96 | -) | |
97 | -watch( | |
98 | - () => props.chartConfig.option.showIcon, | |
99 | - (newData: boolean) => { | |
100 | - toolBoxOption.value.feature.myFullButton.show = newData | |
90 | + () => props.chartConfig.option, | |
91 | + newData => { | |
92 | + const { iconColor, showIcon, iconDistanceRight, iconDistanceTop } = newData | |
93 | + toolBoxOption.value.feature.myFullButton.show = showIcon | |
94 | + toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor | |
95 | + toolBoxOption.value.right = iconDistanceRight | |
96 | + toolBoxOption.value.top = iconDistanceTop | |
101 | 97 | }, |
102 | 98 | { |
103 | 99 | deep: true |
104 | 100 | } |
105 | 101 | ) |
102 | + | |
106 | 103 | props.chartConfig.option = { |
107 | 104 | ...props.chartConfig.option, |
108 | 105 | ...{ toolbox: toolBoxOption.value } | ... | ... |