update dist and lib
This commit is contained in:
6
lib/components/borderBox13/index.js
Normal file
6
lib/components/borderBox13/index.js
Normal 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
17
lib/components/borderBox13/src/main.css
Normal 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
89
lib/components/borderBox13/src/main.vue
Normal 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>
|
Reference in New Issue
Block a user