csg-datav
Version:
Datav Document
263 lines (215 loc) • 6.94 kB
Markdown
---
sidebarDepth: 2
---
# 装饰
你可以使用装饰去点缀你的页面，以增强视觉效果，与边框组件相同，他们也是用**SVG**元素绘制的。<react-page-btn />
## 自定义颜色
所有装饰均支持自定义颜色，配置项及示例如下。
```html
<dv-decoration-1 :color="['red', 'green']" />
```
<full-width-table>
属性|说明|类型|可选值|默认值
:--:|:--:|:--:|:--:|:--:
color|自定义颜色|`string[]`|`-`|`-`
</full-width-table>
::: tip TIP
`color`属性支持配置两个颜色，一主一副。
颜色类型可以为颜色关键字、十六进制色、RGB及RGBA。
:::
## dv-decoration-1
<div class="decoration-contaier">
<dv-decoration-1 style="width:200px;height:50px;" />
</div>
```html
<dv-decoration-1 style="width:200px;height:50px;" />
```
<click-to-copy :info="info1" />
## dv-decoration-2
<div class="decoration-contaier">
<dv-decoration-2 style="width:200px;height:5px;" />
</div>
```html
<dv-decoration-2 style="width:200px;height:5px;" />
```
<click-to-copy :info="info2" />
### 配置
<full-width-table>
属性|说明|类型|可选值|默认值
:--:|:--:|:--:|:--:|:--:
dur|单次动画时长(秒)|`Number`|`-`|`6`
</full-width-table>
## dv-decoration-2(reverse)
<div class="decoration-contaier">
<dv-decoration-2 :reverse="true" style="width:5px;height:150px;" />
</div>
```html
<dv-decoration-2 :reverse="true" style="width:5px;height:150px;" />
```
<click-to-copy :info="info2r" />
## dv-decoration-3
<div class="decoration-contaier">
<dv-decoration-3 style="width:250px;height:30px;" />
</div>
```html
<dv-decoration-3 style="width:250px;height:30px;" />
```
<click-to-copy :info="info3" />
## dv-decoration-4
<div class="decoration-contaier">
<dv-decoration-4 style="width:5px;height:150px;" />
</div>
```html
<dv-decoration-4 style="width:5px;height:150px;" />
```
<click-to-copy :info="info4" />
### 配置
<full-width-table>
属性|说明|类型|可选值|默认值
:--:|:--:|:--:|:--:|:--:
dur|单次动画时长(秒)|`Number`|`-`|`3`
</full-width-table>
## dv-decoration-4(reverse)
<div class="decoration-contaier">
<dv-decoration-4 :reverse="true" style="width:250px;height:5px;" />
</div>
```html
<dv-decoration-4 :reverse="true" style="width:250px;height:5px;" />
```
<click-to-copy :info="info4r" />
## dv-decoration-5
<div class="decoration-contaier">
<dv-decoration-5 style="width:300px;height:40px;" />
</div>
```html
<dv-decoration-5 style="width:300px;height:40px;" />
```
<click-to-copy :info="info5" />
### 配置
<full-width-table>
属性|说明|类型|可选值|默认值
:--:|:--:|:--:|:--:|:--:
dur|单次动画时长(秒)|`Number`|`-`|`1.2`
</full-width-table>
## dv-decoration-6
<div class="decoration-contaier">
<dv-decoration-6 style="width:300px;height:30px;" />
</div>
```html
<dv-decoration-6 style="width:300px;height:30px;" />
```
<click-to-copy :info="info6" />
## dv-decoration-7
<div class="decoration-contaier font1">
<dv-decoration-7 style="width:150px;height:30px;">Decoration</dv-decoration-7>
</div>
```html
<dv-decoration-7 style="width:150px;height:30px;">Decoration</dv-decoration-7>
```
<click-to-copy :info="info7" />
## dv-decoration-8
<div class="decoration-contaier">
<dv-decoration-8 style="width:300px;height:50px;" />
</div>
```html
<dv-decoration-8 style="width:300px;height:50px;" />
```
<click-to-copy :info="info8" />
## dv-decoration-8(reverse)
<div class="decoration-contaier">
<dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
</div>
```html
<dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
```
<click-to-copy :info="info8r" />
## dv-decoration-9
<div class="decoration-contaier font2">
<dv-decoration-9 style="width:150px;height:150px;">66%</dv-decoration-9>
</div>
```html
<dv-decoration-9 style="width:150px;height:150px;">66%</dv-decoration-9>
```
<click-to-copy :info="info9" />
### 配置
<full-width-table>
属性|说明|类型|可选值|默认值
:--:|:--:|:--:|:--:|:--:
dur|单次动画时长(秒)|`Number`|`-`|`3`
</full-width-table>
## dv-decoration-10
<div class="decoration-contaier font2">
<dv-decoration-10 style="width:90%;height:5px;" />
</div>
```html
<dv-decoration-10 style="width:90%;height:5px;" />
```
<click-to-copy :info="info10" />
## dv-decoration-11
<div class="decoration-contaier font1">
<dv-decoration-11 style="width:200px;height:60px;">dv-decoration-11</dv-decoration-11>
</div>
```html
<dv-decoration-11 style="width:200px;height:60px;">dv-decoration-11</dv-decoration-11>
```
<click-to-copy :info="info11" />
## dv-decoration-12
<div class="decoration-contaier font1">
<dv-decoration-12 style="width:150px;height:150px;" />
</div>
```html
<dv-decoration-12 style="width:150px;height:150px;" />
```
<click-to-copy :info="info12" />
### 配置
<full-width-table>
属性|说明|类型|可选值|默认值
:--:|:--:|:--:|:--:|:--:
scanDur|扫描动画时长(秒)|`Number`|`-`|`3`
haloDur|光晕动画时长(秒)|`Number`|`-`|`2`
</full-width-table>
<script>
export default {
data () {
return {
info1: `<dv-decoration-1 style="width:200px;height:50px;" />`,
info2: `<dv-decoration-2 style="width:200px;height:5px;" />`,
info2r: `<dv-decoration-2 :reverse="true" style="width:5px;height:150px;" />`,
info3: `<dv-decoration-3 style="width:250px;height:30px;" />`,
info4: `<dv-decoration-4 style="width:5px;height:150px;" />`,
info4r: `<dv-decoration-4 :reverse="true" style="width:250px;height:5px;" />`,
info5: `<dv-decoration-5 style="width:300px;height:40px;" />"`,
info6: `<dv-decoration-6 style="width:300px;height:30px;" />`,
info7: `<dv-decoration-7 style="width:150px;height:30px;">Decoration</dv-decoration-7>`,
info8: `<dv-decoration-8 style="width:300px;height:50px;" />`,
info8r: `<dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />`,
info9: `<dv-decoration-9 style="width:150px;height:150px;">66%</dv-decoration-9>`,
info10: `<dv-decoration-10 style="width:90%;height:5px;" />`,
info11: `<dv-decoration-11 style="width:200px;height:60px;">dv-decoration-11</dv-decoration-11>`,
info12: `<dv-decoration-12 style="width:150px;height:150px;" />`
}
}
}
</script>
<style lang="less">
.decoration-contaier {
position: relative;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background-color: #282c34;
overflow: hidden;
color: #fff;
}
.font1 {
color: #7ec699;
font-weight: bold;
}
.font2 {
color: #7ec699;
font-size: 28px;
font-weight: bold;
text-shadow: 0 0 3px #7acaec;
}
</style>