update dist and lib
This commit is contained in:
@ -4,7 +4,7 @@
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.dv-border-box-10 .border {
|
||||
.dv-border-box-10 .dv-border-svg-container {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
|
||||
<svg class="border" :width="width" :height="height">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
|
||||
4, ${height} 0, ${height - 4} 0, 4
|
||||
@ -12,7 +12,7 @@
|
||||
height="150px"
|
||||
:key="item"
|
||||
v-for="item in border"
|
||||
:class="`${item} border`"
|
||||
:class="`${item} dv-border-svg-container`"
|
||||
>
|
||||
<polygon
|
||||
:fill="mergedColor[1]"
|
||||
|
@ -10,7 +10,7 @@
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.dv-border-box-11 .dv-border-svg-container polyline {
|
||||
.dv-border-box-11 .dv-border-svg-container > polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
@ -10,7 +10,7 @@
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.dv-border-box-2 .dv-border-svg-container polyline {
|
||||
.dv-border-box-2 .dv-border-svg-container > polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
@ -10,7 +10,7 @@
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.dv-border-box-3 .dv-border-svg-container polyline {
|
||||
.dv-border-box-3 .dv-border-svg-container > polyline {
|
||||
fill: none;
|
||||
}
|
||||
.dv-border-box-3 .dv-bb3-line1 {
|
||||
|
@ -13,7 +13,7 @@
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.dv-border-box-4 .dv-border-svg-container polyline {
|
||||
.dv-border-box-4 .dv-border-svg-container > polyline {
|
||||
fill: none;
|
||||
}
|
||||
.dv-border-box-4 .sw1 {
|
||||
|
@ -6,14 +6,14 @@
|
||||
.dv-border-box-5 .dv-reverse {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.dv-border-box-5 .dv-svg-container {
|
||||
.dv-border-box-5 .dv-border-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-5 .dv-svg-container polyline {
|
||||
.dv-border-box-5 .dv-border-svg-container > polyline {
|
||||
fill: none;
|
||||
}
|
||||
.dv-border-box-5 .dv-bb5-line-1,
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dv-border-box-5" :ref="ref">
|
||||
<svg :class="`dv-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
|
||||
`" />
|
||||
|
@ -3,14 +3,14 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-6 .dv-svg-container {
|
||||
.dv-border-box-6 .dv-border-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-6 .dv-svg-container polyline {
|
||||
.dv-border-box-6 .dv-border-svg-container > polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dv-border-box-6" :ref="ref">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
|
||||
`" />
|
||||
|
@ -3,14 +3,14 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-7 .dv-svg-container {
|
||||
.dv-border-box-7 .dv-border-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-7 .dv-svg-container polyline {
|
||||
.dv-border-box-7 .dv-border-svg-container > polyline {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
@ -5,7 +5,7 @@
|
||||
:style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
|
||||
:ref="ref"
|
||||
>
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<svg class="dv-border-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}`" />
|
||||
|
@ -3,7 +3,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-8 svg {
|
||||
.dv-border-box-8 .dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dv-border-box-8" :ref="ref">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<path
|
||||
:id="path"
|
||||
|
@ -3,7 +3,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-9 svg {
|
||||
.dv-border-box-9 .dv-border-svg-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dv-border-box-9" :ref="ref">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<animate
|
||||
|
@ -32,8 +32,14 @@ export default {
|
||||
$nextTick(e => {
|
||||
const dom = this.dom = $refs[ref]
|
||||
|
||||
this.width = dom.clientWidth
|
||||
this.height = dom.clientHeight
|
||||
this.width = dom ? dom.clientWidth : 0
|
||||
this.height = dom ? dom.clientHeight : 0
|
||||
|
||||
if (!dom) {
|
||||
console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
|
||||
} else if (!this.width || !this.height) {
|
||||
console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
|
||||
}
|
||||
|
||||
if (typeof onResize === 'function' && resize) onResize()
|
||||
|
||||
@ -56,6 +62,8 @@ export default {
|
||||
unbindDomResizeCallback () {
|
||||
let { domObserver, debounceInitWHFun } = this
|
||||
|
||||
if (!domObserver) return
|
||||
|
||||
domObserver.disconnect()
|
||||
domObserver.takeRecords()
|
||||
domObserver = null
|
||||
|
Reference in New Issue
Block a user