Add color configuration items to customize colors

src/components/decoration7/src/main.vue

@@ -4,13 +4,13 @@
       <polyline
         stroke-width="4"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[0]"
         points="10, 0 19, 10 10, 20"
       />
       <polyline
         stroke-width="2"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[1]"
         points="2, 0 11, 10 2, 20"
       />
     </svg>
@@ -19,13 +19,13 @@
       <polyline
         stroke-width="4"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[0]"
         points="11, 0 2, 10 11, 20"
       />
       <polyline
         stroke-width="2"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[1]"
         points="19, 0 10, 10 19, 20"
       />
     </svg>
@@ -33,8 +33,44 @@
 </template>
 
 <script>
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
-  name: 'DvDecoration7'
+  name: 'DvDecoration7',
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data () {
+    return {
+      defaultColor: ['#1dc1f5', '#1dc1f5'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
 }
 </script>