fast-dataview-ui

Appearance

Return to top
On this page

BorderBox1 边框

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

基础用法

边框的宽高默认是100%。

BorderBox1 边框 
<template>
  <FBorderBox1>
    <div class="flex-center">
      BorderBox1 边框
    </div>
  </FBorderBox1>
</template>

自定义颜色和边框宽度

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

自定义颜色和边框宽度
color属性为string[]类型，数组的第一个元素是四个边角的颜色，第二个元素是线边框的颜色。
<template>
  <FBorderBox1 :color="['#2196f3','red']" backgroundColor="black" :strokeWidth="4">
    <div class="flex-center">
      自定义颜色和边框宽度
    </div>
  </FBorderBox1>
</template>

参数

参数名说明类型可选值默认值
color边框颜色string[]-['rgba(46, 96, 153,0.85)', 'rgba(71, 196, 245,0.85)']
backgroundColor边框内容的背景颜色string-transparent
strokeWidth边框宽度number-2

方法

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