fast-dataview-ui

Appearance

Return to top
On this page

BorderBox2 边框

该边框使用svg标签绘制，可用于卡片，标题，导航组件里。

基础用法

边框的宽高默认是100%。

BorderBox2 边框 
<template>
  <FBorderBox2>
    <div class="flex-center" style="height:300px;">
      BorderBox2 边框
    </div>
  </FBorderBox2>
</template>

自定义颜色和边框宽度

color属性:用于修改边框颜色，接受string[]值
backgroundColor属性:用于修改边框内容的背景颜色，接受string值
strokeWidth属性:用于修改边框宽度，接受number值

自定义颜色和边框宽度
color属性为string[]类型，数组的第一个元素是流动边框的颜色。
<template>
  <FBorderBox2 :color="['#0080ff']" backgroundColor="black" :strokeWidth="4">
    <div class="flex-center" style="height:300px;">
      自定义颜色和边框宽度
    </div>
  </FBorderBox2>
</template>

自定义边框虚线和动画时长

stroke-dasharray属性:用于修改边框虚线间隔，接受string值
duration属性:用于修动画时长，接受number值

自定义边框虚线和动画时长 
<template>
  <FBorderBox2 stroke-dasharray="800 300" :duration="5" :strokeWidth="3" >
    <div class="flex-center" style="height:300px;">
      自定义边框虚线和动画时长
    </div>
  </FBorderBox2>
</template>

参数

参数名说明类型可选值默认值
color边框颜色string[]-['white']
backgroundColor边框内容的背景颜色string-transparent
strokeWidth边框宽度number-3
duration动画时长number-2
stroke-dasharray边框虚线string-300 300

方法

方法名类型说明
resize() => void手动调用 resize 方法使边框获取正确的高宽