✍️ Young-ddui是钉钉小程序(E应用)UI组件库，提供API接口主力开发者快速搭建应用。
✍️ 本项目基于 MIT 协议，请自由地享受和参与开源
主要功能
- 支持父子组件节点获取 -
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 |
— |
— |
Slot
Badge
徽章
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| className |
自定义class |
string |
— |
"" |
| overflowCount |
超出值显示点 |
number |
— |
99 |
| text |
内容 |
string |
— |
— |
| dot |
强制显示点 |
boolean |
— |
false |
| onClick |
click事件 |
function |
— |
Slot
Card
卡片
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| className |
自定义class |
string |
— |
"" |
| thumb |
缩略图地址 |
string |
— |
— |
| title |
标题 |
string |
— |
— |
| subTitle |
副标题 |
string |
— |
— |
| onClick |
click事件 |
function |
— |
| arrow |
是否显示箭头 |
boolean |
— |
true |
Slot
| 名 称 |
说 明 |
| 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" |
Slot
Col
列布局
Slot
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 |
— |
Slot
| 名 称 |
说 明 |
| — |
自定义内容 |
| header |
自定义标题 |
| footer |
自定义底部（按钮区域） |
Notify
消息提示
Methods
| 名 称 |
说 明 |
类型 |
参数 |
| 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 |
— |
— |
Slot
Tabbar-item
底部菜单栏-内容
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| className |
自定义class |
string |
— |
"" |
| icon |
图标 |
string |
— |
"" |
| path |
路由 |
string |
— |
"" |
Slot
| 名 称 |
说 明 |
| — |
自定义内容 |
| icon |
自定义图标 |
| icon-active |
激活状态下图标 |
Tabs
选项卡
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| className |
自定义class |
string |
— |
"" |
| onTabChang |
监听tabs切换函数 |
function |
— |
"" |
Slot
Tabs-item
选项卡-内容
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| className |
自定义class |
string |
— |
"" |
Slot
Tag
标签
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| className |
自定义class |
string |
— |
"" |
| size |
尺寸 |
string |
"large"/"medium" |
"medium" |
| mark |
是否为标记样式 |
boolean |
— |
true |
| round |
圆角 |
boolean |
— |
true |
| type |
类型 |
boolean |
"success"/"error"/"warining" |
"info" |
Slot
Toast
轻提示
Methods
| 名 称 |
说 明 |
类型 |
参数 |
| show |
显示方法 |
object |
params |
params
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| text |
内容 |
string |
"" |
"" |
| icon |
图标 |
string |
— |
"" |
| duration |
关闭时长 |
number |
— |
3000 |
| size |
icon图标大小 |
number |
— |
50 |
