# 装饰
你可以使用装饰去点缀你的页面,以增强视觉效果,与边框组件相同,他们也是用SVG元素绘制的。 (React版 (opens new window))
# 自定义颜色
所有装饰均支持自定义颜色,配置项及示例如下。
<dv-decoration-1 :color="['red', 'green']" />
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
color | 自定义颜色 | string[] | - | - |
TIP
color
属性支持配置两个颜色,一主一副。
颜色类型可以为颜色关键字、十六进制色、RGB及RGBA。
# dv-decoration-1
<dv-decoration-1 style="width:200px;height:50px;" />
# dv-decoration-2
<dv-decoration-2 style="width:200px;height:5px;" />
# 配置
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
dur | 单次动画时长(秒) | Number | - | 6 |
# dv-decoration-2(reverse)
<dv-decoration-2 :reverse="true" style="width:5px;height:150px;" />
# dv-decoration-3
<dv-decoration-3 style="width:250px;height:30px;" />
# dv-decoration-4
<dv-decoration-4 style="width:5px;height:150px;" />
# 配置
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
dur | 单次动画时长(秒) | Number | - | 3 |
# dv-decoration-4(reverse)
<dv-decoration-4 :reverse="true" style="width:250px;height:5px;" />
# dv-decoration-5
<dv-decoration-5 style="width:300px;height:40px;" />
# 配置
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
dur | 单次动画时长(秒) | Number | - | 1.2 |
# dv-decoration-6
<dv-decoration-6 style="width:300px;height:30px;" />
# dv-decoration-7
Decoration
<dv-decoration-7 style="width:150px;height:30px;">Decoration</dv-decoration-7>
# dv-decoration-8
<dv-decoration-8 style="width:300px;height:50px;" />
# dv-decoration-8(reverse)
<dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
# dv-decoration-9
66%
<dv-decoration-9 style="width:150px;height:150px;">66%</dv-decoration-9>
# 配置
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
dur | 单次动画时长(秒) | Number | - | 3 |
# dv-decoration-10
<dv-decoration-10 style="width:90%;height:5px;" />
# dv-decoration-11
dv-decoration-11
<dv-decoration-11 style="width:200px;height:60px;">dv-decoration-11</dv-decoration-11>
# dv-decoration-12
<dv-decoration-12 style="width:150px;height:150px;" />
# 配置
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
scanDur | 扫描动画时长(秒) | Number | - | 3 |
haloDur | 光晕动画时长(秒) | Number | - | 2 |