# 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 | 默認圖標 |