边框

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

边框内布局

边框组件默认宽高均为 100%，边框内部的节点将被 slot 插槽分发至边框组件下 class 为dv-border-box-content的容器内，如有布局需要，请针对该容器布局，以免产生样式冲突，导致边框显示异常。（如果配置了 classNamePrefix，class 的 dv-前缀将被修改，以实际设置为准）

注意事项

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

重置宽高

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

查看 refreshLayoutSize 使用示例

import { BorderBox1 } from '@dataview/datav-vue3';
import { defineComponent, ref } from 'vue';

import type { ExposeWithRefreshLayoutSize } from '@dataview/datav-vue3';
import type { ComponentPublicInstance } from 'vue';

export const App = /*#__PURE__*/ defineComponent({
  setup() {
    const borderBoxRef = ref<ComponentPublicInstance<{}, ExposeWithRefreshLayoutSize>>();

    // 按需使用 刷新组件宽高状态
    const refresh = () => {
      borderBoxRef.value?.refreshLayoutSize();
    };

    return () => {
      return <BorderBox1 ref={borderBoxRef}> Welcome </BorderBox1>;
    };
  },
});

自定义颜色

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

<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

Normal

<BorderBox4>BorderBox4</BorderBox4>

点击复制复制成功

Reverse

<BorderBox4 :reverse="true">BorderBox4</BorderBox4>

点击复制复制成功

配置

属性	说明	类型	可选值	默认值
reverse	反转渲染	boolean	-	false

BorderBox5

Normal

<BorderBox5>BorderBox5</BorderBox5>

点击复制复制成功

Reverse

<BorderBox5 :reverse="true">BorderBox5</BorderBox5>

点击复制复制成功

配置

属性	说明	类型	可选值	默认值
reverse	反转渲染	boolean	-	false

BorderBox6

<BorderBox6>BorderBox6</BorderBox6>

点击复制复制成功

BorderBox7

<BorderBox7>BorderBox7</BorderBox7>

点击复制复制成功

BorderBox8

Normal

<BorderBox8>BorderBox8</BorderBox8>

点击复制复制成功

Reverse

<BorderBox8 :reverse="true">BorderBox8</BorderBox8>

点击复制复制成功

配置

属性	说明	类型	可选值	默认值
duration	单次动画时长(秒)	number	-	3
reverse	反转渲染	boolean	-	false

BorderBox9

<BorderBox9>BorderBox9</BorderBox9>

点击复制复制成功

BorderBox10

<BorderBox10>BorderBox10</BorderBox10>

点击复制复制成功

BorderBox11

<BorderBox11 title="BorderBox11">BorderBox11</BorderBox11>

点击复制复制成功

配置

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

BorderBox12

<BorderBox12>BorderBox12</BorderBox12>

点击复制复制成功

BorderBox13

<BorderBox13>BorderBox13</BorderBox13>

点击复制复制成功