Basic 基础组件
一些比较基础的通用组件使用方式
BasicTitle
用于显示标题，可以显示帮助按钮及文本
Usage
<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
BasicArrow
带动画的箭头组件
Usage
<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
<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
Vben Admin