钉钉小程序(E应用)UI组件库
✍️Young-ddui是钉钉小程序(E应用)UI组件库，提供API接口主力开发者快速搭建应用。
✍️ 本项目基于 MIT 协议，请自由地享受和参与开源
主要功能
* 支持父子组件节点获取 - $parent/$children
``
this.$parent/this.$children
`
* 支持页面ref获取组件对象 - 组件定义refName
`
this.$ref[refName]
`
安装
`
npm i young-ddui
`
使用
page.json引用
`
"usingComponents": {
"y-row":"young-ddui/es/row/index",
"y-col": "young-ddui/es/col/index",
"y-tabs": "young-ddui/es/tabs/index",
"y-tab-item": "young-ddui/es/tabs/tab-item/index",
"y-card": "young-ddui/es/card/index",
"y-tabbar": "young-ddui/es/tabbar/index",
"y-tabbar-item": "young-ddui/es/tabbar/tabbar-item/index",
"y-tag": "young-ddui/es/tag/index",
"y-timeline": "young-ddui/es/timeline/index",
"y-timeline-item": "young-ddui/es/timeline/timeline-item/index"
}
``
组件
Button
按钮
| 参数 | 说明 | 类型 | 可选值 |默认值|
|:---- |:----|:----|:----|:----|
|className|自定义class | string|—|""|
|size|尺寸|string|mini/small/large/block|"normal"|
|type|类型|string|primary/danger/warning| "default"|
|plain|是否镂空|boolean|—|false|
|disabled|禁用|boolean|—| false|
|round|是否圆角| boolean| —|false|
|square|是否方形|boolean| —|false|
|loading| loading状态|boolean|—|false|
|onClick|click事件|function|—|
|formType|按钮类型|string|submit/reset|—|
|openType|开放能力|string| share | —|
|hoverClass|按钮按下去的样式类|string|—|—|
$3
| 名 称 | 说 明
|:---- |:----|
—| 自定义内容
Badge
徽章
| 参数 | 说明 | 类型 | 可选值 |默认值|
|:---- |:----|:----|:----|:----|
className|自定义class | string|—|""
overflowCount| 超出值显示点| number|—|99
text| 内容|string|—|—
dot|强制显示点|boolean|—|false
onClick|click事件|function|—
$3
| 名 称 | 说 明
|:---- |:----|
inner| 自定义内容
Card
卡片
| 参数 | 说明 | 类型 | 可选值 |默认值|
|:---- |:----|:----|:----|:----|
className|自定义class | string|—|""
thumb| 缩略图地址|string| —|—
title| 标题|string|—|—
subTitle|副标题|string|—|—
onClick|click事件|function|—
arrow|是否显示箭头|boolean|—|true
$3
| 名 称 | 说 明
|:---- |:----|
content| 自定义内容
footer|自定义 footer
Row
行布局
| 参数 | 说明 | 类型 | 可选值 |默认值|
|:---- |:----|:----|:----|:----|
className|自定义class | string|—|""
wrap|换行控制|string|同flex-wrap布局|"nowrap"
direction|换行排列方向|string|同flex-direction布局|"row"
align|对齐|string|同flex布局align-items|"start"
justify|对齐|string|同flex布局justify-content|"start"
alignContent|对齐|string|同flex-align-content布局|"start"
$3
| 名 称 | 说 明
|:---- |:----|
—|自定义内容
Col
列布局
$3
| 名 称 | 说 明
|:---- |:----|
—|自定义内容
Dialog
模态框
| 参数 | 说明 | 类型 | 可选值 |默认值|
|:---- |:----|:----|:----|:----|
className|自定义class | string|—|""
disableScroll|禁止滚动|boolean|—|true
visible|是否显示|boolean|—|false
title|标题|string|—|""
mask|是否显示蒙板层|boolean|—|true
showCancelButton|是否显示取消按钮|boolean|—|true
showConfirmButton|是否显示确定按钮|boolean|—|true
confirmButtonText|确认按钮文字|string|—|"确认"
cancelButtonText|取消按钮文字|string|—|"取消"
onClose|消按钮函数|function|—
onConfirm|确认按钮函数|function|—
$3
| 名 称 | 说 明
|:---- |:----|
—|自定义内容
header|自定义标题
footer|自定义底部（按钮区域）
Notify
消息提示
$3
| 名 称 | 说 明 | 类型| 参数
|:---- |:----|:----|:----|
show| 显示方法|object|params
#### params
| 参数 | 说明 | 类型 | 可选值 |默认值|
|:---- |:----|:----|:----|:----|
text|内容 | string|""|""
duration|关闭时长 | number|—|3000
type|类型 | string|"success","error,"warning"|""
Tabbar
底部菜单栏
| 参数 | 说明 | 类型 | 可选值 |默认值|
|:---- |:----|:----|:----|:----|
className|自定义class | string|—|""
active|激活状态|number|tabbar个数|-1
onChange|tabbar切换回调函数| function|—|—
$3
| 名 称 | 说 明
|:---- |:----|
—|自定义内容
Tabbar-item
底部菜单栏-内容
| 参数 | 说明 | 类型 | 可选值 |默认值|
|:---- |:----|:----|:----|:----|
className|自定义class | string|—|""
icon|图标|string|—|""
path|路由| string|—|""
$3
| 名 称 | 说 明
|:---- |:----|
—|自定义内容
icon|自定义图标
icon-active| 激活状态下图标
Tabs
选项卡
| 参数 | 说明 | 类型 | 可选值 |默认值|
|:---- |:----|:----|:----|:----|
className|自定义class | string|—|""
onTabChang|监听tabs切换函数|function|—|""
$3
| 名 称 | 说 明
|:---- |:----|
—|自定义内容
Tabs-item
选项卡-内容
| 参数 | 说明 | 类型 | 可选值 |默认值|
|:---- |:----|:----|:----|:----|
className|自定义class | string|—|""
$3
| 名 称 | 说 明
|:---- |:----|
—|自定义内容
Tag
标签
| 参数 | 说明 | 类型 | 可选值 |默认值|
|:---- |:----|:----|:----|:----|
className|自定义class | string|—|""
size|尺寸 | string|"large"/"medium"|"medium"
mark|是否为标记样式 | boolean|—|true
round|圆角 | boolean|—|true
type|类型 | boolean|"success"/"error"/"warining"|"info"
$3
| 名 称 | 说 明
|:---- |:----|
—|自定义内容
Toast
轻提示
$3
| 名 称 | 说 明 | 类型| 参数
|:---- |:----|:----|:----|
show| 显示方法|object| params
#### params
| 参数 | 说明 | 类型 | 可选值 |默认值|
|:---- |:----|:----|:----|:----|
text|内容 | string|""|""
icon|图标 | string|—|""
duration|关闭时长 | number|—|3000
size|icon图标大小 | number|—|50