边框

您所在的位置:网站首页 数据大屏组件边框 边框

边框

2024-04-13 07:52| 来源: 网络整理| 查看: 265

# 边框

边框均由SVG元素绘制,体积轻量不失真,它们的使用极为方便。(React版open in new window)

边框内布局

边框组件默认宽高均为 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(); // 按需使用 刷新组件宽高状态 const refresh = () => { borderBoxRef.value?.refreshLayoutSize(); }; return () => { return Welcome ; }; }, }); # 自定义颜色

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

BorderBox1 属性说明类型可选值默认值color自定义颜色string[]--backgroundColor背景色string--

TIP

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

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

# BorderBox1BorderBox1 点击复制复制成功# BorderBox2BorderBox2 点击复制复制成功# BorderBox3BorderBox3 点击复制复制成功# BorderBox4# NormalBorderBox4 点击复制复制成功# ReverseBorderBox4 点击复制复制成功# 配置属性说明类型可选值默认值reverse反转渲染boolean-false# BorderBox5# NormalBorderBox5 点击复制复制成功# ReverseBorderBox5 点击复制复制成功# 配置属性说明类型可选值默认值reverse反转渲染boolean-false# BorderBox6BorderBox6 点击复制复制成功# BorderBox7BorderBox7 点击复制复制成功# BorderBox8# NormalBorderBox8 点击复制复制成功# ReverseBorderBox8 点击复制复制成功# 配置属性说明类型可选值默认值duration单次动画时长(秒)number-3reverse反转渲染boolean-false# BorderBox9BorderBox9 点击复制复制成功# BorderBox10BorderBox10 点击复制复制成功# BorderBox11BorderBox11 点击复制复制成功# 配置属性说明类型可选值默认值title边框标题string-''titleWidth标题宽度number-250# BorderBox12BorderBox12 点击复制复制成功# BorderBox13BorderBox13 点击复制复制成功


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3