FeDataV

# 边框

边框均由SVG元素绘制，体积轻量不失真，它们的使用极为方便。

边框内布局

边框组件默认宽高均为100%，边框内部的节点将被slot插槽分发至边框组件下class为border-box-content的容器内，如有布局需要，请针对该容器布局，以免产生样式冲突，导致边框显示异常。

注意事项

建议把边框内的节点封装成组件，以组件的形式置入边框。这是因为slot的渲染机制较为特殊，如果你要在组件mounted后对边框内置入的节点进行页面渲染状态敏感的操作（获取DOM宽高，实例化echarts图表等），可能会发生非预期的结果。比如获取的DOM宽高为0，封装成组件后可避免这种情况。

重置宽高

如果边框组件的父容器宽高发生了变化，而边框组件没有侦知这一变化，边框就无法自适应父容器宽高。针对这种情况，你可以给边框绑定key值，在父容器宽高发生变化且完成渲染后更改key值，强制销毁边框组件实例并重新渲染，重新获取宽高。但这会造成边框内的组件同样被销毁重新渲染，这会带来额外的性能消耗，并导致组件状态丢失，此时我们可以调用组件内置的initWH方法去重置边框组件的宽高以避免销毁实例重新渲染带来的非预期副作用。

# 自定义颜色

所有边框均支持自定义颜色及背景色，配置项及示例如下。

<dv-border-box-1 :color="['red', 'green']" backgroundColor="blue" >dv-border-box-1</dv-border-box-1>
属性 说明 类型 可选值 默认值
color 自定义颜色 string[] - -
backgroundColor 背景色 string - -

TIP

color属性支持配置两个颜色，一主一副。

颜色类型可以为颜色关键字、十六进制色、RGB及RGBA。

# dv-border-Box-1

dv-border-box-1
<dv-border-box-1>dv-border-box-1</dv-border-box-1>
点击复制

# dv-border-box-2

dv-border-box-2
<dv-border-box-2>dv-border-box-2</dv-border-box-2>
点击复制

# dv-border-box-3

dv-border-box-3
<dv-border-box-3>dv-border-box-3</dv-border-box-3>
点击复制

# dv-border-box-4

dv-border-box-4
<dv-border-box-4>dv-border-box-4</dv-border-box-4>
点击复制

# dv-border-box-4(reverse)

dv-border-box-4
<dv-border-box-4 :reverse="true">dv-border-box-4</dv-border-box-4>

与上边的边框组件略有不同的是，该组件具有翻转形态，你只需要设置reverse属性为true即可

点击复制

# dv-border-box-5

dv-border-box-5
<dv-border-box-5>dv-border-box-5</dv-border-box-5>
点击复制

# dv-border-box-5(reverse)

dv-border-box-5
<dv-border-box-5 :reverse="true">dv-border-box-5</dv-border-box-5>
点击复制

# dv-border-box-6

dv-border-box-6
<dv-border-box-6>dv-border-box-6</dv-border-box-6>
点击复制

# dv-border-box-7

dv-border-box-7
<dv-border-box-7>dv-border-box-7</dv-border-box-7>
点击复制

# dv-border-box-8

dv-border-box-8
<dv-border-box-8>dv-border-box-8</dv-border-box-8>
点击复制

# 特殊配置

属性 说明 类型 可选值 默认值
dur 单次动画时长(秒) Number - 3

# dv-border-box-8(reverse)

dv-border-box-8
<dv-border-box-8 :reverse="true">dv-border-box-8</dv-border-box-8>
点击复制

# dv-border-box-9

dv-border-box-9
<dv-border-box-9>dv-border-box-9</dv-border-box-9>
点击复制

# dv-border-box-10

dv-border-box-10
<dv-border-box-10>dv-border-box-10</dv-border-box-10>
点击复制

# dv-border-box-11

dv-border-box-11
dv-border-box-11
<dv-border-box-11 title="dv-border-box-11">dv-border-box-11</dv-border-box-11>
点击复制

# 特殊配置

属性 说明 类型 可选值 默认值
title 边框标题 String - ''
titleWidth 标题宽度 Number - 250

# dv-border-box-12

dv-border-box-12
<dv-border-box-12>dv-border-box-12</dv-border-box-12>
点击复制

# dv-border-box-13

dv-border-box-13
<dv-border-box-13>dv-border-box-13</dv-border-box-13>
点击复制

# 以下为部门新增组件

# dv-border-box-14

这是标题
dv-border-box-14
显示代码

# 配置

属性 说明 类型 可选值 默认值
title 边框标题 String - ''
titleWidth 标题宽度 Number - 206
titleHeight 标题高度 Number - 56
backgroundColor 背景颜色 String - transparent
color 闪动边框颜色 Array - ['#6586ec', '#2cf7fe']

# dv-border-box-15

这是标题
dv-border-box-15
显示代码

# 配置

属性 说明 类型 可选值 默认值
title 边框标题 String - ''
backgroundColor 背景颜色 String - #07123e
titleOptions 标题样式 Object - { fontSize: "14px", color: "#fff", fontWeight: 400 }

# Slots插槽

名称 说明
title 边框标题

# dv-border-box-16

dv-border-box-16
显示代码

# 配置

属性 说明 类型 可选值 默认值
color 闪动边框颜色 Array - ["#91F6FF", "#058CED", "#00D6FF"]
dur 单次动画时长(秒) Number - 0.5

# dv-border-box-17

这是标题
dv-border-box-17
显示代码

# 配置

属性 说明 类型 可选值 默认值
title 边框标题 String - ''
backgroundColor 背景颜色 String - #051332
titleOptions 标题样式 Object - { fontSize: "18px", color: "#fff", fontWeight: 400 }
color 滚动边框颜色 Array - ["#336BB4", "#A3E9FD"]
dur 单次动画时长(秒) Number - 3
reverse 是否逆向滚动 Boolean true false

# Slots插槽

名称 说明
title 边框标题

# dv-border-box-18

这是标题
dv-border-box-18
显示代码

# 配置

属性 说明 类型 可选值 默认值
title 边框标题 String - ''
backgroundColor 背景颜色 String - #060f25
titleOptions 标题样式 Object - { fontSize: "16px", color: "#fff", fontWeight: 400 }

# Slots插槽

名称 说明
title 边框标题

# dv-border-box-19

这是一串比较长的标题哟～
dv-border-box-19
显示代码

# 配置

属性 说明 类型 可选值 默认值
title 边框标题 String - ''
titleOptions 标题样式 Object - { fontSize: "18px", color: "#fff", fontWeight: 400 }
dur 单次动画时长(秒) Number - 3
animated 是否开启动画 Boolean false true

# Slots插槽

名称 说明
title 边框标题

# dv-border-box-20

这是标题
dv-border-box-20
显示代码

# 配置

属性 说明 类型 可选值 默认值
title 边框标题 String - ''
titleOptions 标题样式 Object - { fontSize: "22px", color: "#fff", fontWeight: 600, letterSpacing: "2px" }

# Slots插槽

名称 说明
title 边框标题

# dv-border-box-21

这是标题
dv-border-box-21
显示代码

# 配置

属性 说明 类型 可选值 默认值
title 边框标题 String - ''
titleOptions 标题样式 Object - { fontSize: "18px", color: "#fff", fontWeight: 400 }

# Slots插槽

名称 说明
title 边框标题

# dv-border-box-22

这是标题
dv-border-box-22
显示代码

# 配置

属性 说明 类型 可选值 默认值
title 边框标题 String - ''
backgroundColor 背景颜色 String - #13263A
titleOptions 标题样式 Object - { fontSize: "18px", color: "#fff", fontWeight: 400 }

# Slots插槽

名称 说明
title 边框标题

# dv-border-box-23

这是标题
dv-border-box-23
显示代码

# 配置

属性 说明 类型 可选值 默认值
title 边框标题 String - ''
backgroundColor 背景颜色 String - #061F31
titleOptions 标题样式 Object - { fontSize: "18px", color: "#fff", fontWeight: 400 }

# Slots插槽

名称 说明
title 边框标题

# dv-border-box-24

这是标题
dv-border-box-24
显示代码

# 配置

属性 说明 类型 可选值 默认值
title 边框标题 String - ''
backgroundColor 背景颜色 String - #071f31
titleOptions 标题样式 Object - { fontSize: "18px", color: "#fff", fontWeight: 400 }

# Slots插槽

名称 说明
title 边框标题

← 大标题 →