# 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

名称	说明
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

属性	类型	默认值	说明
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

名称	说明
default	默认图标

← Button Page →