ykxiao
/
DemuMesDataV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update dist and lib

This commit is contained in:
JM 2019-12-06 21:07:16 +08:00
parent aeb021e5e4
commit 6876dec1ca
43 changed files with 7026 additions and 3592 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8837
dist/datav.map.vue.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/datav.min.vue.js vendored
View File

File diff suppressed because one or more lines are too long

47
lib/components/borderBox1/src/main.vue
View File

@ -8,36 +8,36 @@
:class="`${item} border`" :class="`${item} border`"
> >
<polygon <polygon
fill="#4fd2dd" :fill="mergedColor[0]"
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63" points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
> >
<animate <animate
attributeName="fill" attributeName="fill"
values="#4fd2dd;#235fa7;#4fd2dd" :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
dur="0.5s" dur="0.5s"
begin="0s" begin="0s"
repeatCount="indefinite" repeatCount="indefinite"
/> />
</polygon> </polygon>
<polygon <polygon
fill="#235fa7" :fill="mergedColor[1]"
points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
> >
<animate <animate
attributeName="fill" attributeName="fill"
values="#235fa7;#4fd2dd;#235fa7" :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
dur="0.5s" dur="0.5s"
begin="0s" begin="0s"
repeatCount="indefinite" repeatCount="indefinite"
/> />
</polygon> </polygon>
<polygon <polygon
fill="#4fd2dd" :fill="mergedColor[0]"
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54" points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
> >
<animate <animate
attributeName="fill" attributeName="fill"
values="#4fd2dd;#235fa7;transparent" :values="`${mergedColor[0]};${mergedColor[1]};transparent`"
dur="1s" dur="1s"
begin="0s" begin="0s"
repeatCount="indefinite" repeatCount="indefinite"
@ -52,12 +52,45 @@
</template> </template>
<script> <script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvBorderBox1', name: 'DvBorderBox1',
props: {
color: {
type: Array,
default: () => ([])
}
},
data () { data () {
return { return {
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'] border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
defaultColor: ['#4fd2dd', '#235fa7'],
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> </script>

1
lib/components/borderBox10/src/main.css
View File

@ -2,7 +2,6 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-shadow: inset 0 0 25px 3px #1d48c4;
border-radius: 6px; border-radius: 6px;
} }
.dv-border-box-10 .border { .dv-border-box-10 .border {

39
lib/components/borderBox10/src/main.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="dv-border-box-10"> <div class="dv-border-box-10" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
<svg <svg
width="150px" width="150px"
height="150px" height="150px"
@ -8,7 +8,7 @@
:class="`${item} border`" :class="`${item} border`"
> >
<polygon <polygon
fill="#d3e1f8" :fill="mergedColor[1]"
points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
/> />
</svg> </svg>
@ -20,12 +20,45 @@
</template> </template>
<script> <script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvBorderBox10', name: 'DvBorderBox10',
props: {
color: {
type: Array,
default: () => ([])
}
},
data () { data () {
return { return {
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'] border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
defaultColor: ['#1d48c4', '#d3e1f8'],
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> </script>

6
lib/components/borderBox11/index.js Normal file
View File

@ -0,0 +1,6 @@
import './src/main.css'
import BorderBox11 from './src/main.vue'
export default function (Vue) {
Vue.component(BorderBox11.name, BorderBox11)
}

21
lib/components/borderBox11/src/main.css Normal file
View File

@ -0,0 +1,21 @@
.dv-border-box-11 {
position: relative;
width: 100%;
height: 100%;
}
.dv-border-box-11 .dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.dv-border-box-11 .dv-border-svg-container polyline {
fill: none;
stroke-width: 1;
}
.dv-border-box-11 .border-box-content {
position: relative;
width: 100%;
height: 100%;
}

268
lib/components/borderBox11/src/main.vue Normal file
View File

@ -0,0 +1,268 @@
<template>
<div class="dv-border-box-11" :ref="ref">
<svg class="dv-border-svg-container" :width="width" :height="height">
<defs>
<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
<feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
<feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
<feFlood :flood-color="mergedColor[1]" result="glowColor" />
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
<feMerge>
<feMergeNode in="softGlowColored"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<polyline
:stroke="mergedColor[0]"
:filter="`url(#${filterId})`"
:points="`
${(width - titleWidth) / 2}, 30
20, 30 7, 50 7, ${50 + (height - 167) / 2}
13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
7, ${140 + (height - 167) / 2} 7, ${height - 27}
20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30
${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52
${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
`"
/>
<polygon
:stroke="mergedColor[0]"
fill="transparent"
:points="`
${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
`"
/>
<polygon
:stroke="mergedColor[0]"
fill="transparent"
:points="`
${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
`"
/>
<polygon
:stroke="mergedColor[0]"
:fill="fade(mergedColor[1] || defaultColor[1], 30)"
:filter="`url(#${filterId})`"
:points="`
${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
`"
/>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="1"
:points="`
${(width - titleWidth) / 2 - 10}, 37 ${(width - titleWidth) / 2 - 31}, 37
${(width - titleWidth) / 2 - 25}, 46 ${(width - titleWidth) / 2 - 4}, 46
`"
>
<animate
attributeName="opacity"
values="1;0.7;1"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="0.7"
:points="`
${(width - titleWidth) / 2 - 40}, 37 ${(width - titleWidth) / 2 - 61}, 37
${(width - titleWidth) / 2 - 55}, 46 ${(width - titleWidth) / 2 - 34}, 46
`"
>
<animate
attributeName="opacity"
values="0.7;0.4;0.7"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="0.5"
:points="`
${(width - titleWidth) / 2 - 70}, 37 ${(width - titleWidth) / 2 - 91}, 37
${(width - titleWidth) / 2 - 85}, 46 ${(width - titleWidth) / 2 - 64}, 46
`"
>
<animate
attributeName="opacity"
values="0.5;0.2;0.5"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="1"
:points="`
${(width + titleWidth) / 2 + 30}, 37 ${(width + titleWidth) / 2 + 9}, 37
${(width + titleWidth) / 2 + 3}, 46 ${(width + titleWidth) / 2 + 24}, 46
`"
>
<animate
attributeName="opacity"
values="1;0.7;1"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="0.7"
:points="`
${(width + titleWidth) / 2 + 60}, 37 ${(width + titleWidth) / 2 + 39}, 37
${(width + titleWidth) / 2 + 33}, 46 ${(width + titleWidth) / 2 + 54}, 46
`"
>
<animate
attributeName="opacity"
values="0.7;0.4;0.7"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<polygon
:filter="`url(#${filterId})`"
:fill="mergedColor[0]"
opacity="0.5"
:points="`
${(width + titleWidth) / 2 + 90}, 37 ${(width + titleWidth) / 2 + 69}, 37
${(width + titleWidth) / 2 + 63}, 46 ${(width + titleWidth) / 2 + 84}, 46
`"
>
<animate
attributeName="opacity"
values="0.5;0.2;0.5"
dur="2s"
begin="0s"
repeatCount="indefinite"
/>
</polygon>
<text
class="dv-border-box-11-title"
:x="`${width / 2}`"
y="32"
fill="#fff"
font-size="18"
text-anchor="middle"
dominant-baseline="middle"
>
{{ title }}
</text>
<polygon
:fill="mergedColor[0]"
:filter="`url(#${filterId})`"
:points="`
7, ${53 + (height - 167) / 2} 11, ${57 + (height - 167) / 2}
11, ${133 + (height - 167) / 2} 7, ${137 + (height - 167) / 2}
`"
/>
<polygon
:fill="mergedColor[0]"
:filter="`url(#${filterId})`"
:points="`
${width - 7}, ${53 + (height - 167) / 2} ${width - 11}, ${57 + (height - 167) / 2}
${width - 11}, ${133 + (height - 167) / 2} ${width - 7}, ${137 + (height - 167) / 2}
`"
/>
</svg>
<div class="border-box-content">
<slot></slot>
</div>
</div>
</template>
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
import { fade } from '@jiaminghi/color'
export default {
name: 'DvBorderBox11',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
},
titleWidth: {
type: Number,
default: 250
},
title: {
type: String,
default: ''
}
},
data () {
const timestamp = Date.now()
return {
ref: 'border-box-11',
filterId: `borderr-box-11-filterId-${timestamp}`,
defaultColor: ['#8aaafb', '#1f33a2'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
},
fade
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

6
lib/components/borderBox12/index.js Normal file
View File

@ -0,0 +1,6 @@
import './src/main.css'
import BorderBox12 from './src/main.vue'
export default function (Vue) {
Vue.component(BorderBox12.name, BorderBox12)
}

17
lib/components/borderBox12/src/main.css Normal file
View File

@ -0,0 +1,17 @@
.dv-border-box-12 {
position: relative;
width: 100%;
height: 100%;
}
.dv-border-box-12 .dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.dv-border-box-12 .border-box-content {
position: relative;
width: 100%;
height: 100%;
}

143
lib/components/borderBox12/src/main.vue Normal file
View File

@ -0,0 +1,143 @@
<template>
<div class="dv-border-box-12" :ref="ref">
<svg class="dv-border-svg-container" :width="width" :height="height">
<defs>
<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
<feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken" />
<feGaussianBlur in="thicken" stdDeviation="2" result="blurred" />
<feFlood :flood-color="fade(mergedColor[1] || defaultColor[1], 70)" result="glowColor">
<animate
attributeName="flood-color"
:values="`
${fade(mergedColor[1] || defaultColor[1], 70)};
${fade(mergedColor[1] || defaultColor[1], 30)};
${fade(mergedColor[1] || defaultColor[1], 70)};
`"
dur="3s"
begin="0s"
repeatCount="indefinite"
/>
</feFlood>
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
<feMerge>
<feMergeNode in="softGlowColored"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path
v-if="width && height"
fill="transparent"
stroke-width="2"
:stroke="mergedColor[0]"
:d="`
M15 5 L ${width - 15} 5 Q ${width - 5} 5, ${width - 5} 15
L ${width - 5} ${height - 15} Q ${width - 5} ${height - 5}, ${width - 15} ${height - 5}
L 15, ${height - 5} Q 5 ${height - 5} 5 ${height - 15} L 5 15
Q 5 5 15 5
`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="mergedColor[1]"
:d="`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="mergedColor[1]"
:d="`M ${width - 20} 5 L ${width - 15} 5 Q ${width - 5} 5 ${width - 5} 15 L ${width - 5} 20`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="mergedColor[1]"
:d="`
M ${width - 20} ${height - 5} L ${width - 15} ${height - 5}
Q ${width - 5} ${height - 5} ${width - 5} ${height - 15}
L ${width - 5} ${height - 20}
`"
/>
<path
stroke-width="2"
fill="transparent"
stroke-linecap="round"
:filter="`url(#${filterId})`"
:stroke="mergedColor[1]"
:d="`
M 20 ${height - 5} L 15 ${height - 5}
Q 5 ${height - 5} 5 ${height - 15}
L 5 ${height - 20}
`"
/>
</svg>
<div class="border-box-content">
<slot></slot>
</div>
</div>
</template>
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
import { fade } from '@jiaminghi/color'
export default {
name: 'DvBorderBox12',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
const timestamp = +new Date()
return {
ref: 'border-box-12',
filterId: `borderr-box-12-filterId-${timestamp}`,
defaultColor: ['#2e6099', '#7ce7fd'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
},
fade
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

6
lib/components/borderBox13/index.js Normal file
View File

@ -0,0 +1,6 @@
import './src/main.css'
import BorderBox13 from './src/main.vue'
export default function (Vue) {
Vue.component(BorderBox13.name, BorderBox13)
}

17
lib/components/borderBox13/src/main.css Normal file
View File

@ -0,0 +1,17 @@
.dv-border-box-13 {
position: relative;
width: 100%;
height: 100%;
}
.dv-border-box-13 .dv-border-svg-container {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.dv-border-box-13 .border-box-content {
position: relative;
width: 100%;
height: 100%;
}

89
lib/components/borderBox13/src/main.vue Normal file
View File

@ -0,0 +1,89 @@
<template>
<div class="dv-border-box-13" :ref="ref">
<svg class="dv-border-svg-container" :width="width" :height="height">
<path
fill="transparent"
:stroke="mergedColor[0]"
:d="`
M 5 20 L 5 10 L 12 3 L 60 3 L 68 10
L ${width - 20} 10 L ${width - 5} 25
L ${width - 5} ${height - 5} L 20 ${height - 5}
L 5 ${height - 20} L 5 20
`"
/>
<path
fill="transparent"
stroke-width="3"
stroke-linecap="round"
stroke-dasharray="10, 5"
:stroke="mergedColor[0]"
:d="`M 16 9 L 61 9`"
/>
<path
fill="transparent"
:stroke="mergedColor[1]"
:d="`M 5 20 L 5 10 L 12 3 L 60 3 L 68 10`"
/>
<path
fill="transparent"
:stroke="mergedColor[1]"
:d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${width - 30} ${height - 5}`"
/>
</svg>
<div class="border-box-content">
<slot></slot>
</div>
</div>
</template>
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
name: 'DvBorderBox13',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
const timestamp = +new Date()
return {
ref: 'border-box-13',
defaultColor: ['#6586ec', '#2cf7fe'],
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>

9
lib/components/borderBox2/src/main.css
View File

@ -14,15 +14,6 @@
fill: none; fill: none;
stroke-width: 1; stroke-width: 1;
} }
.dv-border-box-2 .dv-border-svg-container circle {
fill: #fff;
}
.dv-border-box-2 .dv-bb2-line1 {
stroke: #fff;
}
.dv-border-box-2 .dv-bb2-line2 {
stroke: rgba(255, 255, 255, 0.6);
}
.dv-border-box-2 .border-box-content { .dv-border-box-2 .border-box-content {
position: relative; position: relative;
width: 100%; width: 100%;

55
lib/components/borderBox2/src/main.vue
View File

@ -1,14 +1,18 @@
<template> <template>
<div class="dv-border-box-2" :ref="ref"> <div class="dv-border-box-2" :ref="ref">
<svg class="dv-border-svg-container" :width="width" :height="height"> <svg class="dv-border-svg-container" :width="width" :height="height">
<polyline class="dv-bb2-line1" <polyline
:points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`" /> :stroke="mergedColor[0]"
<polyline class="dv-bb2-line2" :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
:points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`" /> />
<circle cx="11" cy="11" r="1" /> <polyline
<circle :cx="width - 11" cy="11" r="1" /> :stroke="mergedColor[1]"
<circle :cx="width - 11" :cy="height - 11" r="1" /> :points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`"
<circle cx="11" :cy="height - 11" r="1" /> />
<circle :fill="mergedColor[0]" cx="11" cy="11" r="1" />
<circle :fill="mergedColor[0]" :cx="width - 11" cy="11" r="1" />
<circle :fill="mergedColor[0]" :cx="width - 11" :cy="height - 11" r="1" />
<circle :fill="mergedColor[0]" cx="11" :cy="height - 11" r="1" />
</svg> </svg>
<div class="border-box-content"> <div class="border-box-content">
@ -20,13 +24,46 @@
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvBorderBox2', name: 'DvBorderBox2',
mixins: [autoResize], mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () { data () {
return { return {
ref: 'border-box-2' ref: 'border-box-2',
defaultColor: ['#fff', 'rgba(255, 255, 255, 0.6)'],
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> </script>

1
lib/components/borderBox3/src/main.css
View File

@ -12,7 +12,6 @@
} }
.dv-border-box-3 .dv-border-svg-container polyline { .dv-border-box-3 .dv-border-svg-container polyline {
fill: none; fill: none;
stroke: #2862b7;
} }
.dv-border-box-3 .dv-bb3-line1 { .dv-border-box-3 .dv-bb3-line1 {
stroke-width: 3; stroke-width: 3;

51
lib/components/borderBox3/src/main.vue
View File

@ -2,13 +2,21 @@
<div class="dv-border-box-3" :ref="ref"> <div class="dv-border-box-3" :ref="ref">
<svg class="dv-border-svg-container" :width="width" :height="height"> <svg class="dv-border-svg-container" :width="width" :height="height">
<polyline class="dv-bb3-line1" <polyline class="dv-bb3-line1"
:points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`" /> :stroke="mergedColor[0]"
:points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
/>
<polyline class="dv-bb3-line2" <polyline class="dv-bb3-line2"
:points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`" /> :stroke="mergedColor[1]"
:points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`"
/>
<polyline class="dv-bb3-line2" <polyline class="dv-bb3-line2"
:points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`" /> :stroke="mergedColor[1]"
:points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`"
/>
<polyline class="dv-bb3-line2" <polyline class="dv-bb3-line2"
:points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`" /> :stroke="mergedColor[1]"
:points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`"
/>
</svg> </svg>
<div class="border-box-content"> <div class="border-box-content">
@ -20,13 +28,46 @@
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvBorderBox3', name: 'DvBorderBox3',
mixins: [autoResize], mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () { data () {
return { return {
ref: 'border-box-3' ref: 'border-box-3',
defaultColor: ['#2862b7', '#2862b7'],
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> </script>

16
lib/components/borderBox4/src/main.css
View File

@ -16,12 +16,6 @@
.dv-border-box-4 .dv-border-svg-container polyline { .dv-border-box-4 .dv-border-svg-container polyline {
fill: none; fill: none;
} }
.dv-border-box-4 .sred {
stroke: red;
}
.dv-border-box-4 .sblue {
stroke: rgba(0, 0, 255, 0.8);
}
.dv-border-box-4 .sw1 { .dv-border-box-4 .sw1 {
stroke-width: 1; stroke-width: 1;
} }
@ -30,48 +24,38 @@
stroke-linecap: round; stroke-linecap: round;
} }
.dv-border-box-4 .dv-bb4-line-1 { .dv-border-box-4 .dv-bb4-line-1 {
stroke: red;
stroke-width: 1; stroke-width: 1;
} }
.dv-border-box-4 .dv-bb4-line-2 { .dv-border-box-4 .dv-bb4-line-2 {
stroke: rgba(0, 0, 255, 0.8);
stroke-width: 1; stroke-width: 1;
} }
.dv-border-box-4 .dv-bb4-line-3 { .dv-border-box-4 .dv-bb4-line-3 {
stroke: red;
stroke-width: 3px; stroke-width: 3px;
stroke-linecap: round; stroke-linecap: round;
} }
.dv-border-box-4 .dv-bb4-line-4 { .dv-border-box-4 .dv-bb4-line-4 {
stroke: red;
stroke-width: 3px; stroke-width: 3px;
stroke-linecap: round; stroke-linecap: round;
} }
.dv-border-box-4 .dv-bb4-line-5 { .dv-border-box-4 .dv-bb4-line-5 {
stroke: red;
stroke-width: 1; stroke-width: 1;
} }
.dv-border-box-4 .dv-bb4-line-6 { .dv-border-box-4 .dv-bb4-line-6 {
stroke: rgba(0, 0, 255, 0.8);
stroke-width: 1; stroke-width: 1;
} }
.dv-border-box-4 .dv-bb4-line-7 { .dv-border-box-4 .dv-bb4-line-7 {
stroke: rgba(0, 0, 255, 0.8);
stroke-width: 1; stroke-width: 1;
} }
.dv-border-box-4 .dv-bb4-line-8 { .dv-border-box-4 .dv-bb4-line-8 {
stroke: rgba(0, 0, 255, 0.8);
stroke-width: 3px; stroke-width: 3px;
stroke-linecap: round; stroke-linecap: round;
} }
.dv-border-box-4 .dv-bb4-line-9 { .dv-border-box-4 .dv-bb4-line-9 {
stroke: red;
stroke-width: 3px; stroke-width: 3px;
stroke-linecap: round; stroke-linecap: round;
stroke-dasharray: 100 250; stroke-dasharray: 100 250;
} }
.dv-border-box-4 .dv-bb4-line-10 { .dv-border-box-4 .dv-bb4-line-10 {
stroke: rgba(0, 0, 255, 0.8);
stroke-width: 1; stroke-width: 1;
stroke-dasharray: 80 270; stroke-dasharray: 80 270;
} }

72
lib/components/borderBox4/src/main.vue
View File

@ -1,18 +1,25 @@
<template> <template>
<div class="dv-border-box-4" :ref="ref"> <div class="dv-border-box-4" :ref="ref">
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height"> <svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
<polyline class="dv-bb4-line-1" :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35} <polyline class="dv-bb4-line-1"
10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"/> :stroke="mergedColor[0]"
<polyline class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23} :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
14, ${height - 100}`" /> 10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"
<polyline class="dv-bb4-line-3" :points="`7, ${height - 40} 7, ${height - 75}`" /> />
<polyline class="dv-bb4-line-4" :points="`28, 24 13, 41 13, 64`" /> <polyline
<polyline class="dv-bb4-line-5" :points="`5, 45 5, 140`" /> :stroke="mergedColor[1]"
<polyline class="dv-bb4-line-6" :points="`14, 75 14, 180`" /> class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
<polyline class="dv-bb4-line-7" :points="`55, 11 147, 11 167, 26 250, 26`" /> 14, ${height - 100}`"
<polyline class="dv-bb4-line-8" :points="`158, 5 173, 16`" /> />
<polyline class="dv-bb4-line-9" :points="`200, 17 ${width - 10}, 17`" />
<polyline class="dv-bb4-line-10" :points="`385, 17 ${width - 10}, 17`" /> <polyline class="dv-bb4-line-3" :stroke="mergedColor[0]" :points="`7, ${height - 40} 7, ${height - 75}`" />
<polyline class="dv-bb4-line-4" :stroke="mergedColor[0]" :points="`28, 24 13, 41 13, 64`" />
<polyline class="dv-bb4-line-5" :stroke="mergedColor[0]" :points="`5, 45 5, 140`" />
<polyline class="dv-bb4-line-6" :stroke="mergedColor[1]" :points="`14, 75 14, 180`" />
<polyline class="dv-bb4-line-7" :stroke="mergedColor[1]" :points="`55, 11 147, 11 167, 26 250, 26`" />
<polyline class="dv-bb4-line-8" :stroke="mergedColor[1]" :points="`158, 5 173, 16`" />
<polyline class="dv-bb4-line-9" :stroke="mergedColor[0]" :points="`200, 17 ${width - 10}, 17`" />
<polyline class="dv-bb4-line-10" :stroke="mergedColor[1]" :points="`385, 17 ${width - 10}, 17`" />
</svg> </svg>
<div class="border-box-content"> <div class="border-box-content">
@ -24,19 +31,50 @@
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvBorderBox4', name: 'DvBorderBox4',
mixins: [autoResize], mixins: [autoResize],
data () {
return {
ref: 'border-box-4'
}
},
props: { props: {
color: {
type: Array,
default: () => ([])
},
reverse: { reverse: {
type: Boolean, type: Boolean,
default: false default: false
} }
},
data () {
return {
ref: 'border-box-4',
defaultColor: ['red', 'rgba(0,0,255,0.8)'],
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> </script>

9
lib/components/borderBox5/src/main.css
View File

@ -16,22 +16,17 @@
.dv-border-box-5 .dv-svg-container polyline { .dv-border-box-5 .dv-svg-container polyline {
fill: none; fill: none;
} }
.dv-border-box-5 .dv-bb5-line-1 { .dv-border-box-5 .dv-bb5-line-1,
stroke-width: 1;
stroke: rgba(255, 255, 255, 0.35);
}
.dv-border-box-5 .dv-bb5-line-2 { .dv-border-box-5 .dv-bb5-line-2 {
stroke: rgba(255, 255, 255, 0.2); stroke-width: 1;
} }
.dv-border-box-5 .dv-bb5-line-3, .dv-border-box-5 .dv-bb5-line-3,
.dv-border-box-5 .dv-bb5-line-6 { .dv-border-box-5 .dv-bb5-line-6 {
stroke-width: 5; stroke-width: 5;
stroke: rgba(255, 255, 255, 0.15);
} }
.dv-border-box-5 .dv-bb5-line-4, .dv-border-box-5 .dv-bb5-line-4,
.dv-border-box-5 .dv-bb5-line-5 { .dv-border-box-5 .dv-bb5-line-5 {
stroke-width: 2; stroke-width: 2;
stroke: rgba(255, 255, 255, 0.15);
} }
.dv-border-box-5 .border-box-content { .dv-border-box-5 .border-box-content {
position: relative; position: relative;

65
lib/components/borderBox5/src/main.vue
View File

@ -1,14 +1,22 @@
<template> <template>
<div class="dv-border-box-5" :ref="ref"> <div class="dv-border-box-5" :ref="ref">
<svg :class="`dv-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height"> <svg :class="`dv-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
<polyline class="dv-bb5-line-1" :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100} <polyline
${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`" /> class="dv-bb5-line-1"
<polyline class="dv-bb5-line-2" :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60} :stroke="mergedColor[0]"
${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`" /> :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
<polyline class="dv-bb5-line-3" :points="`50, 13 ${width - 35}, 13`" /> ${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`"
<polyline class="dv-bb5-line-4" :points="`15, 20 ${width - 35}, 20`" /> />
<polyline class="dv-bb5-line-5" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" /> <polyline
<polyline class="dv-bb5-line-6" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" /> class="dv-bb5-line-2"
:stroke="mergedColor[1]"
:points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`"
/>
<polyline class="dv-bb5-line-3" :stroke="mergedColor[1]" :points="`50, 13 ${width - 35}, 13`" />
<polyline class="dv-bb5-line-4" :stroke="mergedColor[1]" :points="`15, 20 ${width - 35}, 20`" />
<polyline class="dv-bb5-line-5" :stroke="mergedColor[1]" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
<polyline class="dv-bb5-line-6" :stroke="mergedColor[1]" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
</svg> </svg>
<div class="border-box-content"> <div class="border-box-content">
@ -20,19 +28,50 @@
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvBorderBox5', name: 'DvBorderBox5',
mixins: [autoResize], mixins: [autoResize],
data () {
return {
ref: 'border-box-5'
}
},
props: { props: {
color: {
type: Array,
default: () => ([])
},
reverse: { reverse: {
type: Boolean, type: Boolean,
default: false default: false
} }
},
data () {
return {
ref: 'border-box-5',
defaultColor: ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)'],
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> </script>

4
lib/components/borderBox6/src/main.css
View File

@ -10,13 +10,9 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.dv-border-box-6 .dv-svg-container circle {
fill: gray;
}
.dv-border-box-6 .dv-svg-container polyline { .dv-border-box-6 .dv-svg-container polyline {
fill: none; fill: none;
stroke-width: 1; stroke-width: 1;
stroke: rgba(255, 255, 255, 0.35);
} }
.dv-border-box-6 .border-box-content { .dv-border-box-6 .border-box-content {
position: relative; position: relative;

67
lib/components/borderBox6/src/main.vue
View File

@ -1,22 +1,22 @@
<template> <template>
<div class="dv-border-box-6" :ref="ref"> <div class="dv-border-box-6" :ref="ref">
<svg class="dv-svg-container" :width="width" :height="height"> <svg class="dv-svg-container" :width="width" :height="height">
<circle cx="5" cy="5" r="2"/> <circle :fill="mergedColor[1]" cx="5" cy="5" r="2"/>
<circle :cx="width - 5" cy="5" r="2" /> <circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
<circle :cx="width - 5" :cy="height - 5" r="2" /> <circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
<circle cx="5" :cy="height - 5" r="2" /> <circle :fill="mergedColor[1]" cx="5" :cy="height - 5" r="2" />
<polyline :points="`10, 4 ${width - 10}, 4`" /> <polyline :stroke="mergedColor[0]" :points="`10, 4 ${width - 10}, 4`" />
<polyline :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" /> <polyline :stroke="mergedColor[0]" :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
<polyline :points="`5, 70 5, ${height - 70}`" /> <polyline :stroke="mergedColor[0]" :points="`5, 70 5, ${height - 70}`" />
<polyline :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" /> <polyline :stroke="mergedColor[0]" :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
<polyline :points="`3, 10, 3, 50`" /> <polyline :stroke="mergedColor[0]" :points="`3, 10, 3, 50`" />
<polyline :points="`7, 30 7, 80`" /> <polyline :stroke="mergedColor[0]" :points="`7, 30 7, 80`" />
<polyline :points="`${width - 3}, 10 ${width - 3}, 50`" /> <polyline :stroke="mergedColor[0]" :points="`${width - 3}, 10 ${width - 3}, 50`" />
<polyline :points="`${width - 7}, 30 ${width - 7}, 80`" /> <polyline :stroke="mergedColor[0]" :points="`${width - 7}, 30 ${width - 7}, 80`" />
<polyline :points="`3, ${height - 10} 3, ${height - 50}`" /> <polyline :stroke="mergedColor[0]" :points="`3, ${height - 10} 3, ${height - 50}`" />
<polyline :points="`7, ${height - 30} 7, ${height - 80}`" /> <polyline :stroke="mergedColor[0]" :points="`7, ${height - 30} 7, ${height - 80}`" />
<polyline :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" /> <polyline :stroke="mergedColor[0]" :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
<polyline :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" /> <polyline :stroke="mergedColor[0]" :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
</svg> </svg>
<div class="border-box-content"> <div class="border-box-content">
@ -28,13 +28,46 @@
<script> <script>
import autoResize from '../../../mixin/autoResize.js' import autoResize from '../../../mixin/autoResize.js'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvBorderBox6', name: 'DvBorderBox6',
mixins: [autoResize], mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () { data () {
return { return {
ref: 'border-box-6' ref: 'border-box-6',
defaultColor: ['rgba(255, 255, 255, 0.35)', 'gray'],
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> </script>

4
lib/components/borderBox7/src/main.css
View File

@ -2,8 +2,6 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-shadow: inset 0 0 40px rgba(128, 128, 128, 0.3);
border: 1px solid rgba(128, 128, 128, 0.3);
} }
.dv-border-box-7 .dv-svg-container { .dv-border-box-7 .dv-svg-container {
position: absolute; position: absolute;
@ -17,11 +15,9 @@
stroke-linecap: round; stroke-linecap: round;
} }
.dv-border-box-7 .dv-bb7-line-width-2 { .dv-border-box-7 .dv-bb7-line-width-2 {
stroke: rgba(128, 128, 128, 0.3);
stroke-width: 2; stroke-width: 2;
} }
.dv-border-box-7 .dv-bb7-line-width-5 { .dv-border-box-7 .dv-bb7-line-width-5 {
stroke: rgba(128, 128, 128, 0.5);
stroke-width: 5; stroke-width: 5;
} }
.dv-border-box-7 .border-box-content { .dv-border-box-7 .border-box-content {

62
lib/components/borderBox7/src/main.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="dv-border-box-7" :ref="ref">
<svg class="dv-svg-container" :width="width" :height="height">
<polyline class="dv-bb7-line-width-2" :points="`0, 25 0, 0 25, 0`" />
<polyline class="dv-bb7-line-width-2" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
<polyline class="dv-bb7-line-width-2" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
<polyline class="dv-bb7-line-width-2" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
<polyline class="dv-bb7-line-width-5" :points="`0, 10 0, 0 10, 0`" /> <template>
<polyline class="dv-bb7-line-width-5" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" /> <div
<polyline class="dv-bb7-line-width-5" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" /> class="dv-border-box-7"
<polyline class="dv-bb7-line-width-5" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" /> :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}`"
:ref="ref"
>
<svg class="dv-svg-container" :width="width" :height="height">
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, 10 0, 0 10, 0`" />
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
</svg> </svg>
<div class="border-box-content"> <div class="border-box-content">
@ -21,13 +26,46 @@
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvBorderBox7', name: 'DvBorderBox7',
mixins: [autoResize], mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () { data () {
return { return {
ref: 'border-box-7' ref: 'border-box-7',
defaultColor: ['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)'],
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> </script>

47
lib/components/borderBox8/src/main.vue
View File

@ -24,7 +24,7 @@
<mask :id="mask"> <mask :id="mask">
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`"> <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
<animateMotion <animateMotion
dur="3s" :dur="`${dur}s`"
:path="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`" :path="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
rotate="auto" rotate="auto"
repeatCount="indefinite" repeatCount="indefinite"
@ -34,13 +34,13 @@
</defs> </defs>
<use <use
stroke="#235fa7" :stroke="mergedColor[0]"
stroke-width="1" stroke-width="1"
:xlink:href="`#${path}`" :xlink:href="`#${path}`"
/> />
<use <use
stroke="#4fd2dd" :stroke="mergedColor[1]"
stroke-width="3" stroke-width="3"
:xlink:href="`#${path}`" :xlink:href="`#${path}`"
:mask="`url(#${mask})`" :mask="`url(#${mask})`"
@ -49,7 +49,7 @@
attributeName="stroke-dasharray" attributeName="stroke-dasharray"
:from="`0, ${length}`" :from="`0, ${length}`"
:to="`${length}, 0`" :to="`${length}, 0`"
dur="3s" :dur="`${dur}s`"
repeatCount="indefinite" repeatCount="indefinite"
/> />
</use> </use>
@ -64,16 +64,34 @@
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvBorderBox8', name: 'DvBorderBox8',
mixins: [autoResize], mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
},
dur: {
type: Number,
default: 3
}
},
data () { data () {
const timestamp = Date.now() const timestamp = Date.now()
return { return {
ref: 'border-box-8', ref: 'border-box-8',
path: `border-box-8-path-${timestamp}`, path: `border-box-8-path-${timestamp}`,
gradient: `border-box-8-gradient-${timestamp}`, gradient: `border-box-8-gradient-${timestamp}`,
mask: `border-box-8-mask-${timestamp}` mask: `border-box-8-mask-${timestamp}`,
defaultColor: ['#235fa7', '#4fd2dd'],
mergedColor: []
} }
}, },
computed: { computed: {
@ -82,6 +100,25 @@ export default {
return (width + height - 5) * 2 return (width + height - 5) * 2
} }
},
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> </script>

71
lib/components/borderBox9/src/main.vue
View File

@ -3,8 +3,40 @@
<svg class="dv-svg-container" :width="width" :height="height"> <svg class="dv-svg-container" :width="width" :height="height">
<defs> <defs>
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%"> <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#11eefd" /> <animate
<stop offset="100%" stop-color="#0078d2" /> attributeName="x1"
values="0%;100%;0%"
dur="10s"
begin="0s"
repeatCount="indefinite"
/>
<animate
attributeName="x2"
values="100%;0%;100%"
dur="10s"
begin="0s"
repeatCount="indefinite"
/>
<stop offset="0%" :stop-color="mergedColor[0]">
<animate
attributeName="stop-color"
:values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
dur="10s"
begin="0s"
repeatCount="indefinite"
/>
</stop>
<stop offset="100%" :stop-color="mergedColor[1]">
<animate
attributeName="stop-color"
:values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
dur="10s"
begin="0s"
repeatCount="indefinite"
/>
</stop>
</linearGradient> </linearGradient>
<mask :id="maskId"> <mask :id="maskId">
@ -85,17 +117,50 @@
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvBorderBox9', name: 'DvBorderBox9',
mixins: [autoResize], mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () { data () {
const timestamp = Date.now() const timestamp = Date.now()
return { return {
ref: 'border-box-9', ref: 'border-box-9',
gradientId: `border-box-9-gradient-${timestamp}`, gradientId: `border-box-9-gradient-${timestamp}`,
maskId: `border-box-9-mask-${timestamp}` maskId: `border-box-9-mask-${timestamp}`,
defaultColor: ['#11eefd', '#0078d2'],
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> </script>

41
lib/components/decoration1/src/main.vue
View File

@ -8,7 +8,7 @@
<rect <rect
v-if="Math.random() > 0.6" v-if="Math.random() > 0.6"
:key="i" :key="i"
fill="#fff" :fill="mergedColor[0]"
:x="point[0] - halfPointSideLength" :x="point[0] - halfPointSideLength"
:y="point[1] - halfPointSideLength" :y="point[1] - halfPointSideLength"
:width="pointSideLength" :width="pointSideLength"
@ -17,7 +17,7 @@
<animate <animate
v-if="Math.random() > 0.6" v-if="Math.random() > 0.6"
attributeName="fill" attributeName="fill"
values="#fff;transparent" :values="`${mergedColor[0]};transparent`"
dur="1s" dur="1s"
:begin="Math.random() * 2" :begin="Math.random() * 2"
repeatCount="indefinite" repeatCount="indefinite"
@ -27,7 +27,7 @@
<rect <rect
v-if="rects[0]" v-if="rects[0]"
fill="#0de7c2" :fill="mergedColor[1]"
:x="rects[0][0] - pointSideLength" :x="rects[0][0] - pointSideLength"
:y="rects[0][1] - pointSideLength" :y="rects[0][1] - pointSideLength"
:width="pointSideLength * 2" :width="pointSideLength * 2"
@ -61,7 +61,7 @@
<rect <rect
v-if="rects[1]" v-if="rects[1]"
fill="#0de7c2" :fill="mergedColor[1]"
:x="rects[1][0] - 40" :x="rects[1][0] - 40"
:y="rects[1][1] - pointSideLength" :y="rects[1][1] - pointSideLength"
:width="40" :width="40"
@ -87,9 +87,19 @@
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvDecoration1', name: 'DvDecoration1',
mixins: [autoResize], mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () { data () {
const pointSideLength = 2.5 const pointSideLength = 2.5
@ -108,7 +118,18 @@ export default {
points: [], points: [],
rects: [] rects: [],
defaultColor: ['#fff', '#0de7c2'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
} }
}, },
methods: { methods: {
@ -160,7 +181,17 @@ export default {
const { calcSVGData } = this const { calcSVGData } = this
calcSVGData() calcSVGData()
},
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
} }
},
mounted () {
const { mergeColor } = this
mergeColor()
} }
} }
</script> </script>

65
lib/components/decoration10/src/main.vue
View File

@ -2,13 +2,13 @@
<div class="dv-decoration-10" :ref="ref"> <div class="dv-decoration-10" :ref="ref">
<svg :width="width" :height="height"> <svg :width="width" :height="height">
<polyline <polyline
stroke="rgba(0, 194, 255, 0.3)" :stroke="mergedColor[1]"
stroke-width="2" stroke-width="2"
:points="`0, ${height / 2} ${width}, ${height / 2}`" :points="`0, ${height / 2} ${width}, ${height / 2}`"
/> />
<polyline <polyline
stroke="rgba(0, 194, 255, 1)" :stroke="mergedColor[0]"
stroke-width="2" stroke-width="2"
:points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`" :points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`"
:stroke-dasharray="`0, ${width * 0.2}`" :stroke-dasharray="`0, ${width * 0.2}`"
@ -32,7 +32,7 @@
</polyline> </polyline>
<polyline <polyline
stroke="rgba(0, 194, 255, 1)" :stroke="mergedColor[0]"
stroke-width="2" stroke-width="2"
:points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`" :points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`"
:stroke-dasharray="`0, ${width * 0.6}`" :stroke-dasharray="`0, ${width * 0.6}`"
@ -55,7 +55,7 @@
</polyline> </polyline>
<polyline <polyline
stroke="rgba(0, 194, 255, 1)" :stroke="mergedColor[0]"
stroke-width="2" stroke-width="2"
:points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`" :points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`"
:stroke-dasharray="`0, ${width * 0.2}`" :stroke-dasharray="`0, ${width * 0.2}`"
@ -77,65 +77,65 @@
/> />
</polyline> </polyline>
<circle cx="2" :cy="height / 2" r="2" fill="#03709f"> <circle cx="2" :cy="height / 2" r="2" :fill="mergedColor[1]">
<animate <animate
:id="animationId1" :id="animationId1"
attributeName="fill" attributeName="fill"
values="#03709f;#00c2ff" :values="`${mergedColor[1]};${mergedColor[0]}`"
:begin="`0s;${animationId7}.end`" :begin="`0s;${animationId7}.end`"
dur="0.3s" dur="0.3s"
fill="freeze" fill="freeze"
/> />
</circle> </circle>
<circle :cx="width * 0.2" :cy="height / 2" r="2" fill="#03709f"> <circle :cx="width * 0.2" :cy="height / 2" r="2" :fill="mergedColor[1]">
<animate <animate
:id="animationId3" :id="animationId3"
attributeName="fill" attributeName="fill"
values="#03709f;#00c2ff" :values="`${mergedColor[1]};${mergedColor[0]}`"
:begin="`${animationId2}.end`" :begin="`${animationId2}.end`"
dur="0.3s" dur="0.3s"
fill="freeze" fill="freeze"
/> />
<animate <animate
attributeName="fill" attributeName="fill"
values="#03709f;#03709f" :values="`${mergedColor[1]};${mergedColor[1]}`"
dur="0.01s" dur="0.01s"
:begin="`${animationId7}.end`" :begin="`${animationId7}.end`"
fill="freeze" fill="freeze"
/> />
</circle> </circle>
<circle :cx="width * 0.8" :cy="height / 2" r="2" fill="#03709f"> <circle :cx="width * 0.8" :cy="height / 2" r="2" :fill="mergedColor[1]">
<animate <animate
:id="animationId5" :id="animationId5"
attributeName="fill" attributeName="fill"
values="#03709f;#00c2ff" :values="`${mergedColor[1]};${mergedColor[0]}`"
:begin="`${animationId4}.end`" :begin="`${animationId4}.end`"
dur="0.3s" dur="0.3s"
fill="freeze" fill="freeze"
/> />
<animate <animate
attributeName="fill" attributeName="fill"
values="#03709f;#03709f" :values="`${mergedColor[1]};${mergedColor[1]}`"
dur="0.01s" dur="0.01s"
:begin="`${animationId7}.end`" :begin="`${animationId7}.end`"
fill="freeze" fill="freeze"
/> />
</circle> </circle>
<circle :cx="width - 2" :cy="height / 2" r="2" fill="#03709f"> <circle :cx="width - 2" :cy="height / 2" r="2" :fill="mergedColor[1]">
<animate <animate
:id="animationId7" :id="animationId7"
attributeName="fill" attributeName="fill"
values="#03709f;#00c2ff" :values="`${mergedColor[1]};${mergedColor[0]}`"
:begin="`${animationId6}.end`" :begin="`${animationId6}.end`"
dur="0.3s" dur="0.3s"
fill="freeze" fill="freeze"
/> />
<animate <animate
attributeName="fill" attributeName="fill"
values="#03709f;#03709f" :values="`${mergedColor[1]};${mergedColor[1]}`"
dur="0.01s" dur="0.01s"
:begin="`${animationId7}.end`" :begin="`${animationId7}.end`"
fill="freeze" fill="freeze"
@ -148,9 +148,19 @@
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvDecoration10', name: 'DvDecoration10',
mixins: [autoResize], mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () { data () {
const timestamp = Date.now() const timestamp = Date.now()
return { return {
@ -162,8 +172,31 @@ export default {
animationId4: `d10ani4${timestamp}`, animationId4: `d10ani4${timestamp}`,
animationId5: `d10ani5${timestamp}`, animationId5: `d10ani5${timestamp}`,
animationId6: `d10ani6${timestamp}`, animationId6: `d10ani6${timestamp}`,
animationId7: `d10ani7${timestamp}` animationId7: `d10ani7${timestamp}`,
defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
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> </script>

6
lib/components/decoration11/index.js Normal file
View File

@ -0,0 +1,6 @@
import './src/main.css'
import Decoration11 from './src/main.vue'
export default function (Vue) {
Vue.component(Decoration11.name, Decoration11)
}

16
lib/components/decoration11/src/main.css Normal file
View File

@ -0,0 +1,16 @@
.dv-decoration-11 {
position: relative;
width: 100%;
height: 100%;
display: flex;
}
.dv-decoration-11 .decoration-content {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

105
lib/components/decoration11/src/main.vue Normal file
View File

@ -0,0 +1,105 @@
<template>
<div class="dv-decoration-11" :ref="ref">
<svg :width="width" :height="height">
<polygon
:fill="fade(mergedColor[1] || defaultColor[1], 10)"
:stroke="mergedColor[1]"
:points="`20 10, 25 4, 55 4 60 10`"
/>
<polygon
:fill="fade(mergedColor[1] || defaultColor[1], 10)"
:stroke="mergedColor[1]"
:points="`20 ${height - 10}, 25 ${height - 4}, 55 ${height - 4} 60 ${height - 10}`"
/>
<polygon
:fill="fade(mergedColor[1] || defaultColor[1], 10)"
:stroke="mergedColor[1]"
:points="`${width - 20} 10, ${width - 25} 4, ${width - 55} 4 ${width - 60} 10`"
/>
<polygon
:fill="fade(mergedColor[1] || defaultColor[1], 10)"
:stroke="mergedColor[1]"
:points="`${width - 20} ${height - 10}, ${width - 25} ${height - 4}, ${width - 55} ${height - 4} ${width - 60} ${height - 10}`"
/>
<polygon
:fill="fade(mergedColor[0] || defaultColor[0], 20)"
:stroke="mergedColor[0]"
:points="`
20 10, 5 ${height / 2} 20 ${height - 10}
${width - 20} ${height - 10} ${width - 5} ${height / 2} ${width - 20} 10
`"
/>
<polyline
fill="transparent"
:stroke="fade(mergedColor[0] || defaultColor[0], 70)"
:points="`25 18, 15 ${height / 2} 25 ${height - 18}`"
/>
<polyline
fill="transparent"
:stroke="fade(mergedColor[0] || defaultColor[0], 70)"
:points="`${width - 25} 18, ${width - 15} ${height / 2} ${width - 25} ${height - 18}`"
/>
</svg>
<div class="decoration-content">
<slot></slot>
</div>
</div>
</template>
<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
import { fade } from '@jiaminghi/color'
export default {
name: 'DvDecoration11',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
const timestamp = Date.now()
return {
ref: 'decoration-11',
defaultColor: ['#1a98fc', '#2cf7fe'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
}
},
methods: {
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
},
fade
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

33
lib/components/decoration2/src/main.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="dv-decoration-2" :ref="ref"> <div class="dv-decoration-2" :ref="ref">
<svg :width="`${width}px`" :height="`${height}px`"> <svg :width="`${width}px`" :height="`${height}px`">
<rect :x="x" :y="y" :width="w" :height="h" fill="#3faacb"> <rect :x="x" :y="y" :width="w" :height="h" :fill="mergedColor[0]">
<animate <animate
:attributeName="reverse ? 'height' : 'width'" :attributeName="reverse ? 'height' : 'width'"
from="0" from="0"
@ -14,7 +14,7 @@
/> />
</rect> </rect>
<rect :x="x" :y="y" width="1" height="1" fill="#fff"> <rect :x="x" :y="y" width="1" height="1" :fill="mergedColor[1]">
<animate <animate
:attributeName="reverse ? 'y' : 'x'" :attributeName="reverse ? 'y' : 'x'"
from="0" from="0"
@ -33,10 +33,18 @@
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvDecoration2', name: 'DvDecoration2',
mixins: [autoResize], mixins: [autoResize],
props: { props: {
color: {
type: Array,
default: () => ([])
},
reverse: { reverse: {
type: Boolean, type: Boolean,
default: false default: false
@ -50,10 +58,19 @@ export default {
y: 0, y: 0,
w: 0, w: 0,
h: 0 h: 0,
defaultColor: ['#3faacb', '#fff'],
mergedColor: []
} }
}, },
watch: { watch: {
color () {
const { mergeColor } = this
mergeColor()
},
reverse () { reverse () {
const { calcSVGData } = this const { calcSVGData } = this
@ -85,7 +102,17 @@ export default {
const { calcSVGData } = this const { calcSVGData } = this
calcSVGData() calcSVGData()
},
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
} }
},
mounted () {
const { mergeColor } = this
mergeColor()
} }
} }
</script> </script>

37
lib/components/decoration3/src/main.vue
View File

@ -7,7 +7,7 @@
> >
<rect <rect
:key="i" :key="i"
fill="#7acaec" :fill="mergedColor[0]"
:x="point[0] - halfPointSideLength" :x="point[0] - halfPointSideLength"
:y="point[1] - halfPointSideLength" :y="point[1] - halfPointSideLength"
:width="pointSideLength" :width="pointSideLength"
@ -16,7 +16,7 @@
<animate <animate
v-if="Math.random() > 0.6" v-if="Math.random() > 0.6"
attributeName="fill" attributeName="fill"
values="#7acaec;transparent" :values="`${mergedColor.join(';')}`"
:dur="Math.random() + 1 + 's'" :dur="Math.random() + 1 + 's'"
:begin="Math.random() * 2" :begin="Math.random() * 2"
repeatCount="indefinite" repeatCount="indefinite"
@ -30,9 +30,19 @@
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvDecoration3', name: 'DvDecoration3',
mixins: [autoResize], mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () { data () {
const pointSideLength = 7 const pointSideLength = 7
@ -49,7 +59,18 @@ export default {
pointSideLength, pointSideLength,
halfPointSideLength: pointSideLength / 2, halfPointSideLength: pointSideLength / 2,
points: [] points: [],
defaultColor: ['#7acaec', 'transparent'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
} }
}, },
methods: { methods: {
@ -91,7 +112,17 @@ export default {
const { calcSVGData } = this const { calcSVGData } = this
calcSVGData() calcSVGData()
},
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
} }
},
mounted () {
const { mergeColor } = this
mergeColor()
} }
} }
</script> </script>

44
lib/components/decoration4/src/main.vue
View File

@ -6,12 +6,12 @@
> >
<svg :width="reverse ? width : 5" :height="reverse ? 5 : height"> <svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
<polyline <polyline
stroke="rgba(255, 255, 255, 0.3)" :stroke="mergedColor[0]"
:points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`" :points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`"
/> />
<polyline <polyline
class="bold-line" class="bold-line"
stroke="rgba(255, 255, 255, 0.3)" :stroke="mergedColor[1]"
stroke-width="3" stroke-width="3"
stroke-dasharray="20, 80" stroke-dasharray="20, 80"
stroke-dashoffset="-30" stroke-dashoffset="-30"
@ -25,14 +25,50 @@
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvDecoration4', name: 'DvDecoration4',
mixins: [autoResize], mixins: [autoResize],
props: ['reverse'], props: {
color: {
type: Array,
default: () => ([])
},
reverse: {
type: Boolean,
default: false
}
},
data () { data () {
return { return {
ref: 'decoration-4' ref: 'decoration-4',
defaultColor: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.3)'],
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> </script>

37
lib/components/decoration5/src/main.vue
View File

@ -3,7 +3,7 @@
<svg :width="width" :height="height"> <svg :width="width" :height="height">
<polyline <polyline
fill="transparent" fill="transparent"
stroke="#3f96a5" :stroke="mergedColor[0]"
stroke-width="3" stroke-width="3"
:points="line1Points" :points="line1Points"
> >
@ -22,7 +22,7 @@
</polyline> </polyline>
<polyline <polyline
fill="transparent" fill="transparent"
stroke="#3f96a5" :stroke="mergedColor[1]"
stroke-width="2" stroke-width="2"
:points="line2Points" :points="line2Points"
> >
@ -48,9 +48,19 @@ import autoResize from '../../../mixin/autoResize'
import { getPolylineLength } from '@jiaminghi/charts/lib/util' import { getPolylineLength } from '@jiaminghi/charts/lib/util'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvDecoration5', name: 'DvDecoration5',
mixins: [autoResize], mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () { data () {
return { return {
ref: 'decoration-5', ref: 'decoration-5',
@ -59,7 +69,18 @@ export default {
line2Points: '', line2Points: '',
line1Length: 0, line1Length: 0,
line2Length: 0 line2Length: 0,
defaultColor: ['#3f96a5', '#3f96a5'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
} }
}, },
methods: { methods: {
@ -97,7 +118,17 @@ export default {
const { calcSVGData } = this const { calcSVGData } = this
calcSVGData() calcSVGData()
},
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
} }
},
mounted () {
const { mergeColor } = this
mergeColor()
} }
} }
</script> </script>

35
lib/components/decoration6/src/main.vue
View File

@ -6,7 +6,7 @@
> >
<rect <rect
:key="i" :key="i"
fill="#7acaec" :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
:x="point[0] - halfRectWidth" :x="point[0] - halfRectWidth"
:y="point[1] - heights[i] / 2" :y="point[1] - heights[i] / 2"
:width="rectWidth" :width="rectWidth"
@ -43,9 +43,19 @@ import autoResize from '../../../mixin/autoResize'
import { randomExtend } from '../../../util' import { randomExtend } from '../../../util'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvDecoration6', name: 'DvDecoration6',
mixins: [autoResize], mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () { data () {
const rectWidth = 7 const rectWidth = 7
@ -65,7 +75,18 @@ export default {
points: [], points: [],
heights: [], heights: [],
minHeights: [], minHeights: [],
randoms: [] randoms: [],
defaultColor: ['#7acaec', '#7acaec'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
} }
}, },
methods: { methods: {
@ -116,7 +137,17 @@ export default {
const { calcSVGData } = this const { calcSVGData } = this
calcSVGData() calcSVGData()
},
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
} }
},
mounted () {
const { mergeColor } = this
mergeColor()
} }
} }
</script> </script>

46
lib/components/decoration7/src/main.vue
View File

@ -4,13 +4,13 @@
<polyline <polyline
stroke-width="4" stroke-width="4"
fill="transparent" fill="transparent"
stroke="#1dc1f5" :stroke="mergedColor[0]"
points="10, 0 19, 10 10, 20" points="10, 0 19, 10 10, 20"
/> />
<polyline <polyline
stroke-width="2" stroke-width="2"
fill="transparent" fill="transparent"
stroke="#1dc1f5" :stroke="mergedColor[1]"
points="2, 0 11, 10 2, 20" points="2, 0 11, 10 2, 20"
/> />
</svg> </svg>
@ -19,13 +19,13 @@
<polyline <polyline
stroke-width="4" stroke-width="4"
fill="transparent" fill="transparent"
stroke="#1dc1f5" :stroke="mergedColor[0]"
points="11, 0 2, 10 11, 20" points="11, 0 2, 10 11, 20"
/> />
<polyline <polyline
stroke-width="2" stroke-width="2"
fill="transparent" fill="transparent"
stroke="#1dc1f5" :stroke="mergedColor[1]"
points="19, 0 10, 10 19, 20" points="19, 0 10, 10 19, 20"
/> />
</svg> </svg>
@ -33,7 +33,43 @@
</template> </template>
<script> <script>
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { 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> </script>

37
lib/components/decoration8/src/main.vue
View File

@ -2,21 +2,21 @@
<div class="dv-decoration-8" :ref="ref"> <div class="dv-decoration-8" :ref="ref">
<svg :width="width" :height="height"> <svg :width="width" :height="height">
<polyline <polyline
stroke="#3f96a5" :stroke="mergedColor[0]"
stroke-width="2" stroke-width="2"
fill="transparent" fill="transparent"
:points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`" :points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`"
/> />
<polyline <polyline
stroke="#3f96a5" :stroke="mergedColor[0]"
stroke-width="2" stroke-width="2"
fill="transparent" fill="transparent"
:points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`" :points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`"
/> />
<polyline <polyline
stroke="#3f96a5" :stroke="mergedColor[1]"
fill="transparent" fill="transparent"
stroke-width="3" stroke-width="3"
:points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`" :points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`"
@ -28,10 +28,18 @@
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvDecoration8', name: 'DvDecoration8',
mixins: [autoResize], mixins: [autoResize],
props: { props: {
color: {
type: Array,
default: () => ([])
},
reverse: { reverse: {
type: Boolean, type: Boolean,
default: false default: false
@ -39,7 +47,18 @@ export default {
}, },
data () { data () {
return { return {
ref: 'decoration-8' ref: 'decoration-8',
defaultColor: ['#3f96a5', '#3f96a5'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
} }
}, },
methods: { methods: {
@ -49,7 +68,17 @@ export default {
if (!reverse) return pos if (!reverse) return pos
return width - pos return width - pos
},
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
} }
},
mounted () {
const { mergeColor } = this
mergeColor()
} }
} }
</script> </script>

62
lib/components/decoration9/src/main.vue
View File

@ -10,7 +10,7 @@
cy="50" cy="50"
r="45" r="45"
fill="transparent" fill="transparent"
stroke="rgba(3, 166, 224, 0.5)" :stroke="mergedColor[1]"
stroke-width="10" stroke-width="10"
stroke-dasharray="80, 100, 30, 100" stroke-dasharray="80, 100, 30, 100"
> >
@ -18,7 +18,7 @@
attributeName="transform" attributeName="transform"
type="rotate" type="rotate"
values="0 50 50;360 50 50" values="0 50 50;360 50 50"
dur="3s" :dur="`${dur}s`"
repeatCount="indefinite" repeatCount="indefinite"
/> />
</circle> </circle>
@ -28,7 +28,7 @@
cy="50" cy="50"
r="45" r="45"
fill="transparent" fill="transparent"
stroke="rgba(3, 166, 224, 0.8)" :stroke="mergedColor[0]"
stroke-width="6" stroke-width="6"
stroke-dasharray="50, 66, 100, 66" stroke-dasharray="50, 66, 100, 66"
> >
@ -36,7 +36,7 @@
attributeName="transform" attributeName="transform"
type="rotate" type="rotate"
values="0 50 50;-360 50 50" values="0 50 50;-360 50 50"
dur="3s" :dur="`${dur}s`"
repeatCount="indefinite" repeatCount="indefinite"
/> />
</circle> </circle>
@ -46,7 +46,7 @@
cy="50" cy="50"
r="38" r="38"
fill="transparent" fill="transparent"
stroke="rgba(3, 166, 224, 0.2)" :stroke="fade(mergedColor[1] || defaultColor[1], 30)"
stroke-width="1" stroke-width="1"
stroke-dasharray="5, 1" stroke-dasharray="5, 1"
/> />
@ -55,15 +55,15 @@
v-for="(foo, i) in new Array(20).fill(0)" v-for="(foo, i) in new Array(20).fill(0)"
:key="i" :key="i"
:xlink:href="`#${polygonId}`" :xlink:href="`#${polygonId}`"
stroke="rgba(3, 166, 224, 0.6)" :stroke="mergedColor[1]"
:fill="Math.random() > 0.4 ? 'transparent' : 'rgba(3, 166, 224, 0.8)'" :fill="Math.random() > 0.4 ? 'transparent' : mergedColor[0]"
> >
<animateTransform <animateTransform
attributeName="transform" attributeName="transform"
type="rotate" type="rotate"
values="0 50 50;360 50 50" values="0 50 50;360 50 50"
dur="3s" :dur="`${dur}s`"
:begin="`${i * 0.15}s`" :begin="`${i * dur / 20}s`"
repeatCount="indefinite" repeatCount="indefinite"
/> />
</use> </use>
@ -73,7 +73,7 @@
cy="50" cy="50"
r="26" r="26"
fill="transparent" fill="transparent"
stroke="rgba(3, 166, 224, 0.2)" :stroke="fade(mergedColor[1] || defaultColor[1], 30)"
stroke-width="1" stroke-width="1"
stroke-dasharray="5, 1" stroke-dasharray="5, 1"
/> />
@ -86,9 +86,25 @@
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
import { fade } from '@jiaminghi/color'
export default { export default {
name: 'DvDecoration9', name: 'DvDecoration9',
mixins: [autoResize], mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
},
dur: {
type: Number,
default: 3
}
},
data () { data () {
const timestamp = Date.now() const timestamp = Date.now()
return { return {
@ -98,7 +114,18 @@ export default {
svgWH: [100, 100], svgWH: [100, 100],
svgScale: [1, 1] svgScale: [1, 1],
defaultColor: ['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'],
mergedColor: []
}
},
watch: {
color () {
const { mergeColor } = this
mergeColor()
} }
}, },
methods: { methods: {
@ -118,7 +145,18 @@ export default {
const { calcScale } = this const { calcScale } = this
calcScale() calcScale()
} },
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
},
fade
},
mounted () {
const { mergeColor } = this
mergeColor()
} }
} }
</script> </script>

10
lib/components/scrollBoard/src/main.vue
View File

@ -134,6 +134,12 @@ export default {
* @default index = false * @default index = false
*/ */
index: false, index: false,
/**
* @description index Header
* @type {String}
* @default indexHeader = '#'
*/
indexHeader: '#',
/** /**
* @description Carousel type * @description Carousel type
* @type {String} * @type {String}
@ -217,7 +223,7 @@ export default {
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {}) this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
}, },
calcHeaderData () { calcHeaderData () {
let { header, index } = this.mergedConfig let { header, index, indexHeader} = this.mergedConfig
if (!header.length) { if (!header.length) {
this.header = [] this.header = []
@ -227,7 +233,7 @@ export default {
header = [...header] header = [...header]
if (index) header.unshift('#') if (index) header.unshift(indexHeader)
this.header = header this.header = header
}, },

12
lib/index.js
View File

@ -4,6 +4,9 @@
export { default as activeRingChart } from './components/activeRingChart/index' export { default as activeRingChart } from './components/activeRingChart/index'
export { default as borderBox1 } from './components/borderBox1/index' export { default as borderBox1 } from './components/borderBox1/index'
export { default as borderBox10 } from './components/borderBox10/index' export { default as borderBox10 } from './components/borderBox10/index'
export { default as borderBox11 } from './components/borderBox11/index'
export { default as borderBox12 } from './components/borderBox12/index'
export { default as borderBox13 } from './components/borderBox13/index'
export { default as borderBox2 } from './components/borderBox2/index' export { default as borderBox2 } from './components/borderBox2/index'
export { default as borderBox3 } from './components/borderBox3/index' export { default as borderBox3 } from './components/borderBox3/index'
export { default as borderBox4 } from './components/borderBox4/index' export { default as borderBox4 } from './components/borderBox4/index'
@ -17,6 +20,7 @@ export { default as charts } from './components/charts/index'
export { default as conicalColumnChart } from './components/conicalColumnChart/index' export { default as conicalColumnChart } from './components/conicalColumnChart/index'
export { default as decoration1 } from './components/decoration1/index' export { default as decoration1 } from './components/decoration1/index'
export { default as decoration10 } from './components/decoration10/index' export { default as decoration10 } from './components/decoration10/index'
export { default as decoration11 } from './components/decoration11/index'
export { default as decoration2 } from './components/decoration2/index' export { default as decoration2 } from './components/decoration2/index'
export { default as decoration3 } from './components/decoration3/index' export { default as decoration3 } from './components/decoration3/index'
export { default as decoration4 } from './components/decoration4/index' export { default as decoration4 } from './components/decoration4/index'
@ -50,6 +54,9 @@ import borderBox7 from './components/borderBox7/index'
import borderBox8 from './components/borderBox8/index' import borderBox8 from './components/borderBox8/index'
import borderBox9 from './components/borderBox9/index' import borderBox9 from './components/borderBox9/index'
import borderBox10 from './components/borderBox10/index' import borderBox10 from './components/borderBox10/index'
import borderBox11 from './components/borderBox11/index'
import borderBox12 from './components/borderBox12/index'
import borderBox13 from './components/borderBox13/index'
// decoration // decoration
import decoration1 from './components/decoration1/index' import decoration1 from './components/decoration1/index'
@ -62,6 +69,7 @@ import decoration7 from './components/decoration7/index'
import decoration8 from './components/decoration8/index' import decoration8 from './components/decoration8/index'
import decoration9 from './components/decoration9/index' import decoration9 from './components/decoration9/index'
import decoration10 from './components/decoration10/index' import decoration10 from './components/decoration10/index'
import decoration11 from './components/decoration11/index'
// charts // charts
import charts from './components/charts/index' import charts from './components/charts/index'
@ -94,6 +102,9 @@ export default function (Vue) {
Vue.use(borderBox8) Vue.use(borderBox8)
Vue.use(borderBox9) Vue.use(borderBox9)
Vue.use(borderBox10) Vue.use(borderBox10)
Vue.use(borderBox11)
Vue.use(borderBox12)
Vue.use(borderBox13)
// decoration // decoration
Vue.use(decoration1) Vue.use(decoration1)
@ -106,6 +117,7 @@ export default function (Vue) {
Vue.use(decoration8) Vue.use(decoration8)
Vue.use(decoration9) Vue.use(decoration9)
Vue.use(decoration10) Vue.use(decoration10)
Vue.use(decoration11)
// charts // charts
Vue.use(charts) Vue.use(charts)