Commit 06278a78a10e8d8b878a3d7a362396f49f40a66e
1 parent
17e74d96
perf(external/Componse): 移除大标题无用注释和修改title为dataset
Showing
3 changed files
with
10 additions
and
22 deletions
@@ -4,8 +4,8 @@ import { LeftCenterRightHeadAnimatConfig } from './index' | @@ -4,8 +4,8 @@ import { LeftCenterRightHeadAnimatConfig } from './index' | ||
4 | import cloneDeep from 'lodash/cloneDeep' | 4 | import cloneDeep from 'lodash/cloneDeep' |
5 | 5 | ||
6 | export const option = { | 6 | export const option = { |
7 | + dataset: '我是标题', | ||
7 | animat: { | 8 | animat: { |
8 | - text: '我是标题', | ||
9 | colors: ['#00CED1', '#FAD400'], | 9 | colors: ['#00CED1', '#FAD400'], |
10 | x: 0, | 10 | x: 0, |
11 | y: 0, | 11 | y: 0, |
@@ -30,7 +30,7 @@ | @@ -30,7 +30,7 @@ | ||
30 | <collapse-item name="信息" :expanded="true"> | 30 | <collapse-item name="信息" :expanded="true"> |
31 | <setting-item-box name="文字" :alone="true"> | 31 | <setting-item-box name="文字" :alone="true"> |
32 | <setting-item> | 32 | <setting-item> |
33 | - <n-input v-model:value="optionData.animat.text" size="small"></n-input> | 33 | + <n-input v-model:value="optionData.dataset" size="small"></n-input> |
34 | </setting-item> | 34 | </setting-item> |
35 | </setting-item-box> | 35 | </setting-item-box> |
36 | </collapse-item> | 36 | </collapse-item> |
1 | <template> | 1 | <template> |
2 | -<!-- 10 | ||
3 | -0,2 54,2 60,4 75,4 81,6 216,6 225,4 240,4 245.3,2 300,2 | ||
4 | -90,8 210,8 | ||
5 | -20 | ||
6 | -0,4 54,4 60,8 75,8 81,12 216,12 225,8 240,8 245.3,4 300,4 | ||
7 | -90,16 210,16 | ||
8 | -30 | ||
9 | -0,6 54,6 60,12 75,12 81,18 216,18 225,12 240,12 245.3,6 300,6 | ||
10 | -90,24 210,24 | ||
11 | -40 | ||
12 | -0,8 54,8 60,16 75,16 81,24 216,24 225,16 240,16 245.3,8 300,8 --> | ||
13 | -<!-- 200 200 | ||
14 | -60,160 140,160 --> | ||
15 | - | ||
16 | <div class="go-animat"> | 2 | <div class="go-animat"> |
17 | <div class="go-svg" :style="{ marginLeft: animat.x + 'px', marginTop: animat.y + 'px' }"> | 3 | <div class="go-svg" :style="{ marginLeft: animat.x + 'px', marginTop: animat.y + 'px' }"> |
18 | <svg :width="w" :height="h"> | 4 | <svg :width="w" :height="h"> |
19 | <polyline | 5 | <polyline |
20 | fill="transparent" | 6 | fill="transparent" |
21 | stroke-width="3" | 7 | stroke-width="3" |
22 | - :points="`0,${h / 5} ${w / 5.555555555555556},${h / 5} ${w / 5},${h/2.5} ${w / 4},${h/2.5} ${w / 3.703703703703704},${h/1.666666666666667} ${ | ||
23 | - w / 1.388888888888889 | ||
24 | - },${h/1.666666666666667} ${w / 1.333333333333333},${h/2.5} ${w / 1.25},${h/2.5} ${w / 1.219512195121951},${h / 5} ${w},${h / 5}`" | 8 | + :points="`0,${h / 5} ${w / 5.555555555555556},${h / 5} ${w / 5},${h / 2.5} ${w / 4},${h / 2.5} ${ |
9 | + w / 3.703703703703704 | ||
10 | + },${h / 1.666666666666667} ${w / 1.388888888888889},${h / 1.666666666666667} ${w / 1.333333333333333},${ | ||
11 | + h / 2.5 | ||
12 | + } ${w / 1.25},${h / 2.5} ${w / 1.219512195121951},${h / 5} ${w},${h / 5}`" | ||
25 | :stroke="animat.colors[0]" | 13 | :stroke="animat.colors[0]" |
26 | > | 14 | > |
27 | <animate | 15 | <animate |
@@ -40,7 +28,7 @@ | @@ -40,7 +28,7 @@ | ||
40 | <polyline | 28 | <polyline |
41 | fill="transparent" | 29 | fill="transparent" |
42 | stroke-width="2" | 30 | stroke-width="2" |
43 | - :points="`${w / 3.333333333333333},${h/1.25} ${w / 1.428571428571429},${h/1.25}`" | 31 | + :points="`${w / 3.333333333333333},${h / 1.25} ${w / 1.428571428571429},${h / 1.25}`" |
44 | :stroke="animat.colors[1]" | 32 | :stroke="animat.colors[1]" |
45 | > | 33 | > |
46 | <animate | 34 | <animate |
@@ -60,7 +48,7 @@ | @@ -60,7 +48,7 @@ | ||
60 | </div> | 48 | </div> |
61 | <div class="go-text" :style="{ top: animat.textPos.y + '%', left: animat.textPos.x + '%' }"> | 49 | <div class="go-text" :style="{ top: animat.textPos.y + '%', left: animat.textPos.x + '%' }"> |
62 | <n-gradient-text :size="animat.size" :gradient="animat.gradient"> | 50 | <n-gradient-text :size="animat.size" :gradient="animat.gradient"> |
63 | - {{ animat.text }} | 51 | + {{ dataset }} |
64 | </n-gradient-text> | 52 | </n-gradient-text> |
65 | </div> | 53 | </div> |
66 | </div> | 54 | </div> |
@@ -78,7 +66,7 @@ const props = defineProps({ | @@ -78,7 +66,7 @@ const props = defineProps({ | ||
78 | 66 | ||
79 | const { w, h } = toRefs(props.chartConfig.attr) | 67 | const { w, h } = toRefs(props.chartConfig.attr) |
80 | 68 | ||
81 | -const { animat } = toRefs(props.chartConfig.option) | 69 | +const { animat, dataset } = toRefs(props.chartConfig.option) |
82 | </script> | 70 | </script> |
83 | 71 | ||
84 | <style lang="scss" scoped> | 72 | <style lang="scss" scoped> |