update dist and lib
This commit is contained in:
jiaming743 committed
1 parent
fdd1117e00
commit
ebf1354be5
12 files changed
+956
-213
No files matched your search
Vendored
+618
-202
File diff suppressed because it is too large.
Load diff
Vendored
+1
-1
@@ -1 +1 @@
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):t((e=e||self).Vue)}(this,(function(e){"use strict";function t(e,t){return 1===arguments.length?parseInt(Math.random()*e+1,10):parseInt(Math.random()*(t-e+1)+e,10)}function n(e,t){const n=Math.abs(e[0]-t[0]),r=Math.abs(e[1]-t[1]);return Math.sqrt(n*n+r*r)}function r(e){return(e?"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx":"xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx").replace(/[xy]/g,(function(e){const t=16*Math.random()|0;return("x"==e?t:3&t|8).toString(16)}))}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var i={data:()=>({dom:"",width:0,height:0,debounceInitWHFun:"",domObserver:""}),methods:{async autoResizeMixinInit(){const{initWH:e,getDebounceInitWHFun:t,bindDomResizeCallback:n,afterAutoResizeMixinInit:r}=this;await e(!1),t(),n(),"function"==typeof r&&r()},initWH(e=!0){const{$nextTick:t,$refs:n,ref:r,onResize:i}=this;return new Promise(o=>{t(t=>{const a=this.dom=n[r];this.width=a?a.clientWidth:0,this.height=a?a.clientHeight:0,a?this.width&&this.height||console.warn("DataV: Component width or height is 0px, rendering abnormality may occur!"):console.warn("DataV: Failed to get dom node, component rendering may be abnormal!"),"function"==typeof i&&e&&i(),o()})})},getDebounceInitWHFun(){const{initWH:e}=this;this.debounceInitWHFun=function(e,t){let n;return function(){clearTimeout(n);const[r,i]=[this,arguments];n=setTimeout(()=>{t.apply(r,i)},e)}}(100,e)},bindDomResizeCallback(){const{dom:e,debounceInitWHFun:t}=this;this.domObserver=function(e,t){const n=new(window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver)(t);return n.observe(e,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),n}(e,t),window.addEventListener("resize",t)},unbindDomResizeCallback(){let{domObserver:e,debounceInitWHFun:t}=this;e&&(e.disconnect(),e.takeRecords(),e=null,window.removeEventListener("resize",t))}},mounted(){const{autoResizeMixinInit:e}=this;e()},beforeDestroy(){const{unbindDomResizeCallback:e}=this;e()}},o={name:"DvFullScreenContainer",mixins:[i],data:()=>({ref:"full-screen-container",allWidth:0,scale:0,datavRoot:"",ready:!1}),methods:{afterAutoResizeMixinInit(){const{initConfig:e,setAppScale:t}=this;e(),t(),this.ready=!0},initConfig(){const{dom:e}=this,{width:t,height:n}=screen;this.allWidth=t,e.style.width=t+"px",e.style.height=n+"px"},setAppScale(){const{allWidth:e,dom:t}=this,n=document.body.clientWidth;t.style.transform=`scale(${n/e})`},onResize(){const{setAppScale:e}=this;e()}}};function a(e,t,n,r,i,o,a,s,l,d){"boolean"!=typeof a&&(l=s,s=a,a=!1);const c="function"==typeof n?n.options:n;let u;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=u):t&&(u=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(c.functional){const e=c.render;c.render=function(t,n){return u.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,u):[u]}return n}const s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function l(e){return(e,t)=>function(e,t){const n=s?t.media||"default":e,r=c[n]||(c[n]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),void 0===d&&(d=document.head||document.getElementsByTagName("head")[0]),d.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(n),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const e=r.ids.size-1,t=document.createTextNode(n),i=r.element.childNodes;i[e]&&r.element.removeChild(i[e]),i.length?r.element.insertBefore(t,i[e]):r.element.appendChild(t)}}}(e,t)}let d;const c={};const u=o;var f=function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:this.ref,attrs:{id:"dv-full-screen-container"}},[this.ready?[this._t("default")]:this._e()],2)};f._withStripped=!0;const h=a({render:f,staticRenderFns:[]},(function(e){e&&e("data-v-2da16e2c_0",{source:"#dv-full-screen-container {\n position: fixed;\n top: 0px;\n left: 0px;\n overflow: hidden;\n transform-origin: left top;\n z-index: 999;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,eAAe;EACf,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,0BAA0B;EAC1B,YAAY;AACd",file:"main.vue",sourcesContent:["#dv-full-screen-container {\n position: fLine truncated
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):t((e=e||self).Vue)}(this,(function(e){"use strict";function t(e,t){return 1===arguments.length?parseInt(Math.random()*e+1,10):parseInt(Math.random()*(t-e+1)+e,10)}function n(e,t){const n=Math.abs(e[0]-t[0]),r=Math.abs(e[1]-t[1]);return Math.sqrt(n*n+r*r)}function r(e){return(e?"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx":"xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx").replace(/[xy]/g,(function(e){const t=16*Math.random()|0;return("x"==e?t:3&t|8).toString(16)}))}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var i={data:()=>({dom:"",width:0,height:0,debounceInitWHFun:"",domObserver:""}),methods:{async autoResizeMixinInit(){const{initWH:e,getDebounceInitWHFun:t,bindDomResizeCallback:n,afterAutoResizeMixinInit:r}=this;await e(!1),t(),n(),"function"==typeof r&&r()},initWH(e=!0){const{$nextTick:t,$refs:n,ref:r,onResize:i}=this;return new Promise(o=>{t(t=>{const a=this.dom=n[r];this.width=a?a.clientWidth:0,this.height=a?a.clientHeight:0,a?this.width&&this.height||console.warn("DataV: Component width or height is 0px, rendering abnormality may occur!"):console.warn("DataV: Failed to get dom node, component rendering may be abnormal!"),"function"==typeof i&&e&&i(),o()})})},getDebounceInitWHFun(){const{initWH:e}=this;this.debounceInitWHFun=function(e,t){let n;return function(){clearTimeout(n);const[r,i]=[this,arguments];n=setTimeout(()=>{t.apply(r,i)},e)}}(100,e)},bindDomResizeCallback(){const{dom:e,debounceInitWHFun:t}=this;this.domObserver=function(e,t){const n=new(window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver)(t);return n.observe(e,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),n}(e,t),window.addEventListener("resize",t)},unbindDomResizeCallback(){let{domObserver:e,debounceInitWHFun:t}=this;e&&(e.disconnect(),e.takeRecords(),e=null,window.removeEventListener("resize",t))}},mounted(){const{autoResizeMixinInit:e}=this;e()},beforeDestroy(){const{unbindDomResizeCallback:e}=this;e()}},o={name:"DvFullScreenContainer",mixins:[i],data:()=>({ref:"full-screen-container",allWidth:0,scale:0,datavRoot:"",ready:!1}),methods:{afterAutoResizeMixinInit(){const{initConfig:e,setAppScale:t}=this;e(),t(),this.ready=!0},initConfig(){const{dom:e}=this,{width:t,height:n}=screen;this.allWidth=t,e.style.width=t+"px",e.style.height=n+"px"},setAppScale(){const{allWidth:e,dom:t}=this,n=document.body.clientWidth;t.style.transform=`scale(${n/e})`},onResize(){const{setAppScale:e}=this;e()}}};function a(e,t,n,r,i,o,a,s,l,d){"boolean"!=typeof a&&(l=s,s=a,a=!1);const c="function"==typeof n?n.options:n;let u;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=u):t&&(u=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(c.functional){const e=c.render;c.render=function(t,n){return u.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,u):[u]}return n}const s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function l(e){return(e,t)=>function(e,t){const n=s?t.media||"default":e,r=c[n]||(c[n]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),void 0===d&&(d=document.head||document.getElementsByTagName("head")[0]),d.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(n),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const e=r.ids.size-1,t=document.createTextNode(n),i=r.element.childNodes;i[e]&&r.element.removeChild(i[e]),i.length?r.element.insertBefore(t,i[e]):r.element.appendChild(t)}}}(e,t)}let d;const c={};const u=o;var h=function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:this.ref,attrs:{id:"dv-full-screen-container"}},[this.ready?[this._t("default")]:this._e()],2)};h._withStripped=!0;const f=a({render:h,staticRenderFns:[]},(function(e){e&&e("data-v-2da16e2c_0",{source:"#dv-full-screen-container {\n position: fixed;\n top: 0px;\n left: 0px;\n overflow: hidden;\n transform-origin: left top;\n z-index: 999;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,eAAe;EACf,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,0BAA0B;EAC1B,YAAY;AACd",file:"main.vue",sourcesContent:["#dv-full-screen-container {\n position: fLine truncated
|
||||
@@ -83,6 +83,11 @@ export default {
|
||||
* @type {Number}
|
||||
*/
|
||||
digitalFlopToFixed: 0,
|
||||
/**
|
||||
* @description Digital flop unit
|
||||
* @type {String}
|
||||
*/
|
||||
digitalFlopUnit: '',
|
||||
/**
|
||||
* @description CRender animationCurve
|
||||
* @type {String}
|
||||
@@ -122,7 +127,8 @@ export default {
|
||||
digitalFlopStyle,
|
||||
digitalFlopToFixed,
|
||||
data,
|
||||
showOriginValue
|
||||
showOriginValue,
|
||||
digitalFlopUnit
|
||||
} = mergedConfig
|
||||
|
||||
const value = data.map(({ value }) => value)
|
||||
@@ -140,7 +146,7 @@ export default {
|
||||
}
|
||||
|
||||
return {
|
||||
content: showOriginValue ? '{nt}' : '{nt}%',
|
||||
content: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,
|
||||
number: [displayValue],
|
||||
style: digitalFlopStyle,
|
||||
toFixed: digitalFlopToFixed
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import './src/main.css'
|
||||
import Decoration12 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Decoration12.name, Decoration12)
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
.dv-decoration-12 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.dv-decoration-12 .decoration-content {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div class="dv-decoration-12" :ref="ref">
|
||||
<svg :width="width" :height="height">
|
||||
<defs>
|
||||
<g :id="gId">
|
||||
<path
|
||||
:stroke="pathColor[i]"
|
||||
:stroke-width="width / 2"
|
||||
fill="transparent"
|
||||
v-for="(d, i) in pathD"
|
||||
:key="d"
|
||||
:d="d"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<radialGradient
|
||||
:id="gradientId"
|
||||
cx="50%" cy="50%" r="50%"
|
||||
>
|
||||
<stop offset="0%" stop-color="transparent" stop-opacity="1" />
|
||||
<stop offset="100%" :stop-color="fade(mergedColor[1] || defaultColor[1], 30)" stop-opacity="1" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<circle
|
||||
v-for="r in circleR"
|
||||
:key="r"
|
||||
:r="r"
|
||||
:cx="x"
|
||||
:cy="y"
|
||||
:stroke="mergedColor[1]"
|
||||
:stroke-width="0.5"
|
||||
fill="transparent"
|
||||
/>
|
||||
|
||||
<circle
|
||||
r="1"
|
||||
:cx="x"
|
||||
:cy="y"
|
||||
stroke="transparent"
|
||||
:fill="`url(#${gradientId})`"
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
:values="`1;${width / 2}`"
|
||||
:dur="`${haloDur}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="1;0"
|
||||
:dur="`${haloDur}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
r="2"
|
||||
:cx="x"
|
||||
:cy="y"
|
||||
:fill="mergedColor[1]"
|
||||
/>
|
||||
|
||||
<g v-if="showSplitLine">
|
||||
<polyline
|
||||
v-for="p in splitLinePoints"
|
||||
:key="p"
|
||||
:points="p"
|
||||
:stroke="mergedColor[1]"
|
||||
:stroke-width="0.5"
|
||||
opacity="0.5"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<path
|
||||
v-for="d in arcD"
|
||||
:key="d"
|
||||
:d="d"
|
||||
:stroke="mergedColor[1]"
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
/>
|
||||
|
||||
<use :xlink:href="`#${gId}`">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
:values="`0, ${x} ${y};360, ${x} ${y}`"
|
||||
:dur="`${scanDur}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</use>
|
||||
</svg>
|
||||
|
||||
<div class="decoration-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone, getCircleRadianPoint } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { fade } from '@jiaminghi/color'
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration12',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
/**
|
||||
* @description Scan animation dur
|
||||
*/
|
||||
scanDur: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
/**
|
||||
* @description Halo animation dur
|
||||
*/
|
||||
haloDur: {
|
||||
type: Number,
|
||||
default: 2
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'decoration-12',
|
||||
gId: `decoration-12-g-${id}`,
|
||||
gradientId: `decoration-12-gradient-${id}`,
|
||||
|
||||
defaultColor: ['#2783ce', '#2cf7fe'],
|
||||
|
||||
mergedColor: [],
|
||||
|
||||
pathD: [],
|
||||
|
||||
pathColor: [],
|
||||
|
||||
circleR: [],
|
||||
|
||||
splitLinePoints: [],
|
||||
|
||||
arcD: [],
|
||||
|
||||
segment: 30,
|
||||
|
||||
sectorAngle: Math.PI / 3,
|
||||
|
||||
ringNum: 3,
|
||||
|
||||
ringWidth: 1,
|
||||
|
||||
showSplitLine: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
color () {
|
||||
const { mergeColor } = this
|
||||
|
||||
mergeColor()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
x () {
|
||||
const { width } = this
|
||||
|
||||
return width / 2
|
||||
},
|
||||
y () {
|
||||
const { height } = this
|
||||
|
||||
return height / 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const { mergeColor, calcPathD, calcPathColor, calcCircleR, calcSplitLinePoints, calcArcD } = this
|
||||
|
||||
mergeColor()
|
||||
|
||||
calcPathD()
|
||||
|
||||
calcPathColor()
|
||||
|
||||
calcCircleR()
|
||||
|
||||
calcSplitLinePoints()
|
||||
|
||||
calcArcD()
|
||||
},
|
||||
mergeColor () {
|
||||
const { color, defaultColor } = this
|
||||
|
||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
||||
},
|
||||
calcPathD () {
|
||||
const { x, y, width, segment, sectorAngle } = this
|
||||
|
||||
const startAngle = -Math.PI / 2
|
||||
const angleGap = sectorAngle / segment
|
||||
const r = width / 4
|
||||
let lastEndPoints = getCircleRadianPoint(x, y, r, startAngle)
|
||||
|
||||
this.pathD = new Array(segment)
|
||||
.fill('')
|
||||
.map((_, i) => {
|
||||
const endPoints = getCircleRadianPoint(x, y, r, startAngle - (i + 1) * angleGap).map(_ => _.toFixed(5))
|
||||
const d = `M${lastEndPoints.join(',')} A${r}, ${r} 0 0 0 ${endPoints.join(',')}`
|
||||
lastEndPoints = endPoints
|
||||
|
||||
return d
|
||||
})
|
||||
},
|
||||
calcPathColor () {
|
||||
const { mergedColor: [color], segment } = this
|
||||
|
||||
const colorGap = 100 / (segment - 1)
|
||||
|
||||
this.pathColor = new Array(segment)
|
||||
.fill(color)
|
||||
.map((_, i) => fade(color, 100 - i * colorGap))
|
||||
},
|
||||
calcCircleR () {
|
||||
const { segment, ringNum, width, ringWidth } = this
|
||||
|
||||
const radiusGap = (width / 2 - ringWidth / 2) / ringNum
|
||||
|
||||
this.circleR = new Array(ringNum)
|
||||
.fill(0)
|
||||
.map((_, i) => radiusGap * (i + 1))
|
||||
},
|
||||
calcSplitLinePoints () {
|
||||
const { x, y, width } = this
|
||||
|
||||
const angleGap = Math.PI / 6
|
||||
const r = width / 2
|
||||
|
||||
this.splitLinePoints = new Array(6)
|
||||
.fill('')
|
||||
.map((_, i) => {
|
||||
const startAngle = angleGap * (i + 1)
|
||||
const endAngle = startAngle + Math.PI
|
||||
const startPoint = getCircleRadianPoint(x, y, r, startAngle)
|
||||
const endPoint = getCircleRadianPoint(x, y, r, endAngle)
|
||||
|
||||
return `${startPoint.join(',')} ${endPoint.join(',')}`
|
||||
})
|
||||
},
|
||||
calcArcD () {
|
||||
const { x, y, width } = this
|
||||
|
||||
const angleGap = Math.PI / 6
|
||||
const r = width / 2 - 1
|
||||
|
||||
this.arcD = new Array(4)
|
||||
.fill('')
|
||||
.map((_, i) => {
|
||||
const startAngle = angleGap * (3 * i + 1)
|
||||
const endAngle = startAngle + angleGap
|
||||
const startPoint = getCircleRadianPoint(x, y, r, startAngle)
|
||||
const endPoint = getCircleRadianPoint(x, y, r, endAngle)
|
||||
|
||||
return `M${startPoint.join(',')} A${x}, ${y} 0 0 1 ${endPoint.join(',')}`
|
||||
})
|
||||
},
|
||||
afterAutoResizeMixinInit () {
|
||||
const { init } = this
|
||||
|
||||
init()
|
||||
},
|
||||
fade
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -6,7 +6,7 @@
|
||||
:attributeName="reverse ? 'height' : 'width'"
|
||||
from="0"
|
||||
:to="reverse ? height : width"
|
||||
dur="6s"
|
||||
:dur="`${dur}s`"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
keySplines=".42,0,.58,1"
|
||||
@@ -19,7 +19,7 @@
|
||||
:attributeName="reverse ? 'y' : 'x'"
|
||||
from="0"
|
||||
:to="reverse ? height : width"
|
||||
dur="6s"
|
||||
:dur="`${dur}s`"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
keySplines="0.42,0,0.58,1"
|
||||
@@ -48,6 +48,10 @@ export default {
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dur: {
|
||||
type: Number,
|
||||
default: 6
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
||||
@@ -10,12 +10,12 @@
|
||||
flex: 1;
|
||||
}
|
||||
.dv-decoration-4 .normal {
|
||||
animation: ani-height 3s ease-in-out infinite;
|
||||
animation: ani-height ease-in-out infinite;
|
||||
left: 50%;
|
||||
margin-left: -2px;
|
||||
}
|
||||
.dv-decoration-4 .reverse {
|
||||
animation: ani-width 3s ease-in-out infinite;
|
||||
animation: ani-width ease-in-out infinite;
|
||||
top: 50%;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="dv-decoration-4" :ref="ref">
|
||||
<div
|
||||
:class="`container ${reverse ? 'reverse' : 'normal'}`"
|
||||
:style="reverse ? `width:${width}px;height:5px` : `width:5px;height:${height}px;`"
|
||||
:style="reverse ? `width:${width}px;height:5px;animation-duration:${dur}s` : `width:5px;height:${height}px;animation-duration:${dur}s`"
|
||||
>
|
||||
<svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
|
||||
<polyline
|
||||
@@ -40,6 +40,10 @@ export default {
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dur: {
|
||||
type: Number,
|
||||
default: 3
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
attributeType="XML"
|
||||
:from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
|
||||
:to="`0, 0, ${line1Length}, 0`"
|
||||
dur="1.2s"
|
||||
:dur="`${dur}s`"
|
||||
begin="0s"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
@@ -31,7 +31,7 @@
|
||||
attributeType="XML"
|
||||
:from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
|
||||
:to="`0, 0, ${line2Length}, 0`"
|
||||
dur="1.2s"
|
||||
:dur="`${dur}s`"
|
||||
begin="0s"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
@@ -59,6 +59,10 @@ export default {
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
dur: {
|
||||
type: Number,
|
||||
default: 1.2
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
||||
@@ -21,6 +21,7 @@ export { default as conicalColumnChart } from './components/conicalColumnChart/i
|
||||
export { default as decoration1 } from './components/decoration1/index'
|
||||
export { default as decoration10 } from './components/decoration10/index'
|
||||
export { default as decoration11 } from './components/decoration11/index'
|
||||
export { default as decoration12 } from './components/decoration12/index'
|
||||
export { default as decoration2 } from './components/decoration2/index'
|
||||
export { default as decoration3 } from './components/decoration3/index'
|
||||
export { default as decoration4 } from './components/decoration4/index'
|
||||
@@ -71,6 +72,7 @@ import decoration8 from './components/decoration8/index'
|
||||
import decoration9 from './components/decoration9/index'
|
||||
import decoration10 from './components/decoration10/index'
|
||||
import decoration11 from './components/decoration11/index'
|
||||
import decoration12 from './components/decoration12/index'
|
||||
|
||||
// charts
|
||||
import charts from './components/charts/index'
|
||||
@@ -120,6 +122,7 @@ export default function (Vue) {
|
||||
Vue.use(decoration9)
|
||||
Vue.use(decoration10)
|
||||
Vue.use(decoration11)
|
||||
Vue.use(decoration12)
|
||||
|
||||
// charts
|
||||
Vue.use(charts)
|
||||
|
||||
@@ -29,7 +29,7 @@ export default {
|
||||
const { $nextTick, $refs, ref, onResize } = this
|
||||
|
||||
return new Promise(resolve => {
|
||||
$nextTick(e => {
|
||||
$nextTick(_ => {
|
||||
const dom = this.dom = $refs[ref]
|
||||
|
||||
this.width = dom ? dom.clientWidth : 0
|
||||
|
||||
Reference in new issue
Block a user