tl-uniapp

Triangulum UI 三角座 UI

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

注意：文档编撰格式参考 Element UI 组件文档。

安装

推荐使用 npm 的方式安装。

npm install triangulum-ui

引入

全局引入，在 pages.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 页面文件中写入以下内容

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

Form 表单

表单

基础用法

<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	—	—
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	隐藏字段但仍然会生成参数	boolean	true	false
title	字段标题	string	—	—
subtitle	副标题位于标题下方，当为 top 时位于标题右方	string	—	—
sidenote	旁注位于内容下方	string	—	—
require	配置必填项	boolean	true	false
labelColor	标签颜色	string	—	—
labelPosition	标签位置。可选顶部或左侧	object	top	left
isNarrow	是否紧凑样式	boolean	true	false

optionsRequest 适用：select, check	选项请求	object	—	—

Option of optionsRequest

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

param
nodeData

Filter-Bar 筛选栏

筛选栏

基础用法

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

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

Tl-Filter-Bar Attributes

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

Options of Filter-Form

详见 tl-form Config of Headers

Plain 朴素文本

朴素文本

基础用法

<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 朴素选择文本

朴素选择文本

基础用法

<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	—	—
theme	主题	string	—	—
size	尺寸	string	—	—
color	颜色	string	—	—
config	配置	object	—	{value: 'value', label: 'label'}

Input 输入框

输入框

基础用法

<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	最大输入长度 -1 为不限制	number	string, number	-1
placeholder	输入框为空时的占位符	string	—	—
confirm-type	确认类型详见 uniapp input	string
confirm-hold	确认类型详见 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 文本域

文本域

基础用法

<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 下拉选择器

下拉选择器

基础用法

<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	—	—
config	键值配置	object	—	{ value: 'value', label: 'label' }
color	颜色	string	—	—

Check 平辅选择框

平辅选择框

基础用法

<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	—	—
format	格式化结果适用：multiple 多选为真时默认 string 以 split 拼合分割	string	array	string
irreversible	是否不可以撤销	boolean	false	true

Time 时间选择器

时间选择器

基础用法

<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 日期拾取器

日期拾取器

基础用法

<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, number	—	—
end	截止	string, number	—	—
returnType	返回日期格式详见 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	联动值目前支持开始时间 start & end 联动	Object	{'start':{key:'bid_start_time',clear:false}}	—
rawItem	数据源	Object	—	—

Upload 上传控件

上传控件

基础用法

<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	上传请求配置详见 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	预览上传的图片时的裁剪模式详见 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 组件。

tl-uniapp

安装

引入

Form 表单

基础用法

Tl-Form Attributes

Option of Config

Option of Form-Header

Option of optionsRequest

Filter-Bar 筛选栏

基础用法

Tl-Filter-Bar Attributes

Options of Filter-Form

Plain 朴素文本

基础用法

Tl-Plain Attributes

Plain-Select 朴素选择文本

基础用法

Tl-Plain-Select Attributes

Input 输入框

基础用法

Tl-Input Attributes

Option of Config

Textarea 文本域

基础用法

Tl-Textarea Attributes

Select 下拉选择器

基础用法

Tl-Select Attributes

Check 平辅选择框

基础用法

Tl-Check Attributes

Time 时间选择器

基础用法

Tl-Time Attributes

Datetime-Picker 日期拾取器

基础用法

Tl-Check Attributes

Upload 上传控件

基础用法

Tl-Upload Attributes

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

版本说明

参考文献

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads