Triangulum UI 三角座 UI

三角座 UI。基于 Uni-App 的 VUE3 组件库——Жидзин（Zidjin）矢争系列组件库。

> 注意：文档编撰格式参考 [Element UI](https://element.eleme.cn) 组件文档。

### 安装

推荐使用 npm 的方式安装。

```shell
npm install triangulum-ui
```

### 引入

全局引入，在 pages.json 中写入以下内容：

```json
{
    "pages": [],
    "globalStyle": {
        "navigationStyle": "custom" // 启用自定义导航条
    },
    "easycom": {
        "autoscan": true, // 自动查找安装、引用、注册符合“components/组件名称/组件名称.vue”目录结构的组件。
        "custom": {
            "^tl-(.*)": "triangulum-ui/src/tl-$1/tl-$1.vue" // 自定义组件正则匹配规则，如果需要匹配node_modules内的vue文件，需要使用packageName/path/to/vue-file-$1.vue形式的匹配规则
        }
    }
}
```

局部引入，在 vue 页面文件中写入以下内容

```js
import {MuzItem, MuzListArea, ...} from 'muz-doraemon';
export default {
    components: {
        MuzItem,
		MuzListArea,
		...
    },
};
```

### Form 表单

表单

#### 基础用法

[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。

```vue
<template>
    <tl-form />
</template>

<script>
import { TlForm } from 'triangulum-ui';
export default {
    data: () => ({}),
};
</script>
```

#### Tl-Form Attributes

| 参数            | 说明                                        | 类型          | 可选值 | 默认值 |
| --------------- | ------------------------------------------- | ------------- | ------ | ------ |
| classes         | 自定义类名                                  | string        | —      | —      |
| styles          | 自定义样式                                  | object        | —      | —      |
| root-url        | 根域名。小程序/APP 需要添加域名标题         | string        | —      | —      |
| config          | 表单配置                                    | object        | —      | —      |
| form-header     | 表头配置                                    | array<object> | —      | —      |
| form-data       | 表单数据                                    | object        | —      | —      |
| editable        | 是否可编辑                                  | boolean       | ture   | false  |
| show-border     | 显示边框                                    | boolean       | ture   | false  |
| is-strict-param | 是否约束参数。将只根据 form-header 提交参数 | object        | —      | —      |

#### Option of Config

| 参数          | 说明                     | 类型    | 可选值 | 默认值 |
| ------------- | ------------------------ | ------- | ------ | ------ |
| formColor     | 表单颜色类名             | string  | —      | —      |
| contentSize   | 内容尺寸类名             | string  | —      | —      |
| labelWidth    | 标签宽度                 | string  | —      | 60px   |
| labelPosition | 标签位置。可选顶部或左侧 | object  | top    | left   |
| labelColor    | 标签颜色                 | string  | —      | —      |
| showConfirm   | 是否显示确认按钮         | boolean | true   | false  |
| submitText    | 确认（提交）按钮文字     | string  | —      | 提交   |
| viewRequest   | 详见 request             | object  | —      | —      |
| addRequest    | 详见 request             | object  | —      | —      |
| editRequest   | 详见 request             | object  | —      | —      |

#### Option of Form-Header

| 参数                                    | 说明                                              | 类型    | 可选值 | 默认值 |
| --------------------------------------- | ------------------------------------------------- | ------- | ------ | ------ |
| hide                                    | 隐藏字段<br />但仍然会生成参数                    | boolean | true   | false  |
| title                                   | 字段标题                                          | string  | —      | —      |
| subtitle                                | 副标题<br />位于标题下方，当为 top 时位于标题右方 | string  | —      | —      |
| sidenote                                | 旁注<br />位于内容下方                            | string  | —      | —      |
| require                                 | 配置必填项                                        | boolean | true   | false  |
| labelColor                              | 标签颜色                                          | string  | —      | —      |
| labelPosition                           | 标签位置。可选顶部或左侧                          | object  | top    | left   |
| isNarrow                                | 是否紧凑样式                                      | boolean | true   | false  |
|                                         |                                                   |         |        |        |
| optionsRequest<br />适用：select, check | 选项请求                                          | object  | —      | —      |

#### Option of optionsRequest

| 参数     | 说明     | 类型 | 可选值 | 默认值 |
| -------- | -------- | ---- | ------ | ------ |
| url      | 请求地址 |      |        |        |
|          |          |      |        |        |
| param    |          |      |        |        |
| nodeData |          |      |        |        |

####

### Filter-Bar 筛选栏

筛选栏

#### 基础用法

[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。

```vue
<template>
    <tl-filter-bar />
</template>

<script>
import { TlFilterBar } from 'triangulum-ui';
export default {
    data: () => ({}),
};
</script>
```

#### Tl-Filter-Bar Attributes

| 参数        | 说明         | 类型          | 可选值 | 默认值 |
| ----------- | ------------ | ------------- | ------ | ------ |
| filter-form | 筛选表单配置 | array<object> | —      | —      |

#### Options of Filter-Form

详见 tl-form Config of Headers

### Plain 朴素文本

朴素文本

#### 基础用法

```vue
<template>
    <tl-plain />
</template>

<script>
import { TlPlain } from 'triangulum-ui';
export default {
    data: () => ({}),
};
</script>
```

#### Tl-Plain Attributes

| 参数    | 说明       | 类型                  | 可选值 | 默认值 |
| ------- | ---------- | --------------------- | ------ | ------ |
| field   | 自定义类名 | string                | —      | —      |
| subhead | 内置小标题 | string                | —      | —      |
| unit    | 单位       | string                | —      | —      |
| value   | 默认值     | string, number, array | —      | —      |
| color   | 颜色       | string                | —      | —      |

### Plain-Select 朴素选择文本

朴素选择文本

#### 基础用法

```vue
<template>
    <tl-plain-select />
</template>

<script>
import { TlPlainSelect } from 'triangulum-ui';
export default {
    data: () => ({}),
};
</script>
```

#### Tl-Plain-Select Attributes

| 参数        | 说明       | 类型                  | 可选值 | 默认值                           |
| ----------- | ---------- | --------------------- | ------ | -------------------------------- |
| field       | 自定义类名 | string                | —      | —                                |
| subhead     | 内置小标题 | string                | —      | —                                |
| unit        | 单位       | string                | —      | —                                |
| model-value | 双向绑定值 | string, number, array | —      | —                                |
| options     | 选项列表   | array<object>         | —      | —                                |
| theme       | 主题       | string                | —      | —                                |
| size        | 尺寸       | string                | —      | —                                |
| color       | 颜色       | string                | —      | —                                |
| config      | 配置       | object                | —      | {value: 'value', label: 'label'} |

### Input 输入框

输入框

#### 基础用法

```vue
<template>
    <tl-input />
</template>

<script>
import { TlInput } from 'triangulum-ui';
export default {
    data: () => ({}),
};
</script>
```

#### Tl-Input Attributes

| 参数            | 说明                                                        | 类型           | 可选值                      | 默认值 |
| --------------- | ----------------------------------------------------------- | -------------- | --------------------------- | ------ |
| subhead         | 自定义类名                                                  | string         | —                           | —      |
| model-value     | 双向绑定值                                                  | string, number | —                           | —      |
| type            | 输入框类型                                                  | string         | number, idcard, digit, text | text   |
| show-border     | 是否显示边框                                                | boolean        | true                        | false  |
| disabled        | 是否禁用输入框                                              | boolean        | true                        | false  |
| color           | 文字颜色                                                    | string         | red, blue, ...              | —      |
| clearable       | 是否显示清除控件                                            | boolean        | false                       | true   |
| password        | 是否密码类型                                                | boolean        | true                        | false  |
| max-length      | 最大输入长度<br />-1 为不限制                               | number         | string, number              | -1     |
| placeholder     | 输入框为空时的占位符                                        | string         | —                           | —      |
| confirm-type    | 确认类型<br />详见 uniapp input                             | string         |                             |        |
| confirm-hold    | 确认类型<br />详见 uniapp input                             | boolean        | true                        | false  |
| hold-keyboard   | 点击页面的时候不收起键盘                                    | boolean        | true                        | false  |
| focus           | 自动获取焦点                                                | boolean        | true                        | false  |
| auto-blur       | 键盘收起时，是否自动失去焦点，目前仅 App3.0.0+有效          | boolean        | true                        | false  |
| cursor          | 指定 focus 时光标的位置                                     | string, number | —                           | —      |
| cursor-spacing  | 输入框聚焦时底部与键盘的距离                                | string, number | —                           | —      |
| selection-start | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用   | string, number | —                           | —      |
| selection-dnd   | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | string, number | —                           | —      |
| adjust-position | 键盘弹起时，是否自动上推页面                                | boolean        | true                        | false  |

#### Option of Config

| 参数          | 说明                     | 类型    | 可选值 | 默认值 |
| ------------- | ------------------------ | ------- | ------ | ------ |
| formColor     | 表单颜色类名             | string  | —      | —      |
| contentSize   | 内容尺寸类名             | string  | —      | —      |
| labelWidth    | 标签宽度                 | string  | —      | 60px   |
| labelPosition | 标签位置。可选顶部或左侧 | object  | top    | left   |
| labelColor    | 标签颜色                 | string  | —      | —      |
| showConfirm   | 是否显示确认按钮         | boolean | true   | false  |
| submitText    | 确认（提交）按钮文字     | string  | —      | 提交   |
| viewRequest   | 详见 request             | object  | —      | —      |
| addRequest    | 详见 request             | object  | —      | —      |
| editRequest   | 详见 request             | object  | —      | —      |

### Textarea 文本域

文本域

#### 基础用法

[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。

```vue
<template>
    <tl-textarea />
</template>

<script>
import { TlTextarea } from 'triangulum-ui';
export default {
    data: () => ({}),
};
</script>
```

#### Tl-Textarea Attributes

| 参数                     | 说明                                                                         | 类型           | 可选值 | 默认值 |
| ------------------------ | ---------------------------------------------------------------------------- | -------------- | ------ | ------ |
| model-value              | 双向绑定值                                                                   | string, number | —      | —      |
| placeholder              | 输入框为空时占位符                                                           | string         | —      | —      |
| row                      | 输入框高度，即行数                                                           | number         | —      | 3      |
| confirm-type             | 设置键盘右下角按钮的文字，仅微信小程序，App-vue 和 H5 有效                   | string         | —      | —      |
| disabled                 | 是否禁用                                                                     | boolean        | true   | false  |
| show-border              | 是否显示边框                                                                 | boolean        | true   | false  |
| count                    | 是否显示统计字数                                                             | boolean        | true   | false  |
| focus                    | 是否自动获取焦点，nvue 不支持，H5 取决于浏览器的实现                         | boolean        | true   | false  |
| auto-height              | 是否自动增加高度                                                             | boolean        | true   | false  |
| fixed                    | 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true | boolean        | true   | false  |
| cursor-spacing           | 指定光标与键盘的距离                                                         | number         | —      | —      |
| cursor                   | 指定 focus 时的光标位置                                                      | string, number | —      | —      |
| show-confirm-bar         | 是否显示键盘上方带有”完成“按钮那一栏                                         | boolean        | true   | false  |
| selection-start          | 光标起始位置，自动聚焦时有效，需与 selection-end 搭配使用                    | boolean        | true   | false  |
| selection-end            | 光标结束位置，自动聚焦时有效，需与 selection-start 搭配使用                  | boolean        | true   | false  |
| adjust-position          | 键盘弹起时，是否自动上推页面                                                 | boolean        | true   | false  |
| disable-default-padding  | 是否去掉 iOS 下的默认内边距，只微信小程序有效                                | boolean        | true   | false  |
| hold-keyboard            | focus 时，点击页面的时候不收起键盘，只微信小程序有效                         | boolean        | true   | false  |
| max-length               | 最大输入长度，设置为 -1 的时候不限制最大长度                                 | string, number | —      | —      |
| border                   | 边框类名                                                                     |                |        |        |
| ignore-composition-event | 用于处理或者过滤输入框内容的方法                                             | boolean        | true   | false  |

### Select 下拉选择器

下拉选择器

#### 基础用法

[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。

```vue
<template>
    <tl-select />
</template>

<script>
import { TlSelect } from 'triangulum-ui';
export default {
    data: () => ({}),
};
</script>
```

#### Tl-Select Attributes

| 参数        | 说明       | 类型           | 可选值 | 默认值                             |
| ----------- | ---------- | -------------- | ------ | ---------------------------------- |
| subhead     | 内置小标题 | string         | —      | —                                  |
| tip         | 提示       | string         | —      | —                                  |
| model-value | 双向绑定值 | string, number | —      | —                                  |
| options     | 选项列表   | array<object>  | —      | —                                  |
| config      | 键值配置   | object         | —      | { value: 'value', label: 'label' } |
| color       | 颜色       | string         | —      | —                                  |

### Check 平辅选择框

平辅选择框

#### 基础用法

[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。

```vue
<template>
    <tl-check />
</template>

<script>
import { TlCheck } from 'triangulum-ui';
export default {
    data: () => ({}),
};
</script>
```

#### Tl-Check Attributes

| 参数         | 说明                                                                         | 类型                  | 可选值              | 默认值                             |
| ------------ | ---------------------------------------------------------------------------- | --------------------- | ------------------- | ---------------------------------- |
| field        | 字段                                                                         | string                | —                   | —                                  |
| title        | 标题                                                                         | string                | —                   | —                                  |
| model-value  | 双向绑定值                                                                   | string, number, array | —                   | —                                  |
| theme        | 主题尺寸                                                                     | string                | auto / mini / large | —                                  |
| check-size   | 选框尺寸                                                                     | string                | —                   | v                                  |
| multiple     | 是否多选                                                                     | boolean               | true                | false                              |
| split        | 分割符                                                                       | string                | —                   | ;                                  |
| config       | 键值配置                                                                     | object                | —                   | { value: 'value', label: 'label' } |
| options      | 选项列表                                                                     | array<object>         | —                   | —                                  |
| format       | 格式化结果<br />适用：multiple 多选为真时<br />默认 string 以 split 拼合分割 | string                | array               | string                             |
| irreversible | 是否不可以撤销                                                               | boolean               | false               | true                               |

### Time 时间选择器

时间选择器

#### 基础用法

[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。

```vue
<template>
    <tl-time />
</template>

<script>
import { TlTime } from 'triangulum-ui';
export default {
    data: () => ({}),
};
</script>
```

#### Tl-Time Attributes

| 参数        | 说明                                             | 类型           | 可选值                              | 默认值       |
| ----------- | ------------------------------------------------ | -------------- | ----------------------------------- | ------------ |
| mode        | 表示选择器的粒度???                              | string         | day/month/year/time                 | day          |
| fields      | ???                                              | string         | day/month/year/time                 | day          |
| subhead     | 内置小标题                                       | string         | —                                   | —            |
| tip         | 提示文字                                         | string         | —                                   | —            |
| model-value | 双向绑定值                                       | string, number | —                                   | —            |
| start       | 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" | string         | —                                   | —            |
| end         | 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" | string         | —                                   | —            |
| format      | 时间格式                                         | string         | —                                   | 'yyyy-mm-dd' |
| theme       | 主题颜色                                         | string         | primary/success/warning/danger/info | —            |

###

### Datetime-Picker 日期拾取器

日期拾取器

#### 基础用法

[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。

```vue
<template>
    <tl-datetime-picker />
</template>

<script>
import { TlDatetimePicker } from 'triangulum-ui';
export default {
    data: () => ({}),
};
</script>
```

#### Tl-Check Attributes

| 参数             | 说明                                                       | 类型                                  | 可选值                                       | 默认值 |
| ---------------- | ---------------------------------------------------------- | ------------------------------------- | -------------------------------------------- | ------ |
| type             | 字段                                                       | string                                | —                                            | —      |
| model-value      | 双向绑定值                                                 | string, number, array, Date           | —                                            | —      |
| start            | 开始日期                                                   | string<yyyy-mm-dd>, number<timestamp> | —                                            | —      |
| end              | 截止                                                       | string<yyyy-mm-dd>, number<timestamp> | —                                            | —      |
| returnType       | 返回日期格式<br />详见 uni-datetime-picker                 | string                                | —                                            | string |
| showBorder       | 是否有边框                                                 | boolean                               | true                                         | false  |
| rangeSeparator   | 选择范围时的分隔符                                         | string                                | —                                            | "-"    |
| placeholder      | 非范围选择时的占位内容                                     | string                                | —                                            | "-"    |
| startPlaceholder | 范围选择时开始日期的占位内容                               | string                                | —                                            | "-"    |
| endPlaceholder   | 范围选择时结束日期的占位内容                               | string                                | —                                            | "-"    |
| disabled         | 禁用选择                                                   | boolean                               | true                                         | false  |
| clearIcon        | 是否显示清除按钮                                           | boolean                               | false                                        | true   |
| hideSecond       | 是否显示秒，只显示时分                                     | boolean                               | true                                         | false  |
| lastDays         | 过去几天。注：不含当天，''不限制，0 当天，负值当天后延天数 | string, number                        | —                                            | —      |
| nextDays         | 未来几天。注：不含当天，''不限制，0 当天，负值当天向前天数 | string, number                        | —                                            | —      |
| chain            | 联动值<br />目前支持开始时间 start & end 联动              | Object                                | {'start':{key:'bid_start_time',clear:false}} | —      |
| rawItem          | 数据源                                                     | Object                                | —                                            | —      |

### Upload 上传控件

上传控件

#### 基础用法

```vue
<template>
    <tl-upload />
</template>

<script>
import { TlUpload } from 'triangulum-ui';
export default {
    data: () => ({}),
};
</script>
```

#### Tl-Upload Attributes

| 参数                 | 说明                                                                                         | 类型           | 可选值                         | 默认值                     |
| -------------------- | -------------------------------------------------------------------------------------------- | -------------- | ------------------------------ | -------------------------- |
| list-type            | 列表类型                                                                                     | string         | text, picture                  | picture                    |
| plain                | 是否朴素组件                                                                                 | boolean        | true                           | false                      |
| root-url             | 根域名。小程序/APP 需要添加域名标题                                                          | string         | —                              | —                          |
| upload-reques-config | 上传请求配置<br />详见 request                                                               | object         | —                              | —                          |
| accept               | 接受的文件类型,                                                                              | string         | all, media, image, file, video | all                        |
| capture              | 图片或视频拾取模式，当 accept 为 image 类型时设置 capture 可选额外 camera 可以直接调起摄像头 | string, array  | "album,camera"                 | ['album', 'camera']        |
| compressed           | 当 accept 为 video 时生效，是否压缩视频                                                      | boolean        | false                          | true                       |
| camera               | 当 accept 为 video 时生效                                                                    | string         | back, front                    | back                       |
| max-duration         | 当 accept 为 video 时生效，拍摄视频最长拍摄时间，单位秒                                      | number         | —                              | 60                         |
| use-before-read      | 是否开启文件读取前事件                                                                       | boolean        | true                           | false                      |
| after-read           | 读取后的处理函数                                                                             | boolean        | true                           | false                      |
| preview-full-image   | 是否显示组件自带的图片预览功能                                                               | boolean        | true                           | false                      |
| max-count            | 最大上传数量                                                                                 | string, number | —                              | 8                          |
| split                | 当为字符串时候的拆分符                                                                       | string         | —                              | ';'                        |
| auto-upload          | 是否自动上传                                                                                 | boolean        | false                          | true                       |
| disabled             | 是否禁用                                                                                     | boolean        | true                           | false                      |
| image-mode           | 预览上传的图片时的裁剪模式<br />详见 uniapp image 组件 mode 属性一致                         | string         | —                              | aspectFill                 |
| name                 | 标识符，可以在回调函数的第二项参数中获取                                                     | string         | —                              | file                       |
| size-type            | 所选的图片的尺寸, 可选值为 original compressed                                               | array          | —                              | ['original', 'compressed'] |
| multiple             | 是否开启图片多选，部分安卓机型不支持                                                         | boolean        | true                           | false                      |
| deletable            | 是否展示删除按钮                                                                             | boolean        | false                          | true                       |
| max-size             | 文件大小限制，单位为 byte                                                                    | string, number | —                              | —                          |
| model-value          | 双向绑定值                                                                                   | string, array  | —                              | —                          |
| upload-text          | 上传区域的提示文字                                                                           | string         | —                              | —                          |
| upload-icon          | 上传区域的图标                                                                               | string         | —                              | —                          |
| upload-icon-size     | 上传区域的大小                                                                               | string         | —                              | —                          |
| width                | 内部预览图片区域和选择图片按钮的区域宽度                                                     | string, number | —                              | —                          |
| height               | 内部预览图片区域和选择图片按钮的区域高度                                                     | string, number | —                              | —                          |
| preview-image        | 是否在上传完成后展示预览图                                                                   | boolean        | true                           | false                      |
| show-menu            | pdf 预览显示按钮 非 H5 有效                                                                  | boolean        | true                           | false                      |
| result-type          | 返回格式                                                                                     | string         | string, array                  | array                      |

### Wechat-Web-Sdk 微信网页分享件

### 版本说明

**V0.0.0.20230602-alpha**

正式发布支持 Vue3 版本的 Triangulum UI 组件。

### 参考文献