tl-uniapp
Version:
自主开发的UniApp组件——Жидзин（triangulum-ui）系列组件库。用于组件
535 lines (423 loc) • 34.5 kB
Markdown
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 组件。
### 参考文献