Basic 基础组件

一些比较基础的通用组件使用方式

BasicTitle

用于显示标题，可以显示帮助按钮及文本

Usage

<template>
  <div>
    <BasicTitle helpMessage="提示1">标题</BasicTitle>
    <BasicTitle :helpMessage="['提示1', '提示2']">标题</BasicTitle>
  </div>
</template>
<script lang="ts">
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 lang="ts">
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 lang="ts">
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	默认图标