DataV-React

# 边框

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

边框内布局

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

重置宽高

如果边框组件的父容器宽高发生了变化，而边框组件没有侦知这一变化，边框就无法自适应父容器宽高。针对这种情况，你可以给边框绑定key值，在父容器宽高发生变化且完成渲染后更改key值，强制边框组件重新渲染，获取正确的宽高。但这会造成边框内的组件销毁和重新创建，在某些时候这可能并不是我们想要的，此时我们可以调用组件内置的setWH方法去重置边框组件的宽高以避免组件销毁和重新创建带来的非预期副作用。 ::: :::

# 自定义颜色

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

<BorderBox1 color={['red', 'green']} backgroundColor='blue'>BorderBox1</BorderBox1>
属性 说明 类型 可选值 默认值
color 自定义颜色 string[] - -
backgroundColor 背景色 string - -

TIP

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

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

# BorderBox1

<BorderBox1>BorderBox1</BorderBox1>
点击复制

# BorderBox2

<BorderBox2>BorderBox2</BorderBox2>
点击复制

# BorderBox3

<BorderBox3>BorderBox3</BorderBox3>
点击复制

# BorderBox4

<BorderBox4>BorderBox4</BorderBox4>
点击复制

# BorderBox4(reverse)

<BorderBox4 reverse="{true}">BorderBox4</BorderBox4>

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

点击复制

# BorderBox5

<BorderBox5>BorderBox5</BorderBox5>
点击复制

# BorderBox5(reverse)

<BorderBox5 reverse="{true}">BorderBox5</BorderBox5>
点击复制

# BorderBox6

<BorderBox6>BorderBox6</BorderBox6>
点击复制

# BorderBox7

<BorderBox7>BorderBox7</BorderBox7>
点击复制

# BorderBox8

<BorderBox8>BorderBox8</BorderBox8>
点击复制

# 特殊配置

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

# BorderBox8(reverse)

<BorderBox8 reverse="{true}">BorderBox8</BorderBox8>
点击复制

# BorderBox9

<BorderBox9>BorderBox9</BorderBox9>
点击复制

# BorderBox10

<BorderBox10>BorderBox10</BorderBox10>
点击复制

# BorderBox11

<BorderBox11>BorderBox11</BorderBox11>
点击复制

# 特殊配置

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

# BorderBox12

<BorderBox12>BorderBox12</BorderBox12>
点击复制

# BorderBox13

<BorderBox13>BorderBox13</BorderBox13>
点击复制

← 装饰 →