Basic · JeecgBoot Vue3前端文档

# Basic 基础组件一些比较基础的通用组件使用方式 ## BasicTitle 用于显示标题，可以显示帮助按钮及文本 ### Usage ```vue <template> <div> <BasicTitle helpMessage="提示1">标题</BasicTitle> <BasicTitle :helpMessage="['提示1', '提示2']">标题</BasicTitle> </div> </template> <script> import { BasicTitle } from '/@/components/Basic/index'; import { defineComponent } from 'vue'; export default defineComponent({ components: { BasicTitle }, }); </script> ``` ### Props | 属性 | 类型 | 默认值 | 说明 | | ----------- | ------------------ | ------- | ------------------------ | | helpMessage | `string｜string[]` | - | 标题右侧帮助按钮信息 | | span | `boolean` | `false` | 是否显示标题左侧蓝色色块 | | normal | `boolean` | `false` | 将文字默认化，不加粗 | ### Slots | 名称 | 说明 | | ------- | -------- | | default | 标题文本 | ## BasicArrow 带动画的箭头组件 ### Usage ```vue <template> <div> <BasicArrow :expand="false" /> </div> </template> <script> import { BasicArrow } from '/@/components/Basic/index'; import { defineComponent } from 'vue'; export default defineComponent({ components: { BasicArrow }, }); </script> ``` ### Props | 属性 | 类型 | 默认值 | 说明 | | ------ | --------- | ------- | ----------------------------- | | expand | `boolean` | `false` | 箭头展开状态 | | top | `boolean` | `false` | 箭头默认向上 | | bottom | `boolean` | `false` | 箭头默认向下 | | inset | `boolean` | `false` | 取消 padding/margin，用于内嵌 | ## BasicHelp 帮助按钮组件 ### Usage ```vue <template> <div> <BasicHelp :text="['提示1', '提示2']" /> <BasicHelp text="提示" /> </div> </template> <script> import { BasicHelp } from '/@/components/Basic/index'; import { defineComponent } from 'vue'; export default defineComponent({ components: { BasicHelp }, }); </script> ``` ### Props | 属性 | 类型 | 默认值 | 可选值 | 说明 | | --------- | ------------------ | ------- | ------ | ------------------------------------------ | | fontSize | `string` | `14px` | - | 字体大小 | | color | `string` | #fff | - | 颜色 | | text | `string｜string[]` | - | - | 文本列表 | | showIndex | `boolean` | true | - | 是否显示序号,在 text 为 string[]情况下生效 | | maxWidth | `string` | `600px` | - | 最大宽度 | | placement | `string` | `right` | - | 显示方向，参考 Tooltip 组件 | ### Slots | 名称 | 说明 | | ------- | -------- | | default | 默认图标 |