Vben Admin

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

属性类型默认值说明
helpMessagestring｜string[]-标题右侧帮助按钮信息
spanbooleanfalse是否显示标题左侧蓝色色块
normalbooleanfalse将文字默认化，不加粗

Slots

名称说明
default标题文本

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

属性类型默认值说明
expandbooleanfalse箭头展开状态
topbooleanfalse箭头默认向上
bottombooleanfalse箭头默认向下
insetbooleanfalse取消 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

属性类型默认值可选值说明
fontSizestring14px-字体大小
colorstring#fff-颜色
textstring｜string[]--文本列表
showIndexbooleantrue-是否显示序号,在 text 为 string[]情况下生效
maxWidthstring600px-最大宽度
placementstringright-显示方向，参考 Tooltip 组件

Slots

名称说明
default默认图标