Skip to content

U
unidocs-zh

888H355 / unidocs-zh
与 Fork 源项目一致

Fork自 DCloud / unidocs-zh

通知 1
Star 0
Fork 0
U
unidocs-zh

体验新版 GitCode，发现更多精彩内容 >>

提交 252862c0 编写于 作者: M mehaotian
浏览文件
操作

docs: 新增 uni-ui 文档 

(cherry picked from commit 39f9c5e889d82ad07f4158b20d93921596c82694)
上级 7b35f0f3
展开全部 隐藏空白更改
内联 并排
Showing with 6380 addition and 128 deletion
docs/component/README.md
浏览文件 @ 252862c0
...@@ -296,7 +296,7 @@ uni-app支持的组件分为vue组件和小程序自定义组件。 ...@@ -296,7 +296,7 @@ uni-app支持的组件分为vue组件和小程序自定义组件。
日常开发来讲，推荐使用vue组件。uni-app支持小程序组件主要是为了兼容更多生态资源。 日常开发来讲，推荐使用vue组件。uni-app支持小程序组件主要是为了兼容更多生态资源。
如果扩展组件符合uni-app的`easycom`组件规范，则可以免注册，直接使用。比如uni ui扩展组件就符合`easycom`组件规范。 如果扩展组件符合uni-app的`easycom`组件规范，则可以免注册，直接使用。比如uni-ui扩展组件就符合`easycom`组件规范。
如果组件不符合easycom规范，则需要在代码里手动import和注册组件，然后才能使用。 如果组件不符合easycom规范，则需要在代码里手动import和注册组件，然后才能使用。
...@@ -386,7 +386,7 @@ uni-app的基础组件中，有一个特殊基础组件是：`<unicloud-db>`组 ...@@ -386,7 +386,7 @@ uni-app的基础组件中，有一个特殊基础组件是：`<unicloud-db>`组
相关文档详见：[unicloud-db组件](uniCloud/unicloud-db) 相关文档详见：[unicloud-db组件](uniCloud/unicloud-db)
除了内置的数据库组件，在uni ui扩展库里还有uniCloud的文件选择和上传组件，参考：[uni-file-picker](https://ext.dcloud.net.cn/plugin?id=4079) 除了内置的数据库组件，在uni-ui扩展库里还有uniCloud的文件选择和上传组件，参考：[uni-file-picker](https://ext.dcloud.net.cn/plugin?id=4079)
### 原生组件和原生插件 ### 原生组件和原生插件
...@@ -427,91 +427,7 @@ datacom组件是一种数据驱动的、可云端一体的组件。 ...@@ -427,91 +427,7 @@ datacom组件是一种数据驱动的、可云端一体的组件。
### 扩展组件（uni-ui）@uniui ### 扩展组件（uni-ui）@uniui
uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。 详见: [uni-ui介绍](component/uniui/uni-ui.md)
uni-ui不包括基础组件，**它是基础组件的补充**。
#### uni ui产品特点
1、高性能
目前为止，在小程序和混合app领域，uni ui是性能的标杆。
- 自动差量更新数据
虽然uni-app支持小程序自定义组件，所有小程序的ui库都可以用。但小程序自定义组件的ui库都需要使用setData手动更新数据，在大数据量时、或高频更新数据时，很容易产生性能问题。
而uni ui属于vue组件，uni-app引擎底层自动diff更新数据。当然其实插件市场里众多vue组件都具备这个特点。
- 优化逻辑层和视图层通讯折损
非H5，不管是小程序还是App，不管是app的webview渲染还是原生渲染，全都是逻辑层和视图层分离的。这里就有一个逻辑层和视图层通讯的折损问题。
比如在视图层拖动一个可跟手的组件，由于通讯的损耗，用js监听很难做到实时跟手。
这时就需要使用css动画以及平台底层提供的wxs、bindingx等技术。不过这些技术都比较复杂，所以uni ui里做了封装，在需要跟手式操作的ui组件，比如swiperaction列表项左滑菜单，就在底层使用了这些技术，实现了高性能的交互体验
- 背景停止
很多ui组件是会一直动的，比如轮播图、跑马灯。即便这个窗体被新窗体挡住，它在背景层仍然在消耗着硬件资源。在Android的webview版本为chrome66以上，背景操作ui会引发很严重的性能问题，造成前台界面明显卡顿。
而uni ui的组件，会自动判断自己的显示状态，在组件不再可见时，不会再消耗硬件资源。
2、全端
uni ui的组件都是多端自适应的，底层会抹平很多小程序平台的差异或bug。
比如导航栏navbar组件，会自动处理不同端的状态栏；
比如swiperaction组件，在app和微信小程序上会使用交互体验更好的wxs技术，但在不支持wxs的其他小程序端会使用js模拟类似效果。
uni ui还支持nvue原生渲染。
uni ui还支持pc等宽屏设备，可以通过PC浏览器访问[https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge](https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge)体验
3、风格扩展
uni ui的默认风格是中型的，与uni-app基础组件风格一致。但它支持[uni.scss](https://uniapp.dcloud.io/collocation/uni-scss)，可以方便的扩展和切换应用的风格。
ui是一种需求非常发散的产品，DCloud官方也无意用uni ui压制第三方ui插件的空间，但官方有义务在性能和跨端方面提供一个开源的标杆给大家。
我们欢迎更多优秀的ui组件出现，也欢迎更多人贡献uni ui的主题风格，满足更多用户的需求。
4、与uniCloud协作
uni ui里很多组件与uniCloud打通，可大幅提升开发效率
5、与uni统计自动集成实现免打点
uni统计是优秀的多端统计平台，见[tongji.dcloud.net.cn](https://tongji.dcloud.net.cn)。
除了一张报表看全端，它的另一个重要特点是免打点。
比如使用uni ui的navbar标题栏、收藏、购物车等组件，均可实现自动打点，统计页面标题等各种行为数据。
当然你也可以关闭uni统计，这不是强制的。
6、uni ui符合全套DCloud组件规范
包括easycom、uni_module、datacom，全部遵循。
#### uni ui的使用方式
uni ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别组件等多种使用方式
![HBuilderX内创建uni ui项目](https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/create-uni-ui-project.jpg)
1. 在HBuilderX新建uni-app项目的模板中，选择uni ui模板
由于uni-app独特的[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)技术，可以免引用、注册，直接使用各种符合规则的vue组件。
在代码区键入`u`，拉出各种内置或uni ui的组件列表，选择其中一个，即可使用该组件。
光标放在组件名称上，按F1，可以查阅组件的文档。
![uni ui代码块](https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/uni-ui-snippet.jpg)
2. npm安装参考：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
3. 单独安装组件
如果你没有创建uni ui项目模板，也可以在你的工程里，单独安装需要的那个组件。下表为uni-ui的扩展组件清单，点击每个组件在详情页面可以导入组件到项目下，导入后直接使用即可，无需import和注册。
uni ui有几十个组件，详情的uni ui组件清单，请参考：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
**更多组件** **更多组件**
......
docs/component/_sidebar.md
浏览文件 @ 252862c0
...@@ -64,47 +64,53 @@ ...@@ -64,47 +64,53 @@
* uniCloud专用组件 * uniCloud专用组件
* [unicloud-db](uniCloud/unicloud-db) * [unicloud-db](uniCloud/unicloud-db)
* [基础组件中原生组件说明](component/native-component.md) * [基础组件中原生组件说明](component/native-component.md)
* 扩展组件（uni ui） * 扩展组件（uni-ui）
* [uni-ui整体介绍](component/README?id=uniui) * [介绍](component/uniui/uni-ui.md)
* [Badge 数字角标](https://ext.dcloud.net.cn/plugin?id=21) * [开始使用](component/uniui/quickstart.md)
* [Calendar 日历](https://ext.dcloud.net.cn/plugin?id=56) * [资源下载](component/uniui/resource.md)
* [Card 卡片](https://ext.dcloud.net.cn/plugin?id=22) * [色彩说明](component/uniui/color.md)
* [Collapse 折叠面板](https://ext.dcloud.net.cn/plugin?id=23) * [uni-sass 辅助样式](component/uniui/uni-sass.md)
* [Combox 可选择输入框](https://ext.dcloud.net.cn/plugin?id=1261) * [uni-badge 数字角标](component/uniui/uni-badge.md)
* [CountDown 倒计时](https://ext.dcloud.net.cn/plugin?id=25) * [uni-calendar 日历](component/uniui/uni-calendar.md)
* [DataCheckbox 数据驱动的单选复选框](https://ext.dcloud.net.cn/plugin?id=3456) * [uni-card 卡片](component/uniui/uni-card.md)
* [DataPicker 数据驱动的picker选择器](https://ext.dcloud.net.cn/plugin?id=3796) * [uni-collapse 折叠面板](component/uniui/uni-collapse.md)
* [Dateformat 日期格式化](https://ext.dcloud.net.cn/plugin?id=3279) * [uni-combox 组合框](component/uniui/uni-combox.md)
* [DatetimePicker 日期选择器](https://ext.dcloud.net.cn/plugin?id=3962) * [uni-countdown 倒计时](component/uniui/uni-countdown.md)
* [Easyinput 增强输入框](https://ext.dcloud.net.cn/plugin?id=3455) * [uni-data-checkbox 数据选择器](component/uniui/uni-data-checkbox.md)
* [Drawer 抽屉](https://ext.dcloud.net.cn/plugin?id=26) * [uni-data-picker 数据驱动的picker选择器](component/uniui/uni-data-picker.md)
* [Fab 悬浮按钮](https://ext.dcloud.net.cn/plugin?id=144) * [uni-dateformat 日期格式化](component/uniui/uni-dateformat.md)
* [Fav 收藏按钮](https://ext.dcloud.net.cn/plugin?id=864) * [uni-datetime-picker 日期选择器](component/uniui/uni-datetime-picker.md)
* [FilePicker 文件选择上传](https://ext.dcloud.net.cn/plugin?id=4079) * [uni-drawer 抽屉](component/uniui/uni-drawer.md)
* [Forms 表单](https://ext.dcloud.net.cn/plugin?id=2773) * [uni-easyinput 增强输入框](component/uniui/uni-easyinput.md)
* [GoodsNav 商品导航](https://ext.dcloud.net.cn/plugin?id=865) * [uni-fab 悬浮按钮](component/uniui/uni-fab.md)
* [Grid 宫格](https://ext.dcloud.net.cn/plugin?id=27) * [uni-fav 收藏按钮](component/uniui/uni-fav.md)
* [Group 分组](https://ext.dcloud.net.cn/plugin?id=3281) * [uni-file-picker 文件选择上传](component/uniui/uni-file-picker.md)
* [Icons 图标](https://ext.dcloud.net.cn/plugin?id=28) * [uni-forms 表单](component/uniui/uni-forms.md)
* [IndexedList 索引列表](https://ext.dcloud.net.cn/plugin?id=375) * [uni-goods-nav 商品导航](component/uniui/uni-goods-nav.md)
* [List 列表](https://ext.dcloud.net.cn/plugin?id=24) * [uni-grid 宫格](component/uniui/uni-grid.md)
* [LoadMore 加载更多](https://ext.dcloud.net.cn/plugin?id=29) * [uni-group 分组](component/uniui/uni-group.md)
* [NavBar 自定义导航栏](https://ext.dcloud.net.cn/plugin?id=52) * [uni-icons 图标](component/uniui/uni-icons.md)
* [NoticeBar 通告栏](https://ext.dcloud.net.cn/plugin?id=30) * [uni-indexed-list 索引列表](component/uniui/uni-indexed-list.md)
* [NumberBox 数字输入框](https://ext.dcloud.net.cn/plugin?id=31) * [uni-link 超链接](component/uniui/uni-link.md)
* [Pagination 分页器](https://ext.dcloud.net.cn/plugin?id=32) * [uni-list 列表](component/uniui/uni-list.md)
* [PopUp 弹出层](https://ext.dcloud.net.cn/plugin?id=329) * [uni-load-more 加载更多](component/uniui/uni-load-more.md)
* [Rate 评分](https://ext.dcloud.net.cn/plugin?id=33) * [uni-nav-bar 自定义导航栏](component/uniui/uni-nav-bar.md)
* [Row 布局-行](https://ext.dcloud.net.cn/plugin?id=3958) * [uni-notice-bar 通告栏](component/uniui/uni-notice-bar.md)
* [SearchBar 搜索栏](https://ext.dcloud.net.cn/plugin?id=866) * [uni-number-box 数字输入框](component/uniui/uni-number-box.md)
* [SegmentedControl 分段器](https://ext.dcloud.net.cn/plugin?id=54) * [uni-pagination 分页器](component/uniui/uni-pagination.md)
* [Steps 步骤条](https://ext.dcloud.net.cn/plugin?id=34) * [uni-popup 弹出层](component/uniui/uni-popup.md)
* [SwipeAction 滑动操作](https://ext.dcloud.net.cn/plugin?id=181) * [uni-rate 评分](component/uniui/uni-rate.md)
* [SwiperDot 轮播图指示点](https://ext.dcloud.net.cn/plugin?id=284) * [uni-row 布局-行](component/uniui/uni-row.md)
* [Table 表格](https://ext.dcloud.net.cn/plugin?id=3270) * [uni-search-bar 搜索栏](component/uniui/uni-search-bar.md)
* [Tag 标签](https://ext.dcloud.net.cn/plugin?id=35) * [uni-segmented-control 分段器](component/uniui/uni-segmented-control.md)
* [Title 章节标题](https://ext.dcloud.net.cn/plugin?id=1066) * [uni-steps 步骤条](component/uniui/uni-steps.md)
* [Transition 过渡动画](https://ext.dcloud.net.cn/plugin?id=985) * [uni-swipe-action 滑动操作](component/uniui/uni-swipe-action.md)
* [uni-swiper-dot 轮播图指示点](component/uniui/uni-swiper-dot.md)
* [uni-table 表格](component/uniui/uni-table.md)
* [uni-tag 标签](component/uniui/uni-tag.md)
* [uni-title 章节标题](component/uniui/uni-title.md)
* [uni-transition 过渡动画](component/uniui/uni-transition.md)
* [更新日志](component/uniui/changelog.md)
* [更多插件市场的组件](https://ext.dcloud.net.cn/?cat1=2) * [更多插件市场的组件](https://ext.dcloud.net.cn/?cat1=2)
* [datacom组件规范](component/datacom) * [datacom组件规范](component/datacom)
* [App原生插件](https://nativesupport.dcloud.net.cn/NativePlugin/README) * [App原生插件](https://nativesupport.dcloud.net.cn/NativePlugin/README)
......
docs/component/uniui/changelog.md 0 → 100644
浏览文件 @ 252862c0
## 发布周期
- 修订版本号：每周末会进行日常 bugfix 更新。**如果有紧急的 bugfix，则任何时候都可发布**
- 次版本号：每月发布一个带有新特性的向下兼容的版本。
- 主版本号：含有破坏性更新和新特性，不在发布周期内。
## 1.4.6（2021-09-30）
- uni-data-picker 新增 清除已选项的功能（通过 clearIcon 属性配置是否显示按钮），同时提供 clear 方法以供调用，二者等效
- uni-data-picker 修复 readonly 为 true 时报错的 bug
- uni-data-picker 修复 上一版本造成的 map 属性失效的bug
- uni-data-picker 新增 ellipsis 属性，支持配置 tab 选项长度过长时是否自动省略
## 1.4.5（2021-09-24）
- uni-icons 新增 支持使用 css 图标库扩展组件（仅 vue 支持）
- uni-badge 修复 在字节小程序上样式不生效的 bug
- uni-calendar 修复 startDate、 endDate 属性失效的 bug
- uni-data-picker 修复 某些情况下级联未触发的 bug
- uni-data-picker 新增 提供 show 和 hide 方法，开发者可以通过 ref 调用
- uni-data-picker 新增 选项内容过长自动添加省略号
- uni-data-picker 新增 map 属性 字段映射，将 text/value 映射到数据中的其他字段
## 1.4.4（2021-09-10）
- uni-ui 修改平台兼容性
- uni-datetime-picker 修复 hide-second 在移动端的 bug
- uni-datetime-picker 修复 单选赋默认值时，赋值日期未高亮的 bug
- uni-datetime-picker 修复 赋默认值时，移动端未正确显示时间的 bug
- uni-datetime-picker 新增 hide-second 属性，支持只使用时分，隐藏秒
- uni-rate 优化 默认值修改为 0 颗星
## 1.4.3（2021-09-03）
- uni-data-checkbox 修复 在uni-forms中 modelValue 中不存在当前字段，当前字段必填写也不参与校验的问题
- uni-datetime-picker 优化 取消选中时（范围选）直接开始下一次选择, 避免多点一次
- uni-datetime-picker 优化 移动端支持清除按钮，同时支持通过 ref 调用组件的 clear 方法
- uni-datetime-picker 优化 调整字号大小，美化日历界面
- uni-datetime-picker 修复 因国际化导致的 placeholder 失效的 bug
- uni-file-picker 修复 return-type="object" 时且存在v-model时，无法删除文件的Bug
- uni-file-picker 新增 参数中返回 fileID 字段
- uni-file-picker 修复 腾讯云传入fileID 不能回显的bug
- uni-file-picker 修复 选择图片后，不能放大的问题
- uni-link 修复 在 nvue 下不显示的 bug
- uni-list 修复 在vue3中to属性在发行应用的时候报错的bug
- uni-search-bar 修复 value 属性与 modelValue 属性不兼容的Bug
- uni-swipe-action 优化 close-all 方法
## 1.4.2（2021-08-20）
- 新增 uni-ui 组件支持国际化 i18n
- uni-collapse 优化 show-arrow 属性默认为true
- uni-collapse 新增 show-arrow 属性，控制是否显示右侧箭头
- uni-data-checkbox 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题
- uni-easyinput 修复 在 uni-forms 的动态表单中默认值校验不通过的 bug
- uni-file-picker 修复 由于 0.2.11 版本引起的不能回显图片的Bug
- uni-file-picker 新增 clearFiles(index) 方法，可以手动删除指定文件
- uni-file-picker 修复 v-model 值设为 null 报错的Bug
- uni-swipe-action 新增 close-all 方法，关闭所有已打开的组件
- uni-swipe-action 新增 resize() 方法，在非微信小程序、h5、app-vue端出现不能滑动的问题的时候，重置组件
- uni-swipe-action 修复 app 端偶尔出现类似 Page[x][-x,xx;-x,xx,x,x-x] 的问题
- uni-swipe-action 优化 微信小程序、h5、app-vue 滑动逻辑，避免出现动态新增组件后不能滑动的问题
## 1.4.0（2021-08-13）
- uni-calendar 修复 弹出层被 tabbar 遮盖 bug
- uni-data-checkbox 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
- uni-dateformat 调整 默认时间不再是当前时间，而是显示'-'字符
- uni-datetime-picker 新增 适配 vue3
- uni-datetime-picker 新增 支持作为 uni-forms 子组件相关功能
- uni-datetime-picker 修复 在 uni-forms 中使用时，选择时间报 NAN 错误的 bug
- uni-datetime-picker 修复 type 属性动态赋值无效的 bug
- uni-datetime-picker 修复 ‘确认’按钮被 tabbar 遮盖 bug
- uni-datetime-picker 修复 组件未赋值时范围选左、右日历相同的 bug
- uni-datetime-picker 修复 范围选未正确显示当前值的 bug
- uni-datetime-picker 修复 h5 平台（移动端）报错 'cale' of undefined 的 bug
- uni-easyinput 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
- uni-file-picker 修复 return-type="object" 时，无法删除文件的Bug
- uni-file-picker 修复 auto-upload 属性失效的Bug
- uni-forms 修复 没有添加校验规则的字段依然报错的Bug
- uni-forms 修复 重置表单错误信息无法清除的问题
- uni-forms 优化 组件文档
- uni-forms 修复 表单验证只生效一次的问题
- uni-tag type 不是 default 时，size 为 small 字体大小显示不正确
[查看更多](https://ext.dcloud.net.cn/plugin?id=55&update_log)
\ No newline at end of file
docs/component/uniui/color.md 0 → 100644
浏览文件 @ 252862c0
`uni-ui`为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。
### 主色
`uni-ui`的主色使用了令人安静并放松的蓝色。
<div class="color-main">
<div class="color-main-top" style="background-color:#2979ff;">
<p class="color-main-text">Primary Color</p>
<p class="color-main-text">#2979ff</p>
</div>
<div class="color-main-box">
<div class="color-main-top" style="background-color:#94bcff;">
<p class="color-main-text">#94bcff</p>
</div>
<div class="color-main-top" style="background-color:#d4e4ff;">
<p class="color-main-text">#d4e4ff</p>
</div>
</div>
</div>
我们通过uni-scss提供了对应的颜色变量名
```css
$uni-primary: #2979ff;
$uni-primary-disable:#94bcff;
$uni-primary-light: #d4e4ff;
```
### 辅助色
除了主色外的场景色，需要在不同的场景中使用,不同颜色代表不同的场景，如：绿色代表成功、红色代表错误、黄色代表警告。
<div class="color-content">
<div class="color-main">
<div class="color-main-top" style="background-color:#18bc37">
<p class="color-main-text">Primary Color</p>
<p class="color-main-text">#18bc37</p>
</div>
<div class="color-main-box">
<div class="color-main-top" style="background-color:#8cde9b;">
<p class="color-main-text">#8cde9b</p>
</div>
<div class="color-main-top" style="background-color:#d1f2d7;">
<p class="color-main-text">#d1f2d7</p>
</div>
</div>
</div>
<div class="color-main margin">
<div class="color-main-top" style="background-color:#f3a73f;">
<p class="color-main-text">Warning Color</p>
<p class="color-main-text">#f3a73f</p>
</div>
<div class="color-main-box">
<div class="color-main-top" style="background-color:#f9d39f;">
<p class="color-main-text">#f9d39f</p>
</div>
<div class="color-main-top" style="background-color:#fdedd9;">
<p class="color-main-text">#fdedd9</p>
</div>
</div>
</div>
<div class="color-main margin">
<div class="color-main-top" style="background-color:#e43d33;">
<p class="color-main-text">Error Color</p>
<p class="color-main-text">#f3a73f</p>
</div>
<div class="color-main-box">
<div class="color-main-top" style="background-color:#f29e99;">
<p class="color-main-text">#f29e99</p>
</div>
<div class="color-main-top" style="background-color:#fad8d6;">
<p class="color-main-text">#fad8d6</p>
</div>
</div>
</div>
<div class="color-main margin">
<div class="color-main-top" style="background-color:#8f939c;">
<p class="color-main-text">Info Color</p>
<p class="color-main-text">#8f939c</p>
</div>
<div class="color-main-box">
<div class="color-main-top" style="background-color:#c7c9ce;">
<p class="color-main-text">#c7c9ce</p>
</div>
<div class="color-main-top" style="background-color:#e9e9eb;">
<p class="color-main-text">#e9e9eb</p>
</div>
</div>
</div>
</div>
我们通过uni-scss提供了对应的颜色变量名
```css
$uni-success: #18bc37;
$uni-success-disable: #8cde9b;
$uni-success-light: #d1f2d7;
$uni-warning: #f3a73f;
$uni-warning-disable: #f9d39f;
$uni-warning-light: #fdedd9;
$uni-error: #e43d33;
$uni-error-disable: #f29e99;
$uni-error-light: #fad8d6;
$uni-info: #8f939c;
$uni-info-disable: #c7c9ce;
$uni-info-light: #e9e9eb;
```
### 中性色
中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
<div class="color-content">
<div class="color-main">
<div class="color-main-top" style="background-color:#3a3a3a">
<p class="color-main-text">Main Color</p>
<p class="color-main-text">#3a3a3a</p>
</div>
</div>
<div class="color-main margin">
<div class="color-main-top" style="background-color:#6a6a6a;">
<p class="color-main-text">Base Color</p>
<p class="color-main-text">#6a6a6a</p>
</div>
</div>
<div class="color-main margin">
<div class="color-main-top" style="background-color:#909399;">
<p class="color-main-text">Secondary Color</p>
<p class="color-main-text">#909399</p>
</div>
</div>
<div class="color-main margin">
<div class="color-main-top" style="background-color:#c7c7c7;">
<p class="color-main-text">Extra Color</p>
<p class="color-main-text">#c7c7c7</p>
</div>
</div>
</div>
我们通过uni-scss提供了对应的颜色变量名
```css
$uni-main-color: #3a3a3a; // 主要文字
$uni-base-color: #6a6a6a; // 常规文字
$uni-secondary-color: #909399; // 次要文字
$uni-extra-color: #c7c7c7; // 辅助说明
```
### 边框颜色
主要用于边框、分隔线颜色
<div class="color-content">
<div class="color-main">
<div class="color-main-top" style="background-color:#f0f0f0">
<p class="color-main-text">Border-1 olor</p>
<p class="color-main-text">#f0f0f0</p>
</div>
</div>
<div class="color-main margin">
<div class="color-main-top" style="background-color:#ededed;">
<p class="color-main-text">Border-2 Color</p>
<p class="color-main-text">#ededed</p>
</div>
</div>
<div class="color-main margin">
<div class="color-main-top" style="background-color:#dcdcdc;">
<p class="color-main-text">Border-3 Color</p>
<p class="color-main-text">#dcdcdc</p>
</div>
</div>
<div class="color-main margin">
<div class="color-main-top" style="background-color:#b9b9b9;">
<p class="color-main-text">Border-4 Color</p>
<p class="color-main-text">#b9b9b9</p>
</div>
</div>
</div>
我们通过uni-scss提供了对应的颜色变量名
```css
$uni-border-1: #f0f0f0;
$uni-border-2: #ededed;
$uni-border-3: #dcdcdc;
$uni-border-4: #b9b9b9;
```
### 常规色
通用颜色，如黑色、白色、常用背景色等
<div class="color-content">
<div class="color-main" style="border:1px #eee solid;">
<div class="color-main-top" style="background-color:#ffffff;">
<p class="color-main-text black">White Color</p>
<p class="color-main-text black">#ffffff</p>
</div>
</div>
<div class="color-main margin">
<div class="color-main-top" style="background-color:#000000;">
<p class="color-main-text">Black Color</p>
<p class="color-main-text">#000000</p>
</div>
</div>
<div class="color-main margin transparent">
<div class="color-main-top" style="background-color:transparent;">
<p class="color-main-text black">Transparent Color</p>
<p class="color-main-text black">transparent</p>
</div>
</div>
<div class="color-main margin">
<div class="color-main-top" style="background-color:#f7f7f7;">
<p class="color-main-text black">Background Color</p>
<p class="color-main-text black">#f7f7f7</p>
</div>
</div>
</div>
我们通过uni-scss提供了对应的颜色变量名
```css
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
// 背景色
$uni-bg-color: #f7f7f7;
```
### 阴影
<div class="color-content">
<div class="color-main shadow" style="border:1px #eee solid;box-shadow: 0 0 5px hsl(0deg 0% 85% / 50%);">
<div class="color-main-top" style="background-color:#ffffff;">
<p class="color-main-text black">Shadow-sm Color</p>
</div>
</div>
<div class="color-main margin shadow" style="border:1px #eee solid;box-shadow: 0 1px 8px 1px hsl(0deg 0% 65% / 20%);">
<div class="color-main-top" style="background-color:#ffffff;">
<p class="color-main-text black">Shadow-base Color</p>
</div>
</div>
<div class="color-main margin shadow" style="border:1px #eee solid;box-shadow: 0 1px 10px 2px rgb(165 164 164 / 50%);">
<div class="color-main-top" style="background-color:#ffffff;">
<p class="color-main-text black">Shadow-lg Color</p>
</div>
</div>
</div>
我们通过uni-scss提供了对应的颜色变量名
```css
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
```
<style>
.color-content {
display:flex;
}
.color-main {
width:200px;
border-radius:5px;
overflow:hidden;
}
.color-main-top {
width:100%;
padding:10px 0;
text-align:center;
}
.markdown-section p.color-main-text {
margin:0;
color:#fff;
font-size:12px;
line-height:1.5;
}
.markdown-section p.color-main-text.black {
color:#333;
}
.color-main-box {
display:flex;
}
.margin {
margin-left:10px;
}
.transparent {
border: 1px solid #fcc3c3;
color: #303133;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");
background-repeat: no-repeat;
background-position: 50%;
background-size: 100% 100%,auto;
}
.shadow {
display:flex;
align-items: center;
height:55px;
}
</style>
\ No newline at end of file
docs/component/uniui/quickstart.md 0 → 100644
浏览文件 @ 252862c0
uni-ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别组件等多种使用方式
![HBuilderX内创建uni-ui项目](https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/create-uni-ui-project.jpg)
### 在HBuilderX新建uni-app项目的模板中，选择uni-ui模板
由于uni-app独特的[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)技术，可以免引用、注册，直接使用各种符合规则的vue组件。
在代码区键入`u`，拉出各种内置或uni-ui的组件列表，选择其中一个，即可使用该组件。
光标放在组件名称上，按F1，可以查阅组件的文档。
![uni-ui代码块](https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/uni-ui-snippet.jpg)
### npm安装
在 `vue-cli` 项目中可以使用 `npm` 安装 `uni-ui` 库 ，或者直接在 `HBuilderX` 项目中使用 `npm` 。（不推荐后一种方式）
> **注意**
> cli 项目默认是不编译 `node_modules` 下的组件的，导致条件编译等功能失效 ，导致组件异常
> 需要在根目录创建 `vue.config.js` 文件 ，增加 `@dcloudio/uni-ui` 包的编译即可正常
> ```javascript
> // vue.config.js
> module.exports = {
> transpileDependencies:['@dcloudio/uni-ui']
> }
> ```
**准备 sass**
`vue-cli` 项目请先安装 sass 及 sass-loader，如在 HBuliderX 中使用，可跳过此步。
- 安装 sass
```
npm i sass -D 或 yarn add sass -D
```
- 安装 sass-loader
```
npm i sass-loader@10.1.1 -D 或 yarn add sass-loader@10.1.1 -D
```
> sass-loader 请使用低于 @11.0.0 的版本，[sass-loader@11.0.0 不支持 vue@2.6.12 ](https://stackoverflow.com/questions/66082397/typeerror-this-getoptions-is-not-a-function)
**安装 uni-ui**
```
npm i @dcloudio/uni-ui 或 yarn add @dcloudio/uni-ui
```
在 ``script`` 中引用组件：
```javascript
import {uniBadge} from '@dcloudio/uni-ui'
//import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' //也可使用此方式引入组件
export default {
components: {uniBadge}
}
```
在 ``template`` 中使用组件：
```html
<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
```
**配置easycom**
使用 `npm` 安装好 `uni-ui` 之后，需要配置 `easycom` 规则，让 `npm` 安装的组件支持 `easycom`
打开项目根目录下的 `pages.json` 并添加 `easycom` 节点：
```javascript {8}
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他内容
pages:[
// ...
]
}
```
**注意**
- `CLI` 引用方式， `H5` 端不支持在 `main.js` 中全局注册组件，如有需求请使用（[easyCom](https://uniapp.dcloud.io/collocation/pages?id=easycom)） 的方式引用组件
- 使用 npm 安装的组件，默认情况下 babel-loader 会忽略所有 node_modules 中的文件 ，导致条件编译失效，需要通过配置 `vue.config.js` 解决：
```javascript
// 在根目录创建 vue.config.js 文件，并配置如下
module.exports = {
transpileDependencies: ['@dcloudio/uni-ui']
}
```
### 单独安装组件
如果你没有创建uni-ui项目模板，也可以在你的工程里，单独安装需要的那个组件。下表为uni-ui的扩展组件清单，点击每个组件在详情页面可以导入组件到项目下，导入后直接使用即可，无需import和注册。
|组件名|组件说明|
|---|---|
|uni-badge|[数字角标](https://ext.dcloud.net.cn/plugin?name=uni-badge)|
|uni-calendar|[日历](https://ext.dcloud.net.cn/plugin?name=uni-calendar)|
|uni-card|[卡片](https://ext.dcloud.net.cn/plugin?name=uni-card)|
|uni-collapse|[折叠面板](https://ext.dcloud.net.cn/plugin?name=uni-collapse)|
|uni-combox|[组合框](https://ext.dcloud.net.cn/plugin?name=uni-combox)|
|uni-countdown|[倒计时](https://ext.dcloud.net.cn/plugin?name=uni-countdown)|
|uni-data-checkbox|[数据选择器](https://ext.dcloud.net.cn/plugin?name=uni-data-checkbox)|
|uni-data-picker|[数据驱动的picker选择器](https://ext.dcloud.net.cn/plugin?name=uni-data-picker)|
|uni-dateformat|[日期格式化](https://ext.dcloud.net.cn/plugin?name=uni-dateformat)|
|uni-datetime-picker|[日期选择器](https://ext.dcloud.net.cn/plugin?name=uni-datetime-picker)|
|uni-drawer|[抽屉](https://ext.dcloud.net.cn/plugin?name=uni-drawer)|
|uni-easyinput|[增强输入框](https://ext.dcloud.net.cn/plugin?name=uni-easyinput)|
|uni-fab|[悬浮按钮](https://ext.dcloud.net.cn/plugin?name=uni-fab)|
|uni-fav|[收藏按钮](https://ext.dcloud.net.cn/plugin?name=uni-fav)|
|uni-file-picker|[文件选择上传](https://ext.dcloud.net.cn/plugin?name=uni-file-picker)|
|uni-forms|[表单](https://ext.dcloud.net.cn/plugin?name=uni-forms)|
|uni-goods-nav|[商品导航](https://ext.dcloud.net.cn/plugin?name=uni-goods-nav)|
|uni-grid|[宫格](https://ext.dcloud.net.cn/plugin?name=uni-grid)|
|uni-group|[分组](https://ext.dcloud.net.cn/plugin?name=uni-group)|
|uni-icons|[图标](https://ext.dcloud.net.cn/plugin?name=uni-icons)|
|uni-indexed-list|[索引列表](https://ext.dcloud.net.cn/plugin?name=uni-indexed-list)|
|uni-link|[超链接](https://ext.dcloud.net.cn/plugin?name=uni-link)|
|uni-list|[列表](https://ext.dcloud.net.cn/plugin?name=uni-list)|
|uni-load-more|[加载更多](https://ext.dcloud.net.cn/plugin?name=uni-load-more)|
|uni-nav-bar|[自定义导航栏](https://ext.dcloud.net.cn/plugin?name=uni-nav-bar)|
|uni-notice-bar|[通告栏](https://ext.dcloud.net.cn/plugin?name=uni-notice-bar)|
|uni-number-box|[数字输入框](https://ext.dcloud.net.cn/plugin?name=uni-number-box)|
|uni-pagination|[分页器](https://ext.dcloud.net.cn/plugin?name=uni-pagination)|
|uni-popup|[弹出层](https://ext.dcloud.net.cn/plugin?name=uni-popup)|
|uni-rate|[评分](https://ext.dcloud.net.cn/plugin?name=uni-rate)|
|uni-row|[布局-行](https://ext.dcloud.net.cn/plugin?name=uni-row)|
|uni-search-bar|[搜索栏](https://ext.dcloud.net.cn/plugin?name=uni-search-bar)|
|Section|[标题栏](https://ext.dcloud.net.cn/plugin?name=uni-section)|
|uni-segmented-control|[分段器](https://ext.dcloud.net.cn/plugin?name=uni-segmented-control)|
|uni-steps|[步骤条](https://ext.dcloud.net.cn/plugin?name=uni-steps)|
|uni-swipe-action|[滑动操作](https://ext.dcloud.net.cn/plugin?name=uni-swipe-action)|
|uni-swiper-dot|[轮播图指示点](https://ext.dcloud.net.cn/plugin?name=uni-swiper-dot)|
|uni-table|[表格](https://ext.dcloud.net.cn/plugin?name=uni-table)|
|uni-tag|[标签](https://ext.dcloud.net.cn/plugin?name=uni-tag)|
|uni-title|[章节标题](https://ext.dcloud.net.cn/plugin?name=uni-title)|
|uni-transition|[过渡动画](https://ext.dcloud.net.cn/plugin?name=uni-transition)|
使用 `uni_modules` 方式安装组件库，可以直接通过插件市场导入，通过右键菜单快速更新组件，不需要引用、注册，直接在页面中使用 `uni-ui` 组件。[点击安装 uni-ui 组件库](https://ext.dcloud.net.cn/plugin?id=55)
**注意：下载最新的组件目前仅支持 uni_modules ,非 uni_modules 版本最高支持到组件的1.2.10版本**
如不能升级到 `uni_modules` 版本，可以使用 `uni_modules` 安装好对应组件，将组件拷贝到对应目录。
例如需更新 `uni-list`和`uni-badge` ,将 `uni_modules>uni-list>components`和`uni_modules>uni-badege>components`下所有目录拷贝到如下目录即可：
**目录示例**
```json
┌─components 组件目录
│ ├─uni-list list 列表目录
│ │ └─uni-list.vue list 组件文件
│ ├─uni-list-item list-item 列表目录
│ │ └─uni-list-item.vue list 组件文件
│ ├─uni-badge badge 角标目录
│ │ └─uni-badge.vue badge 组件文件
│ └─ //.... 更多组件文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index示例页面
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json 配置页
```
**注意**
- uni-ui 是uni-app内置组件的扩展。注意与web开发不同，uni-ui不包括基础组件，它是基础组件的补充。web开发中有的开发者习惯用一个ui库完成所有开发，但在uni-app体系中，推荐开发者首先使用性能更高的基础组件，然后按需引入必要的扩展组件。
- `uni-ui` 不支持使用 `Vue.use()` 的方式安装
docs/component/uniui/resource.md 0 → 100644
浏览文件 @ 252862c0
# 设计资源
我们提供uni-ui组件的Sketch设计资源，您可以根据需要进行下载。
Axurez资源正在整理和完善中。
<div style="width:260px;border:1px #eee solid; padding:15px;border-radius:5px;text-align: center;">
<img style="width:120px;height:120px;margin:30px auto;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9Ijg4cHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDg4IDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2tldGNoIFRlbXBsYXRlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iU2tldGNoLVRlbXBsYXRlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjUiPgogICAgICAgICAgICAgICAgPGcgaWQ9ImJyb3dzZXIiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wNDI3MzUsIDYuNzcyMjY5KSIgZmlsbD0iI0M5RTFGQiIgb3BhY2l0eT0iMC4yMzg4MDU5NyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjIwMDg4NDc2LDI4LjUwNTczMzcgTDQ0LjE3MDEzOTEsMjguNTA1NzMzNyBDNDUuOTEwNTI2NSwyOC41MDU3MzM3IDQ3LjMyMTc1NzUsMjcuMTAyNjMxMiA0Ny4zMjE3NTc1LDI1LjM3MjI2ODIgTDQ3LjMyMTc1NzUsMC4zMDU2MDg3MjUgQzQ3LjMyMTc1NzUsMi4wMzU5NzE3MiA0NS45MTA1MjY1LDMuNDM5MDc0MjYgNDQuMTcwMTM5MSwzLjQzOTA3NDI2IEwzLjIwMDg4NDc2LDMuNDM5MDc0MjYgQzEuNDYwNDk3MzksMy40MzkwNzQyNiAwLjA0OTI2NjM1MDMsMi4wMzU5NzE3MiAwLjA0OTI2NjM1MDMsMC4zMDU2MDg3MjUgTDAuMDQ5MjY2MzUwMywyNS4zNzIyNjgyIEMwLjA0OTI2NjM1MDMsMjcuMTAyOTg2MSAxLjQ2MDE0MDM4LDI4LjUwNTczMzcgMy4yMDA4ODQ3NiwyOC41MDU3MzM3IEwzLjIwMDg4NDc2LDI4LjUwNTczMzcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01OS45MjcxNjAxLDI4LjUwNTczMzcgTDc4LjgzNjE1NjYsMjguNTA1NzMzNyBDODAuNTc2NTQ0LDI4LjUwNTczMzcgODEuOTg3Nzc1LDI3LjEwMjYzMTIgODEuOTg3Nzc1LDI1LjM3MjI2ODIgTDgxLjk4Nzc3NSwwLjMwNTYwODcyNSBDODEuOTg3Nzc1LDIuMDM1OTcxNzIgODAuNTc2NTQ0LDMuNDM5MDc0MjYgNzguODM2MTU2NiwzLjQzOTA3NDI2IEw1OS45MjcxNjAxLDMuNDM5MDc0MjYgQzU4LjE4Njc3MjgsMy40MzkwNzQyNiA1Ni43NzU1NDE3LDIuMDM1OTcxNzIgNTYuNzc1NTQxNywwLjMwNTYwODcyNSBMNTYuNzc1NTQxNywyNS4zNzIyNjgyIEM1Ni43NzU1NDE3LDI3LjEwMjk4NjEgNTguMTg2NzcyOCwyOC41MDU3MzM3IDU5LjkyNzE2MDEsMjguNTA1NzMzNyBMNTkuOTI3MTYwMSwyOC41MDU3MzM3IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEw0NC4yMTI4NzM2LDEwLjIxMTY5ODYgQzQ1Ljk1MzI2MSwxMC4yMTE2OTg2IDQ3LjM2NDQ5Miw4LjgwODU5NjAzIDQ3LjM2NDQ5Miw3LjA3ODIzMzA0IEw0Ny4zNjQ0OTIsMy45NDQ3Njc1MSBDNDcuMzY0NDkyLDIuMjE0NDA0NTEgNDUuOTUzMjYxLDAuODExMzAxOTY5IDQ0LjIxMjg3MzYsMC44MTEzMDE5NjkgTDMuMjQzNjE5MjksMC44MTEzMDE5NjkgQzEuNTAzMjMxOTEsMC44MTEzMDE5NjkgMC4wOTIwMDA4NzY0LDIuMjE0NDA0NTEgMC4wOTIwMDA4NzY0LDMuOTQ0NzY3NTEgTDAuMDkyMDAwODc2NCw3LjA3ODIzMzA0IEMwLjA5MjAwMDg3NjQsOC44MDg1OTYwMyAxLjUwMjg3NDkxLDEwLjIxMTY5ODYgMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEwzLjI0MzYxOTI5LDEwLjIxMTY5ODYgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTU5Ljk2OTg5NDcsMTAuMjExNjk4NiBMNzguODc4ODkxMSwxMC4yMTE2OTg2IEM4MC42MTkyNzg1LDEwLjIxMTY5ODYgODIuMDMwNTA5Niw4LjgwODU5NjAzIDgyLjAzMDUwOTYsNy4wNzgyMzMwNCBMODIuMDMwNTA5NiwzLjk0NDc2NzUxIEM4Mi4wMzA1MDk2LDIuMjE0NDA0NTEgODAuNjE5Mjc4NSwwLjgxMTMwMTk2OSA3OC44Nzg4OTExLDAuODExMzAxOTY5IEw1OS45Njk4OTQ3LDAuODExMzAxOTY5IEM1OC4yMjk1MDczLDAuODExMzAxOTY5IDU2LjgxODI3NjMsMi4yMTQ0MDQ1MSA1Ni44MTgyNzYzLDMuOTQ0NzY3NTEgTDU2LjgxODI3NjMsNy4wNzgyMzMwNCBDNTYuODE4Mjc2Myw4LjgwODU5NjAzIDU4LjIyOTUwNzMsMTAuMjExNjk4NiA1OS45Njk4OTQ3LDEwLjIxMTY5ODYgTDU5Ljk2OTg5NDcsMTAuMjExNjk4NiBaIiBpZD0iU2hhcGUiIGZpbGw9IiMyMEEwRkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMTExNzc4LCA0NC4zOTY1NzIpIiBmaWxsPSIjQzlFMUZCIiBvcGFjaXR5PSIwLjIzODgwNTk3Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMuNjM5NDk2NTksMjguNDgxNTk3NCBDMy42Mzk0OTY1OSwzMC4yMTE5NjA0IDIuMTM2NTcxMzcsMzEuNjE1MDYyOSAwLjI4MzEwMzAxMywzMS42MTUwNjI5IEw2Mi41NjY3MDg4LDMxLjYxNTA2MjkgQzY0LjQyMDE3NzIsMzEuNjE1MDYyOSA2NS45MjMxMDI0LDMwLjIxMTk2MDQgNjUuOTIzMTAyNCwyOC40ODE1OTc0IEw2NS45MjMxMDI0LDMuNDE0OTM3OTIgQzY1LjkyMzEwMjQsMS42ODQ1NzQ5MiA2NC40MjAxNzcyLDAuMjgxNDcyMzggNjIuNTY2NzA4OCwwLjI4MTQ3MjM4IEwwLjI4MzEwMzAxMywwLjI4MTQ3MjM4IEMyLjEzNjU3MTM3LDAuMjgxNDcyMzggMy42Mzk0OTY1OSwxLjY4NDU3NDkyIDMuNjM5NDk2NTksMy40MTQ5Mzc5MiBMMy42Mzk0OTY1OSwyOC40ODE1OTc0IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEw2LjM5NTIzNzcsNzYuMDExMjgwMyBDOC4xMzU2MjUwOCw3Ni4wMTEyODAzIDkuNTQ2ODU2MTEsNzQuNjA4MTc3OCA5LjU0Njg1NjExLDcyLjg3NzgxNDggTDkuNTQ2ODU2MTEsNDcuODExMTU1MyBDOS41NDY4NTYxMSw0Ni4yNjUwMjEgOC40MjAxMzA2Niw0NC45ODAxNzEyIDYuOTM4NjI2MjgsNDQuNzI0MTA1OSBDNi43NjIwOTg1MSw0NC42OTM1OTQ2IDYuNTgwNTMzNjgsNDQuNjc3Njg5OCA2LjM5NTIzNzcsNDQuNjc3Njg5OCBMMy4yNDM2MTkyOSw0NC42Nzc2ODk4IEMxLjUwMzIzMTkxLDQ0LjY3NzY4OTggMC4wOTIwMDA4NzY0LDQ2LjA4MDc5MjMgMC4wOTIwMDA4NzY0LDQ3LjgxMTE1NTMgTDAuMDkyMDAwODc2NCw3Mi44Nzc4MTQ4IEMwLjA5MjAwMDg3NjQsNzQuNjA4MTc3OCAxLjUwMjg3NDkxLDc2LjAxMTI4MDMgMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEwzLjI0MzYxOTI5LDc2LjAxMTI4MDMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjMjBBMEZGIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZGlhbW9uZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTMuMDAwMDAwLCA0NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiNBRkM4RUIiIHBvaW50cz0iMjQuMTc1MzI2NCA4Ljg2MDY5Nzk1IDE3LjE4NTE4NTIgMjguODM1NzAyNSAzNC4zNzAzNzA0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPgogICAgICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAwIDguODYwNjk3OTUgMTAuMTk1MDQ0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjODBBOEUxIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAzNC4zNzAzNzA0IDguODYwNjk3OTUgMjcuMjU5MjYxNiAwLjA0ODE4NDE3OTciPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjQUZDOEVBIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM2NDk2REMiIHBvaW50cz0iMTcuMTg1MTg1MiAwLjA0ODE4NDE3OTcgNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzkzQjhFRSIgcG9pbnRzPSIyNy4yNTkyNjE2IDAuMDQ4MTg0MTc5NyAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAyNC4xNzUzMjY0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iMTAuMTk1MDQ0IDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDI0LjE3NTMyNjQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzY0OTZEQyIgcG9pbnRzPSIwIDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDEwLjE5NTA0NCA4Ljg2MDY5Nzk1Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==">
<p style="font-size:13px;line-height:1.5;">在Sketch中快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格</p>
<a href="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/82c57c1e-436b-4897-8548-6a1215f30656.sketch" style="cursor: pointer;display:block;border-radius:5px;;border:1px #eee solid;background:#42b983;color:#fff;font-size:14px;padding:10px 25px;text-align: center;text-decoration: none;">下载</a>
</div>
docs/component/uniui/uni-badge.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-badge**
> 代码块： `uBadge`
数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，
### 基本用法
在 ``template`` 中使用组件
```html
<uni-badge size="small" :text="100" absolute="rightBottom" type="primary">
<button type="default">右上</button>
</uni-badge>
<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="purple" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
```
## API
### Badge Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|text|String|-|角标内容|
|type|String|default|颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)|
|size|String|normal |Badge 大小，可取值：normal、small|
|is-dot|Boolean|false|不展示数字，只有一个小点|
|max-num|String/Numbuer|99|展示封顶的数字值，超过 99 显示99+|
|custom-style|Object|{}|自定义 Badge 样式, 样式对象语法|
|inverted|Boolean|false |是否无需背景颜色，为 true 时，背景颜色将变为文字的字体颜色|
|absolute(不支持 nvue)|String|rightTop|开启绝对定位, 角标将定位到其包裹的标签的四个角上，可选值： rightTop(右上角)、rightBottom（右下角）、leftBottom（左下角） 、leftTop（左上角） |
|offset|Array[number]| [0, 0]|距定位角中心点的偏移量，[-10, -10] 表示向 absolute 指定的方向偏移 10px，[10, 10] 表示向 absolute 指定的反方向偏移 10px，只有存在 absolute 属性时有效，与absolute 的值一一对应（例如：值为rightTop， 对应 offset 为 [right, Top]）|
### Badge Events
|事件名|事件说明|返回参数|
|:-:|:-:|:-:|
|@click |点击 Badge 触发事件| -|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge](https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge)
\ No newline at end of file
docs/component/uniui/uni-calendar.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-calendar**
> 代码块： `uCalendar`
日历组件
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 本组件农历转换使用的js是 [@1900-2100区间内的公历、农历互转](https://github.com/jjonline/calendar.js)
> - 仅支持自定义组件模式
> - `date`属性传入的应该是一个 String ，如： 2019-06-27 ，而不是 new Date()
> - 通过 `insert` 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件，但是为了区分模式，现使用两个事件，这里需要注意
> - 弹窗模式下无法阻止后面的元素滚动，如有需要阻止，请在弹窗弹出后，手动设置滚动元素为不可滚动
### 基本用法
在 ``template`` 中使用组件
```html
<view>
<uni-calendar
:insert="true"
:lunar="true"
:start-date="'2019-3-2'"
:end-date="'2019-5-20'"
@change="change"
/>
</view>
```
### 通过方法打开日历
需要设置 `insert` 为 `false`
```html
<view>
<uni-calendar
ref="calendar"
:insert="false"
@confirm="confirm"
/>
<button @click="open">打开日历</button>
</view>
```
```javascript
export default {
data() {
return {};
},
methods: {
open(){
this.$refs.calendar.open();
},
confirm(e) {
console.log(e);
}
}
};
```
## API
### Calendar Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|date|String|-|自定义当前时间，默认为今天|
| lunar|Boolean| false | 显示农历|
| startDate |String|-| 日期选择范围-开始日期|
| endDate|String|-| 日期选择范围-结束日期|
| range|Boolean|false| 范围选择|
| insert|Boolean|false| 插入模式,可选值，ture：插入模式；false：弹窗模式；默认为插入模式|
|clearDate|Boolean|true|弹窗模式是否清空上次选择内容|
| selected|Array|-| 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]|
|showMonth |Boolean|true| 是否显示月份为背景|
### Calendar Events
|事件名|说明|返回值|
|:-:|:-:|:-:|
|open|弹出日历组件，`insert :false` 时生效|-|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar](https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar)
\ No newline at end of file
docs/component/uniui/uni-card.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-card**
> 代码块： `uCard`
卡片视图组件。
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 因为平台兼容问题 ， 目前 APP-NVUE 安卓平台下不支持阴影
### 基本用法
在 ``template`` 中使用组件
```html
<!-- 一般用法 -->
<uni-card title="标题文字" thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" extra="额外信息" note="Tips">
内容主体，可自定义内容及样式
</uni-card>
<!-- 内容通栏 -->
<uni-card is-full="true" title="DCloud" thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" extra="2018.12.12" >
<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" style="width: 100%;"></image>
</uni-card>
<!-- 图文卡片模式 -->
<uni-card
title="标题文字"
mode="style"
:is-shadow="true"
thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
extra="Dcloud 2019-05-20 12:32:19"
note="Tips"
>
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。
</uni-card>
<!-- 标题卡片模式 -->
<uni-card
title="Dcloud"
mode="title"
:is-shadow="true"
thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
extra="技术没有上限"
note="Tips"
>
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。
</uni-card>
<!-- 自定义底部按钮 -->
<uni-card title="Dcloud" note="true">
默认内容
<template v-slot:footer>
<view class="footer-box">
<view>喜欢</view>
<view>评论</view>
<view>分享</view>
</view>
</template>
</uni-card>
```
## API
### Card Props
|属性名|类型|默认值|说明 |
|:-:|:-:|:-:|:-:|
|title|String|-|标题文字|
|extra|String|-|标题额外信息|
|note|String|-|底部信息 |
|thumbnail|String |-|标题左侧缩略图,支持网络图片，本地图片，本图片需要传入一个绝对路径，如：`/static/xxx.png` |
|mode|String|basic |卡片模式 ，可选值， basic：基础卡片 ；style ：图文卡片 ； title ：标题卡片|
|isFull|Boolean|false|卡片内容是否通栏，为true时将去除padding值|
|isShadow|Boolean|false |卡片内容是否开启阴影|
### Card Events
|事件称名|事件说明|返回参数 |
|:-:|:-:|:-:|
|@click |点击 Card 触发事件|-|
### Card Slots
|插槽称名|说明|
|:-:|:-:|
|header |卡片头部插槽（ 图文卡片 mode="style" 时，不支持）|
|footer |卡片底部插槽 |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/card/card](https://hellouniapp.dcloud.net.cn/pages/extUI/card/card)
\ No newline at end of file
docs/component/uniui/uni-collapse.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-collapse**
> 代码块： `uCollapse`
> 关联组件：`uni-collapse-item`、`uni-icons`。
折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - `App` 端默认关闭组件动画 ，因为 `height` 动画开销比较大，会导致页面卡顿，请酌情使用动画
> - 如在使用组件过程从发现卡顿严重，请尝试停用组件动画，问题原因如上
> - 在小程序端组件内容发生变化，需要手动调用 resize() 方法，手动更新几点信息，避免出现内容错位
> - 如需自定义组件默认边框颜色等，请使用插槽自定义内容并合理使用 `border ` 和 `title-border` 属性
> - 折叠面板仅支持嵌套使用，请勿单独使用
> - 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
### 基本用法
使用 `title` 属性指定面板显示内容
使用 `open` 属性默认打开当前面板
使用 `disabled` 属性禁用面板
```html
<uni-collapse>
<uni-collapse-item title="默认开启" :open="true">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item title="折叠内容">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item title="禁用状态" disabled>
<text>折叠内容</text>
</uni-collapse-item>
</uni-collapse>
```
### 手风琴效果
使用 `accordion` 属性，可以仅打开一个面板并关闭其他已经打开的面板，效果类似手风琴
设置 `accordion` 属性时，`open` 属性则生效在最后一个组件
```html
<uni-collapse accordion>
<uni-collapse-item title="手风琴效果">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item title="手风琴效果">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item title="禁用状态" disabled>
<text>折叠内容</text>
</uni-collapse-item>
</uni-collapse>
```
### 动态设置折叠面板打开状态
使用 `v-model` 属性，动态设置面板的显示状态
使用 `name` 属性设置每个面板的唯一标识，如不设置使用默认索引，从字符串 `"0"` 开始记数
**注意**
- 如果 `accordion` 属性为 `true` 则 `v-model` 类型为 `String`
- 如果 `accordion` 属性为 `false` 则 `v-model` 类型为 `Array`
- 请注意 `v-model` 属性与 `open` 属性请勿一起使用 ，建议只使用 `v-model`
```html
<uni-collapse v-model="value">
<uni-collapse-item name="key1" title="默认开启">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item name="key2" title="默认开启">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item name="key3" title="默认不开启">
<text>折叠内容</text>
</uni-collapse-item>
</uni-collapse>
```
```javascript
export default {
data(){
return {
value:['key1','key2'],
// 如果设置了 accordion 属性，则使用 string 类型
// value:'key1'
}
}
}
```
### 使用动画
使用 `show-animation` 属性开启或关闭面板折叠动画，默认动画开启
**注意**
- `App` 端默认关闭组件动画 ，因为 height 动画开销比较大，会导致页面卡顿，请酌情使用动画，如出现明显卡顿，尝试关闭动画
```html
<uni-collapse>
<uni-collapse-item :show-animation="true" title="开启动画">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item :show-animation="true" title="开启动画">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item :show-animation="false" title="不开启动画">
<text>折叠内容</text>
</uni-collapse-item>
</uni-collapse>
```
### 配置图片
使用 `thumb` 配置图片地址， 可在面板左侧显示一个图片
如需显示更多内容，如图标等，请见下方自定义插槽的说明
```html
<uni-collapse>
<uni-collapse-item title="标题文字"
thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
<view class="content">
<text class="text">折叠内容主体，可自定义内容及样式</text>
</view>
</uni-collapse-item>
</uni-collapse>
```
### 自定义插槽
如果需要自定义面板显示，可以使用 `title` 插槽达成完全自定义。下面是一个使用 `uni-list` 的列表示例，需要引入 `uni-list` 组件
```html
<uni-collapse>
<!-- 因为list默认带一条分隔线，所以使用 titleBorder="none" 取消面板的分隔线 -->
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<uni-list>
<uni-list-item title="标题使用自定义标题插槽" :show-extra-icon="true" :extra-icon="extraIcon">
</uni-list-item>
</uni-list>
</template>
<view class="content">
<text class="text">折叠内容主体，可自定义内容及样式</text>
</view>
</uni-collapse-item>
</uni-collapse>
```
**注意**
- 在折叠面板组件中使用list时，在 App-Nvue 下请勿单独使用 uni-list-item，会导致组件无法正常显示，其他平台不做限制
- 在默认插槽里使用 uni-list 组件与上方示例一样，直接写在默认插槽里即可
## API
### Collapse Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|value/v-model|String/Array|-|当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)|
|accordion|Boolean|false|是否开启手风琴效果 |
### Collapse Event
|事件称名|说明|返回值|
|:-:|:-:|:-:|
|@change|切换面板时触发 |切换面板时触发，如果是手风琴模式，返回类型为string，否则为array|
### Collapse Methods
|方法名称|说明|
|:-:|:-:|
|resize |更新当前列表高度|
> **提示**
> - resize 方法解决动态添加数据，带动画的折叠面板高度不更新的问题
> - 需要在数据渲染完毕之后使用 `resize` 方法。推荐在 `this.$nextTick()` 中使用
> - 当前只有小程序端需要调用此方法，H5\App 端已经做了处理，不需要手动更新高度
> ```html
> <view>
> <uni-collapse ref="collapse" v-model="value">
> <uni-collapse-item title="默认开启" >
> <view class="content">
> <text class="text">{{content}}</text>
> </view>
> </uni-collapse-item>
> <uni-collapse-item title="折叠内容">
> <view class="content">
> <text class="text">折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字。再次点击标题，折叠内容。</text>
> </view>
> </uni-collapse-item>
> </uni-collapse>
> <button class="button" type="primary" @click="add">动态修改内容</button>
> </view>
> ```
> ```javascript
> export default {
> data() {
> return {
> value:['0'],
> content: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
> }
> },
> methods: {
> add() {
> if (this.content.length > 35) {
> this.content = '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。'
> } else {
> this.content = '折叠内容主体，这是一段比较长内容。通过点击按钮修改后内容后，使组件高度发生变化，在次点击按钮恢复之前的内容和高度。'
> }
> // TODO 小程序中不支持自动更新 ，需要手动resize 更新组件高度
> // #ifdef MP
> this.$nextTick(() => {
> this.$refs.collapse.resize()
> })
> // #endif
> }
> }
> }
> ```
### CollapseItem Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|title|String|-|标题文字|
|thumb|String|-|标题左侧缩略图|
|disabled|Boolean|false|是否禁用|
|open|Boolean|false|是否展开面板|
|show-animation|Boolean|false|开启动画|
|border|Boolean|true|折叠面板内容分隔线|
|title-border|String|auto|折叠面板标题分隔线可选值见下方 **TitleBorder Params**|
|show-arrow|Boolean|true|是否显示右侧箭头|
#### TitleBorder Params
|参数名|说明|
|:-:|:-:|
|auto|分隔线自动显示|
|none|不显示分隔线|
|show|一直显示分隔线|
### Collapse Slots
|插槽名|说明|
|:-:| :-:|
|default|默认插槽|
|title|面板标题插槽，如使用此插槽禁用样式效果将失效|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/collapse/collapse](https://hellouniapp.dcloud.net.cn/pages/extUI/collapse/collapse)
\ No newline at end of file
docs/component/uniui/uni-combox.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-combox**
> 代码块： `uCombox`
组合框组件。
### 平台兼容性说明
**暂不支持nvue**
### 基本用法
在 ``template`` 中使用组件
```html
<uni-combox label="所在城市" :candidates="candidates" placeholder="请选择所在城市" v-model="city"></uni-combox>
```
## API
### Combox Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|label |String |- |标签文字 |
|value |String |- |combox的值 |
|labelWidth |String |auto |标签宽度，有单位字符串，如:'100px' |
|placeholder|String |- |输入框占位符 |
|candidates |Array/String |[] |候选字段 |
|emptyTips |String |无匹配项 |无匹配项时的提示语 |
### Combox Events
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|@input |combox输入事件 |返回combox值|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/combox/combox](https://hellouniapp.dcloud.net.cn/pages/extUI/combox/combox)
\ No newline at end of file
docs/component/uniui/uni-countdown.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-countdown**
> 代码块： `uCountDown`
倒计时组件。
### 基本用法
在 ``template`` 中使用组件
```html
<!-- 一般用法 -->
<uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
<!-- 不显示天数 -->
<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12"></uni-countdown>
<!-- 修改颜色 -->
<uni-countdown color="#FFFFFF" background-color="#00B26A" border-color="#00B26A" :day="1" :hour="2" :minute="30" :second="0"></uni-countdown>
```
## API
### Countdown Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|backgroundColor |String |#FFFFFF|背景色 |
|color |String |#000000|文字颜色 |
|splitorColor |String |#000000|分割符号颜色 |
|day |Number |0 |天数 |
|hour |Number |0 |小时 |
|minute |Number |0 |分钟 |
|second |Number |0 |秒 |
|showDay |Boolean|true |是否显示天数 |
|showColon |Boolean|true |是否以冒号为分隔符 |
|start |Boolean|true |是否初始化组件后就开始倒计时|
### Countdown Events
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|@timeup|倒计时时间到触发事件 |- |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/countdown/countdown](https://hellouniapp.dcloud.net.cn/pages/extUI/countdown/countdown)
\ No newline at end of file
docs/component/uniui/uni-data-checkbox.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-data-checkbox**
> 代码块： `uDataCheckbox`
本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括：
1. 数据绑定型组件：给本组件绑定一个data，会自动渲染一组候选内容。再以往，开发者需要编写不少代码实现类似功能
2. 自动的表单校验：组件绑定了data，且符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)组件的表单校验规范，搭配使用会自动实现表单校验
3. 本组件合并了单选多选
4. 本组件有若干风格选择，如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件，样式代码虽然不用自己写了，却会牺牲一定的样式自定义性
在uniCloud开发中，`DB Schema`中配置了enum枚举等类型后，在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中，会自动生成``uni-data-checkbox``组件并绑定好data
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - 本组件为数据驱动，目的是快速投入使用，只可通过 style 覆盖有限样式，不支持自定义更多样式
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
> - 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
> - 如组件显示有问题 ，请升级 `HBuilderX` 为 `v3.1.0` 以上
### 基本用法
设置 `localdata` 属性后，组件会通过数据渲染出对应的内容，默认显示的是单选框
需要注意 `:multiple="false"` 时（单选） ， `value/v-model` 的值是 `String|Number` 类型
```html
<template>
<view>
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: 0,
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 多选框
设置 `multiple` 属性，组件显示为多选框
需要注意 `:multiple="true"` 时（多选） ， `value/v-model` 的值是 `Array` 类型
```html
<template>
<view>
<uni-data-checkbox multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: [0,2],
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 设置最大最小值
设置 `:multiple="true"` 时（多选） ，可以设置 `min`、`max` 属性
如果选中个数小于 `min` 属性设置的值，那么选中内容将不可取消，只有当选中个数大于等于 `min`且小于 `max` 时，才可取消选中
如果选中个数大于等于 `max` 属性设置的值，那么其他未选中内容将不可选
```html
<template>
<view>
<uni-data-checkbox min="1" max="2" multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: [0,2],
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 设置禁用
如果需要禁用某项，需要在 `localdata` 属性的数据源中添加 `disable` 属性，而不是在组件中添加 `disable` 属性
```html
<template>
<view>
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: 0,
range: [{
"value": 0,
"text": "篮球"
},
{
"value": 1,
"text": "足球",
// 禁用当前项
"disable":true
},
{
"value": 2,
"text": "游泳"
}
]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 自定义选中颜色
设置 `selectedColor` 属性，可以修改组件选中后的图标及边框颜色
设置 `selectedTextColor` 属性，可以修改组件选中后的文字颜色，如不填写默认同 `selectedColor` 属性 ，`mode` 属性为 `tag` 时，默认为白色
```html
<template>
<view>
<uni-data-checkbox　selectedColor＝"red" selectedTextColor="red" multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: [0,2],
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 更多模式
设置 `mode` 属性，可以设置更多显示样式，目前内置样式有四种 `default/list/button/tag`
如果需要禁用某项，需要在 `localdata` 属性的数据源中添加 `disable` 属性，而不是在组件中添加 `disable` 属性
```html
<template>
<view>
<!-- 默认 default -->
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 列表 list ，显示左侧图标 -->
<uni-data-checkbox mode="list" icon="left" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 列表 list ，显示右侧图标 -->
<uni-data-checkbox mode="list" icon="right" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 按钮 button -->
<uni-data-checkbox mode="button" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 标签 tag -->
<uni-data-checkbox mode="tag" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: 0,
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
## API
### DataCheckbox Props
| 属性名 | 类型 |可选值 | 默认值| 说明 |
| :-: | :-: |:-: |:-: | :-: |
|value/v-model|Array/String/Number|- |- |默认值，multiple=true时为 Array类型，否则为 String或Number类型 |
|localdata |Array |- |- |本地渲染数据， |
|mode | String |default/list/button/tag|default|显示模式 |
|multiple |Boolean |- |false |是否多选 |
|min |String/Number |- |- |最小选择个数 ，multiple为true时生效 |
|max |String/Number |- |- |最大选择个数 ，multiple为true时生效 |
|wrap |Boolean |- |- |是否换行显示 |
|icon |String |left/right |left |list 列表模式下 icon 显示的位置 |
|selectedColor|String |- |#007aff|选中颜色|
|selectedTextColor|String |- |#333 |选中文本颜色，如不填写则自动显示|
|emptyText |String |- |暂无数据 |没有数据时显示的文字 ，本地数据无效|
|map |Object |- |{text:'text',value:'value'} |字段映射，将text/value映射到数据中的其他字段|
#### Localdata Options
`localdata` 属性的格式为数组，数组内每项是对象，需要严格遵循如下格式
|属性名 | 说明 |
|:-: | :-: |
|text |显示文本 |
|value |选中后的值 |
|disable |是否禁用 |
#### Mode Options
|属性名 | 说明 |
|:-: | :-: |
|default |默认值，横向显示 |
|list |列表 |
|button |按钮 |
|tag |标签 |
### DataCheckbox Events
| 事件名 | 事件说明 | 返回参数|
| :-: | :-: | :-: |
| @change| 选中状态改变时触发事件 | - |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/data-checkbox/data-checkbox](https://hellouniapp.dcloud.net.cn/pages/extUI/data-checkbox/data-checkbox)
\ No newline at end of file
docs/component/uniui/uni-data-picker.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-data-picker**
> 代码块： `uDataPicker`
> 关联组件：`uni-data-pickerview`、`uni-load-more`。
`<uni-data-picker>` 是一个选择类[datacom组件](https://uniapp.dcloud.net.cn/component/datacom)。
支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
候选数据支持一次性加载完毕，也支持懒加载，比如示例图中，选择了“北京”后，动态加载北京的区县数据。
`<uni-data-picker>` 组件尤其适用于地址选择、分类选择等选择类。
`<uni-data-picker>` 支持本地数据、云端静态数据(json)，uniCloud云数据库数据。
`<uni-data-picker>` 可以通过JQL直连uniCloud云数据库，配套[DB Schema](https://uniapp.dcloud.net.cn/uniCloud/schema)，可在schema2code中自动生成前端页面，还支持服务器端校验。
在uniCloud数据表中新建表“uni-id-address”和“opendb-city-china”，这2个表的schema自带foreignKey关联。在“uni-id-address”表的表结构页面使用schema2code生成前端页面，会自动生成地址管理的维护页面，自动从“opendb-city-china”表包含的中国所有省市区信息里选择地址。
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
> - `<uni-data-picker>` 内部包含了弹出层组件 `<uni-data-pickerview>` 外层的布局可能会影响弹出层，[详情](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Common_CSS_Questions)
## API
### DataPicker Props
|属性名 | 类型 | 可选值 | 默认值 | 说明|
|:-: | :-: |:-: | :-: | :-: |
|v-model |String/ Number | - | - |绑定数据|
|spaceInfo |Object | | |服务空间配置，[详情](https://uniapp.dcloud.net.cn/uniCloud/init)|
|localdata |Array | | |数据，[详情](https://gitee.com/dcloud/datacom)|
|preload |Boolean | true/false | false |预加载数据|
|readonly |Boolean | true/false | false |是否禁用|
|clear-icon |Boolean | true/false | true |是否显示清除按钮|
|ellipsis |Boolean | true/false | true |是否隐藏 tab 标签过长的文本|
|step-searh |Boolean | true/false | true |分步查询时，点击节点请求数据|
|step-search-url |String | | |分步查询时，动态加载云端数据url格式，`https://xxx.com/{parentValue}`(当前版本暂不支持，下版支持)|
|self-field |String | | |分步查询时当前字段名称|
|parent-field |String | | |分步查询时父字段名称|
|collection |String | | |表名。支持输入多个表名，用 `,` 分割|
|field |String | | |查询字段，多个字段用 `,` 分割|
|where |String | | |查询条件，内容较多，另见jql文档：[详情](https://uniapp.dcloud.net.cn/uniCloud/uni-clientDB?id=jsquery)|
|orderby |String | | |排序字段及正序倒叙设置|
|popup-title |String | | |弹出层标题|
|map |Object | |{text:'text',value:'value'}|字段映射，将text/value映射到数据中的其他字段|
> ****
> `collection/where/orderby` 和 `<unicloud-db>` 的用法一致，[详情](https://uniapp.dcloud.net.cn/uniCloud/unicloud-db)
### DataPicker Events
|事件称名 | 类型 | 说明 |
|:-: | :-: | :-: |
|@change |EventHandle | 选择完成时触发 {detail: {value}} |
|@nodeclick |EventHandle | 节点被点击时触发 |
|@stepsearch |EventHandle | 动态加载节点数据前触发(当前版本暂不支持，下版支持) |
|@popupopened |EventHandle | 弹出层弹出时触发 |
|@popupclosed |EventHandle | 弹出层关闭时触发 |
### DataPicker Methods
|方法称名 |说明|参数|
|:-:|:-:|:-:|
|show|打开弹出层|-|
|hide|关闭弹出层|-|
|clear|清除已选项|-|
**使用方法：**
```js
this.$refs.picker.show() // `picker` 为组件的 ref 名称
```
### DataPicker Slots
|名称|说明|
|:-:|:-:|
|default|覆盖显示框内容|
### 基本用法
#### 云端数据
> **注意事项**
> - 云端数据需要关联服务空间
> - 下面示例中使用的表 `opendb-city-china`(中国城市省市区数据，含港澳台), 在[uniCloud控制台](https://unicloud.dcloud.net.cn/)使用opendb创建，[详情](https://gitee.com/dcloud/opendb)
```html
<template>
<view>
<uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china" field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code" parent-field="parent_code"
@change="onchange" @nodeclick="onnodeclick">
</uni-data-picker>
</view>
</template>
```
```js
<script>
export default {
data() {
return {
}
},
methods: {
onchange(e) {
const value = e.detail.value
},
onnodeclick(node) {}
}
}
</script>
```
#### 本地数据
```html
<template>
<view>
<uni-data-picker :localdata="items" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
</view>
</template>
```
```js
<script>
export default {
data() {
return {
items: [{
text: "一年级",
value: "1-0",
children: [
{
text: "1.1班",
value: "1-1"
},
{
text: "1.2班",
value: "1-2"
}
]
},
{
text: "二年级",
value: "2-0"
},
{
text: "三年级",
value: "3-0"
}]
}
},
methods: {
onchange(e) {
const value = e.detail.value
},
onnodeclick(node) {
}
}
}
</script>
```
#### 自定义solt
```html
<uni-data-picker v-slot:default="{data, error, options}" popup-title="请选择所在地区">
<view v-if="error" class="error">
<text>{{error}}</text>
</view>
<view v-else-if="data.length" class="selected">
<view v-for="(item,index) in data" :key="index" class="selected-item">
<text>{{item.text}}</text>
</view>
</view>
<view v-else>
<text>请选择</text>
</view>
</uni-data-picker>
```
> **注意事项**
> `localdata` 和 `collection` 同时配置时，`localdata` 优先
#### 完整示例
```html
<template>
<view class="container">
<uni-data-picker @change="onchange" @nodeclick="onnodeclick" @stepsearch="onstepsearch" @popupopened="onpopupopened"
@popupclosed="onpopupclosed">
</uni-data-picker>
</view>
</template>
```
```js
<script>
export default {
data() {
return {
count: 1
}
},
methods: {
onchange(e) {
const value = e.detail.value
},
onnodeclick(node) {
// node 当前点击节点
},
onstepsearch(node, resolve) {
if (node.level === 0) {
return resolve([{
text: 'region1',
value: 'region1'
}, {
text: 'region2',
value: 'region1'
}]);
}
var hasChild;
if (node.text === 'region1') {
hasChild = true;
} else if (node.text === 'region2') {
hasChild = false;
} else {
hasChild = Math.random() > 0.5;
}
setTimeout(() => {
var data;
if (hasChild) {
data = [{
text: 'zone' + this.count++,
value: 'zone' + this.count++
}, {
text: 'zone' + this.count++,
value: 'zone' + this.count++
}];
} else {
data = [];
}
resolve(data);
}, 500);
},
onpopupopened() {},
onpopupclosed() {}
}
}
</script>
```
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/data-picker/data-picker](https://hellouniapp.dcloud.net.cn/pages/extUI/data-picker/data-picker)
\ No newline at end of file
docs/component/uniui/uni-dateformat.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-dateformat**
> 代码块： `uDateformat`
日期格式化组件。
### 基本用法
在 ``template`` 中使用组件
```html
<!-- 一般用法 -->
<uni-dateformat date="2020/10/20 20:20:20"></uni-dateformat>
<!-- 不显示刚刚/马上/xx分钟前 -->
<uni-dateformat date="2020/10/20 20:20:20" :threshold="[0,0]"></uni-dateformat>
```
## API
### Dateformat Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|date |Object&#124;String&#124;Number |Date.now() |要格式化的日期对象/日期字符串/时间戳 |
|threshold |Array |[0, 0] |转化类型阈值 |
|format |String |'yyyy/MM/dd hh:mm:ss' |格式字符串 |
|locale |String |zh |格式化使用的语言，目前支持zh（中文）、en（英文） |
#### Threshold Options
格式化组件会对时间进行用户友好转化，threshold就是用来控制转化的时间阈值的。
以`[60000, 3600000]`为例，将传入时间与当前时间差的绝对值记为delta（单位毫秒）
- `delta < 60000`时，时间会被转化为“刚刚|马上”
- `delta >= 60000 && delta < 3600000`时，时间会被转化为“xx分钟前|xx分钟后”，如果超过1小时会显示成“xx小时前|xx小时后”，以此类推
- `delta >= 3600000`时，会按照format参数传入的格式进行格式化
如果不想转化为“马上|刚刚”可以传入`:threshold = "[0,3600000]"`。默认值`[0,0]`既不会转换为“马上|刚刚”也不会转化为“xx分钟前|xx分钟后”
#### Format Options
format接收字符以及含义如下：
|字符 |说明 |
|:-: |:-: |
|yyyy |四位年份 |
|yy |两位年份 |
|MM |两位月份（不足两位在前面补0） |
|M |月份，不自动补0 |
|dd |两位天（不足两位在前面补0） |
|d |天，不自动补0 |
|hh |两位小时（不足两位在前面补0） |
|h |小时，不自动补0 |
|mm |两位分钟（不足两位在前面补0） |
|m |分钟，不自动补0 |
|ss |两位秒（不足两位在前面补0） |
|s |秒，不自动补0 |
|SSS |三位毫秒（不足三位在前面补0） |
|S |毫秒，不自动补0 |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/dateformat/dateformat](https://hellouniapp.dcloud.net.cn/pages/extUI/dateformat/dateformat)
\ No newline at end of file
docs/component/uniui/uni-datetime-picker.md 0 → 100644
浏览文件 @ 252862c0
> `重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护`
> **组件名：uni-datetime-picker**
> 代码块： `uDatetimePicker`
该组件的优势是，支持**时间戳**输入和输出（起始时间、终止时间也支持时间戳），可**同时选择**日期和时间。
若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。
**_点击 picker 默认值规则：_**
- 若设置初始值 value, 会显示在 picker 显示框中
- 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中
### 基本用法
在 `template` 中使用组件
```html
<template>
<view class="page">
<text class="example-info">可以同时选择日期和时间的选择器</text>
<uni-section :title="'日期用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker
type="date"
:value="single"
start="2021-3-20"
end="2021-6-20"
@change="change"
/>
</view>
<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker
returnType="timestamp"
@change="changeLog($event)"
start="2021-3-20"
end="2021-5-20"
/>
</view>
<uni-section
:title="'日期时间用法：' + datetimesingle"
type="line"
></uni-section>
<view class="example-body">
<uni-datetime-picker
type="datetime"
v-model="datetimesingle"
@change="changeLog"
/>
</view>
<uni-section :title="'v-model用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" />
</view>
<uni-section :title="'插槽用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single"
>我是一个插槽，点击我</uni-datetime-picker
>
</view>
<uni-section :title="'无边框用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" :border="false" />
</view>
<uni-section :title="'disabled用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" disabled />
</view>
<uni-section
:title="'日期范围用法：' + '[' + range + ']'"
type="line"
></uni-section>
<view class="example-body">
<uni-datetime-picker
v-model="range"
type="daterange"
start="2021-3-20"
end="2021-5-20"
rangeSeparator="至"
/>
</view>
<uni-section
:title="'日期时间范围用法：' + '[' + datetimerange + ']' "
type="line"
></uni-section>
<view class="example-body">
<uni-datetime-picker
v-model="datetimerange"
type="datetimerange"
start="2021-3-20 12:00:00"
end="2021-6-20 20:00:00"
rangeSeparator="至"
/>
</view>
</view>
</template>
<script>
export default {
data() {
return {
single: "2021-04-3",
datetimesingle: "2021-04-3",
range: ["2021-03-8", "2021-4-20"],
datetimerange: ["2021-03-20 20:10:10", "2021-05-10 10:10:10"],
};
},
watch: {
datetimesingle(newval) {
console.log("单选:", this.datetimesingle);
},
range(newval) {
console.log("范围选:", this.range);
},
datetimerange(newval) {
console.log("范围选:", this.datetimerange);
},
},
mounted() {
setTimeout(() => {
this.datetimesingle = "2021-5-1";
this.single = "2021-5-1";
}, 1000);
},
methods: {
change(e) {
this.single = e;
console.log("-change事件:", e);
},
},
};
</script>
<style lang="scss">
@import "@/common/uni-nvue.scss";
</style>
```
## API
### DatetimePicker Props
|属性名 |类型 |默认值 |值域 |说明 |
|:-: |:-: |:-: | |:-: |
|type |String |datetime |date/daterange/datetime/datetimerange|选择器类型 |
|value |String、Number、Array(范围选择)、Date|- |- |输入框当前值 |
|start |String、Number |- |- |最小值，可以使用日期的字符串（String）、时间戳（Number） |
|end |String、Number |- |- |最大值，可以使用日期的字符串（String）、时间戳（Number） |
|return-type |String |string |timestamp 、string、date |返回值格式 |
|border |Boolean |true | |是否有边框 |
|rangeSeparator |String |'-' |- |选择范围时的分隔符 |
|placeholder |String |- |- |非范围选择时的占位内容 |
|start-placeholder|String |- |- |范围选择时开始日期的占位内容 |
|end-placeholder |String |- |- |范围选择时结束日期的占位内容 |
|disabled |Boolean |false | |是否不可选择 |
|clear-icon |Boolean |true | |是否显示清除按钮 |
|hide-second |Boolean |false | |是否显示秒，只显示时分 |
### DatetimePicker Events
| 事件名称 | 说明 | 返回值 |
| :-: | :: | :: |
| change | 确定日期时间时触发的事件，参数为当前选择的日期对象 | 单选返回日期字符串，如：'2010-02-3'；范围选返回日期字符串数组，如：['2020-10-1', '2021-4-1'] |
| maskClick | 点击遮罩层触发 | - |
### DatetimePicker Methods
| 方法称名 | 说明 | 参数 |
| :: | :--: | :--: |
| show | 打开弹出层 | - |
| close | 关闭弹出层 | - |
| clear | 清除上次选中的状态和值 | - |
### DatetimePicker Slots
| 名称 | 说明 |
| :-: |
| default | 会覆盖输入框 |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker](https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker)
\ No newline at end of file
docs/component/uniui/uni-drawer.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-drawer**
> 代码块： `uDrawer`
抽屉侧滑菜单。
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - `width` 属性仅在 `vue` 页面生效，`nvue` 页面因性能问题，不支持动态设置宽度，如需修改，请下载组件修改源码
### 基本用法
在 ``template`` 中使用组件
```html
<template>
<view>
<button @click="showDrawer" type="primary">右侧弹出 显示Drawer</button>
<uni-drawer ref="showRight" mode="right" :mask-click="false">
<scroll-view style="height: 100%;" scroll-y="true">
<button @click="closeDrawer" type="primary">关闭Drawer</button>
<view v-for="item in 60" :key="item">可滚动内容 {{ item }}</view>
</scroll-view>
</uni-drawer>
</view>
</template>
<script>
export default {
methods: {
showDrawer() {
this.$refs.showRight.open();
},
closeDrawer() {
this.$refs.showRight.close();
}
}
}
</script
```
## API
### Drawer Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|mask |Boolean|true |是否显示遮罩 |
|maskClick |Boolean|true |点击遮罩是否可以关闭抽屉 |
|mode |String |left |Drawe滑出位置，可选值：left（从左侧滑出）， right（从右侧滑出）|
|width |Number |220 |Drawe 宽度，仅vue页面设置生效 |
### Drawer Events
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|@change|抽屉状态发生变化触发事件 |true：抽屉已经打开；false：抽屉已经关闭； |
### Drawer Methods
|方法称名 |说明 |参数|
|:-: |:-: |:-:|
|open |打开抽屉 |-|
|close |关闭抽屉 |-|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/drawer/drawer](https://hellouniapp.dcloud.net.cn/pages/extUI/drawer/drawer)
\ No newline at end of file
docs/component/uniui/uni-easyinput.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-easyinput**
> 代码块： `uEasyinput`
easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
### 基本用法
输入内容后，输入框尾部会显示清除按钮，点击可清除内容，如不需要展示图标，`clearable` 属性设置为 `false` 即可
`clearable` 属性设置为 `true` ，输入框聚焦且内容不为空时，才会显示内容
```html
<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 输入框带左右图标
设置 `prefixIcon` 属性来显示输入框的头部图标
设置 `suffixIcon` 属性来显示输入框的尾部图标
注意图标当前只支持 `uni-icons` 内置的图标，当配置 `suffixIcon` 属性后，会覆盖 `:clearable="true"` 和 `type="password"` 时的原有图标
绑定 `@iconClick` 事件可以触发图标的点击 ，返回 `prefix` 表示点击左侧图标，返回 `suffix` 表示点击右侧图标
```html
<!-- 输入框头部图标 -->
<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
<!-- 展示输入框尾部图标 -->
<uni-easyinput suffixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
```
### 输入框禁用
设置 `disable` 属性可以禁用输入框，此时输入框不可编辑
```html
<uni-easyinput disabled v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 密码框
设置 `type="password"` 时，输入框内容将会不可见，由实心点代替，同时输入框尾部会显示眼睛图标，点击可切换内容显示状态
```html
<uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
```
### 输入框聚焦
设置 `focus` 属性可以使输入框聚焦
如果页面存在多个设置 `focus` 属性的输入框，只有最后一个输入框的 `focus` 属性会生效
```html
<uni-easyinput focus v-model="password" placeholder="请输入内容"></uni-easyinput>
```
### 多行文本
设置 `type="textarea"` 时可输入多行文本
```html
<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 多行文本自动高度
设置 `type="textarea"` 时且设置 `autoHeight` 属性，可使用多行文本的自动高度，会跟随内容调整输入框的显示高度
```html
<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 取消边框
设置 `:inputBorder="false"` 时可取消输入框的边框显示，同时搭配 `uni-forms` 的 `:border="true"` 有较好的效果
```html
<uni-forms border>
<uni-forms-item label="姓名">
<uni-easyinput :inputBorder="false" placeholder="请输入姓名"></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="年龄">
<uni-easyinput :inputBorder="false" placeholder="请输入年龄"></uni-easyinput>
</uni-forms-item>
</uni-forms>
```
## API
### Easyinput Props
|属性名| 类型| 可选值|默认值|说明|
|:-:|:-:|:-:|:-:|:-:|
|value|String/ Number|-|-|输入内容|
|type|String|见 type Options|text|输入框的类型（默认text）|
|clearable|Boolean|-|true| 是否显示右侧清空内容的图标控件(输入框有内容且不禁用时显示)，点击可清空输入框内容|
|autoHeight|Boolean|-|false| 是否自动增高输入区域，type为textarea时有效|
|placeholder|String |-| - | 输入框的提示文字|
|placeholderStyle|String| - | - | placeholder的样式(内联样式，字符串)，如"color: #ddd"|
|focus|Boolean|-|false|是否自动获得焦点|
|disabled|Boolean|-|false|是否不可输入|
|maxlength|Number|-|140|最大输入长度，设置为 -1 的时候不限制最大长度|
|confirmType|String|-|done|设置键盘右下角按钮的文字，仅在type="text"时生效|
|clearSize|Number|-|15|清除图标的大小，单位px|
|prefixIcon|String|-|-|输入框头部图标 |
|suffixIcon|String|-|-|输入框尾部图标|
|trim|Boolean/String|见 trim Options | false | 是否自动去除空格，传入类型为 Boolean 时，自动去除前后空格|
|inputBorder|Boolean|-|true|是否显示input输入框的边框|
|styles|Object|-|-| 样式自定义|
|passwordIcon|Boolean|-| true | type=password 时，是否显示小眼睛图标|
#### Type Options
|属性名| 说明|
|:-:| :-:|
|text|文本输入键盘|
|textarea |多行文本输入键盘|
|password |密码输入键盘|
|number|数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式 |
|idcard|身份证输入键盘，仅支持微信、支付宝、百度、QQ小程序|
|digit|带小数点的数字键盘，仅支持微信、支付宝、百度、头条、QQ小程序 |
#### ConfirmType Options
平台差异与 [input](https://uniapp.dcloud.io/component/input) 相同
|属性名 | 说明|
|:-:| :-:|
|send|右下角按钮为“发送” |
|search |右下角按钮为“搜索” |
|next|右下角按钮为“下一个”|
|go|右下角按钮为“前往” |
|done|右下角按钮为“完成” |
#### Styles Options
|属性名| 默认值 |说明|
|:-:| :-:| :-:|
|color| #333| 输入文字颜色|
|disableColor |#eee| 输入框禁用背景色|
|borderColor |#e5e5e5 | 边框颜色|
#### Trim Options
传入类型为 `Boolean` 时，自动去除前后空格,传入类型为 `String` 时，可以单独控制，下面是可选值
|属性名|说明|
|:-:| :-:|
|both|去除两端空格|
|left|去除左侧空格|
|right|去除右侧空格|
|all|去除所有空格|
|none|不去除空格|
### Easyinput Events
|事件称名| 说明|返回值|
|:-:| :-:|:-:|
|@input|输入框内容发生变化时触发| -|
|@focus|输入框获得焦点时触发| -|
|@blur|输入框失去焦点时触发| -|
|@confirm|点击完成按钮时触发| -|
|@iconClick |点击图标时触发| prefix/suffix |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput](https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput)
\ No newline at end of file
docs/component/uniui/uni-fab.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-fab**
> 代码块： `uFab`
点击可展开一个图形按钮菜单
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 不建议动态修改属性，可能会耗损部分性能。
> - 展开菜单暂不支持字体图标，使用图片路径时建议使用绝对路径，相对路径可能会有问题。
> - 选中状态要通过自己控制，如果不希望有选中状态，不处理 `active` 即可。
> - 展开菜单建议最多显示四个，如果过多对于小屏手机可能会超出屏幕。
### 基本用法
在 `template` 中使用组件
```html
<template>
<view>
<uni-fab
:pattern="pattern"
:content="content"
:horizontal="horizontal"
:vertical="vertical"
:direction="direction"
@trigger="trigger"
></uni-fab>
</view>
</template>
```
## API
### Fab Props
| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :-: |
| pattern | Object | - | 可选样式配置项 |
| horizontal| String | 'left' | 水平对齐方式。`left`:左对齐，`right`：右对齐 |
| vertical | String | 'bottom' | 垂直对齐方式。`bottom`:下对齐，`top`：上对齐 |
| direction | String | 'horizontal' | 展开菜单显示方式。`horizontal`:水平显示，`vertical`：垂直显示 |
| popMenu | Boolean | true | 是否使用弹出菜单 |
| content | Array | - | 展开菜单内容配置项 |
**pattern配置项：**
| 参数 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :-: |
| color | String | #3c3e49 | 文字默认颜色 |
| selectedColor | String | #007AFF | 文字选中时的颜色 |
| backgroundColor | String | #ffffff | 背景色 |
| buttonColor | String | #3c3e49 | 按钮背景色 |
**content配置项：**
| 参数 | 类型 | 说明 |
| :-: | :-: | :-: | :-: |
| iconPath | String | 图片路径 |
| selectedIconPath | String | 选中后图片路径|
| text | String | 文字 |
| active | Boolean | 是否选中当前 |
### Fab Events
| 参数 | 类型 | 说明 |
| :-: | :-: | :-: |
| @trigger | Function | 展开菜单点击事件，返回点击信息|
| @fabClick | Function | 悬浮按钮点击事件 |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab](https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab)
\ No newline at end of file
docs/component/uniui/uni-fav.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-fav**
> 代码块： `uFav`
用于收藏功能，可点击切换选中、不选中的状态。
### 基本用法
在 ``template`` 中使用组件
```html
<uni-fav :checked="checked" @click="onClick"/>
<uni-fav :checked="checked" class="favBtn" circle="true" bgColor="#dd524d" bgColorChecked="#007aff" @click="onClick"/>
```
## API
### Fav Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|star |Boolean|true |按钮是否带星星 |
|bgColor |String |#eeeeee |未收藏时的背景色 |
|bgColorChecked |String |#007aff |已收藏时的背景色 |
|fgColor |String |#666666 |未收藏时的文字颜色 |
|fgColorChecked |String |#FFFFFF |已收藏时的文字颜色 |
|circle |Boolean|false |是否为圆角 |
|checked |Boolean|false |是否为已收藏 |
|contentText |Object |```{contentDefault: '收藏',contentFav: '已收藏'}```|收藏按钮文字 |
### Fav Events
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|click |点击 fav按钮 触发事件 |- |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/fav/fav](https://hellouniapp.dcloud.net.cn/pages/extUI/fav/fav)
\ No newline at end of file
docs/component/uniui/uni-file-picker.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-file-picker**
> 代码块： `uFilePicker`
文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - 如不绑定服务空间，`autoUpload`默认为`false`且不可更改
> - 选择文件目前只支持 `H5` 和 `微信小程序平台` ，且 `微信小程序平台` 使用 `wx.chooseMessageFile()`
> - v-model 值需要自动上传成功后才会绑定值，一般只用来回显数据
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
### 基础用法
```html
<uni-file-picker
v-model="imageValue"
fileMediatype="image"
mode="grid"
@select="select"
@progress="progress"
@success="success"
@fail="fail"
/>
```
```javascript
export default {
data() {
return {
imageValue:[]
}
},
methods:{
// 获取上传状态
select(e){
console.log('选择文件：',e)
},
// 获取上传进度
progress(e){
console.log('上传进度：',e)
},
// 上传成功
success(e){
console.log('上传成功')
},
// 上传失败
fail(e){
console.log('上传失败：',e)
}
}
}
```
### 选择指定后缀图片，且限制选择个数
配置 `file-mediatype` 属性为 `image`，限定只选择图片
配置 `file-extname` 属性为 `'png,jpg'`，限定只选择 `png`和`jpg`后缀的图片
配置 `limit` 属性为 1 ，则最多选择一张图片
配置 `mode` 属性为 `grid` ，可以使用九宫格样式选择图片
```html
<uni-file-picker
v-model="imageValue"
file-mediatype="image"
mode="grid"
file-extname="png,jpg"
:limit="1"
@progress="progress"
@success="success"
@fail="fail"
@select="select"
/>
```
### 手动上传
配置 `auto-upload` 属性为 `false` ，可以停止自动上传，通过`ref`调用`upload`方法自行选择上传时机
```html
<view>
<uni-file-picker ref="files" :auto-upload="false"/>
<button @click="upload">上传文件</button>
</view>
```
```javascript
export default {
data() {},
methods:{
upload(){
this.$refs.files.upload()
}
}
}
```
### 单选图片且点击再次选择
配置 `disable-preview` 属性为 `true`，禁用点击预览图片功能
配置 `del-icon` 属性为 `false`，隐藏删除按钮
配置 `return-type` 属性为 `object`，设置 `value` 类型 ，如需绑定 `array`类型 ，则设置`limit:1`，可达到一样的效果
```html
<uni-file-picker
disable-preview
:del-icon="false"
return-type="object"
>选择头像</uni-file-picker>
```
### 自定义样式
配置 `image-styles` 属性，可以自定义`mode:image`时的回显样式
配置 `list-styles` 属性，可以自定义`mode:video|| mode:all`时的回显样式
```html
<view>
<uni-file-picker fileMediatype="image" :image-styles="imageStyles"/>
<uni-file-picker fileMediatype="all" :list-styles="listStyles"/>
</view>
```
```javascript
export default {
data() {
imageStyles:{
width:64,
height:64,
border:{
color:"#ff5a5f",
width:2,
style:'dashed',
radius:'2px'
}
},
listStyles:{
// 是否显示边框
border: true,
// 是否显示分隔线
dividline: true,
// 线条样式
borderStyle: {
width:1,
color:'blue',
radius:2
}
}
}
}
```
### 使用插槽
使用默认插槽可以自定义选择文件按钮样式
```html
<uni-file-picker
v-model="value" file-mediatype="all">
<button>选择文件</button>
</uni-file-picker>
```
## API
### FilePicker Props
|属性名|类型|默认值|可选值|说明|
|:-:| :-:| :-:|:-:|:-:|
|v-model/value|Array\Object|-|-| 组件数据，通常用来回显 ,类型由`return-type`属性决定 ，**格式见下文** |
|disabled|Boolean|false|-| 组件禁用|
|readonly|Boolean|false|-| 组件只读，不可选择，不显示进度，不显示删除按钮|
|return-type|String| array | array/object| 限制 `value` 格式，当为 `object` 时 ，组件只能单选，且会覆盖|
|disable-preview| Boolean| false | -| 禁用图片预览，仅 `mode:grid`生效 |
|del-icon|Boolean| true | -| 是否显示删除按钮 |
|auto-upload| Boolean| true | -| 是否自动上传，值为`true`则只触发@select,可自行上传|
|limit| Number\String| 9 | -| 最大选择个数 ，h5 会自动忽略多选的部分|
| title| String | -| -| 组件标题，右侧显示上传计数|
|mode| String | list | list/grid| 选择文件后的文件列表样式|
|file-mediatype| String | image | image/video/all| 选择文件类型,all 只支持 H5 和微信小程序平台|
|file-extname| Array\String| -| -| 选择文件后缀，字符串的情况下需要用逗号分隔（推荐使用字符串），根据 `file-mediatype` 属性而不同|
|list-styles|Object| -| -| `mode:list` 时的样式|
|image-styles|Object| -| -| `mode:grid` 时的样式 |
### value 格式
三个属性必填，否则影响组件显示
```json
[
{
"name":"file.txt",
"extname":"txt",
"url":"https://xxxx",
// ...
}
]
```
### list-styles 格式
```json
{
"borderStyle":{
"color":"#eee", // 边框颜色
"width":"1px", // 边框宽度
"style":"solid", // 边框样式
"radius":"5px" // 边框圆角，不支持百分比
},
"border":false, // 是否显示边框
"dividline":true // 是否显示分隔线
}
```
### image-styles 格式
```json
{
"height": 60, // 边框高度
"width": 60, // 边框宽度
"border":{ // 如果为 Boolean 值，可以控制边框显示与否
"color":"#eee", // 边框颜色
"width":"1px", // 边框宽度
"style":"solid", // 边框样式
"radius":"50%" // 边框圆角，支持百分比
}
}
```
### FilePicker Events
|事件称名|说明|返回值|
|:-:|:-:| :-: |
|@select| 选择文件后触发| 见下文|
|@progress|文件上传时触发| 见下文|
|@success|上传成功触发| 见下文|
|@fail|上传失败触发| 见下文|
|@delete|文件从列表移除时触发| 见下文|
#### Callback Params
`**注意**：如果绑定的是腾讯云的服务空间 ，tempFilePaths 将返回 fileID`
```json
{
"progress" : Number, // 上传进度 ，仅 @progress 事件包含此字段
"index" : Number, // 上传文件索引 ，仅 @progress 事件包含此字段
"tempFile" : file, // 当前文件对象 ，包含文件流，文件大小，文件名称等，仅 @progress 事件包含此字段
"tempFiles" : files, // 文件列表,包含文件流，文件大小，文件名称等
"tempFilePaths" : filePaths, // 文件地址列表，@sucess 事件为上传后的线上文件地址
}
```
### FilePicker Methods
通过 `$ref` 调用
| 方法称名| 说明|参数|
| :-:| :-:|:-:|
| upload()| 手动上传 ，如`autoUpload`为`false` ，必须调用此方法| - |
| clearFiles(index:Number) | 清除选择结果| 传如 Number　为删除指定下标的文件 ，不传为删除所有|
### FilePicker Slots
插槽可定义上传按钮显示样式
|插槽名|说明 |
| :-:| :-: |
|default|默认插槽|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/file-picker/file-picker](https://hellouniapp.dcloud.net.cn/pages/extUI/file-picker/file-picker)
\ No newline at end of file
docs/component/uniui/uni-forms.md 0 → 100644
浏览文件 @ 252862c0
此差异已折叠。
docs/component/uniui/uni-goods-nav.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-goods-nav**
> 代码块： `uGoodsNav`
商品加入购物车，立即购买
### 基本用法
```html
<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
```
```javascript
export default {
data () {
return {
options: [{
icon: 'headphones',
text: '客服'
}, {
icon: 'shop',
text: '店铺',
info: 2,
infoBackgroundColor:'#007aff',
infoColor:"red"
}, {
icon: 'cart',
text: '购物车',
info: 2
}],
buttonGroup: [{
text: '加入购物车',
backgroundColor: '#ff0000',
color: '#fff'
},
{
text: '立即购买',
backgroundColor: '#ffa200',
color: '#fff'
}
]
}
},
methods: {
onClick (e) {
uni.showToast({
title: `点击${e.content.text}`,
icon: 'none'
})
},
buttonClick (e) {
console.log(e)
this.options[2].info++
}
}
}
```
## API
### GoodsNav Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|options |Array |- |组件参数 |
|buttonGroup|Array |- |组件按钮组参数 |
|fill |Boolean|false |按钮是否平铺 |
**options 参数说明：**
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|text |String |- |显示文字 |
|icon |String | |图标，[参考](https://ext.dcloud.net.cn/plugin?id=28) |
|info |Number |0 |右上角数字角标 |
|infoBackgroundColor|String |#ff0000|角标背景色 |
|infoColor |String |#fff |角标前景色 |
**buttonGroup 参数说明：**
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|text |String |- |按钮文字 |
|backgroundColor |String |- |按钮背景色 |
|color |String |- |字体颜色 |
### GoodsNav Events
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|@click |左侧点击事件 |e = {index,content}|
|@buttonClick |右侧按钮组点击事件 |e = {index,content}|
### 插件预览地址
[https://uniapp.dcloud.io/h5/pages/extUI/goods-nav/goods-nav](https://uniapp.dcloud.io/h5/pages/extUI/goods-nav/goods-nav)
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/goods-nav/goods-nav](https://hellouniapp.dcloud.net.cn/pages/extUI/goods-nav/goods-nav)
\ No newline at end of file
docs/component/uniui/uni-grid.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-grid**
> 代码块： `uGrid`
宫格组件。
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 删除组件自带圆点角标效果，完全交给用户实现，示例有简单角标效果实现
> - Grid 组件仅在自定义组件模式下支持
> - column 属性最大值最好不要超过 5 个，如果超过，需要注意内容显示
> - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： `详情 --> 项目配置 --> 启用 component2 编译`
> - 为了避免高度显示错误组件内必须要有内容
### 基本用法
在 ``template`` 中使用组件
```html
<!-- 一般用法 -->
<uni-grid :column="3">
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
</uni-grid>
<!-- 不带边框并矩形显示 -->
<uni-grid :column="3" :showBorder="false" :square="false">
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
</uni-grid>
```
## API
### Grid Props
**uni-grid 属性说明：**
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|column |Number |3 |每列显示个数 |
|borderColor|String |#d0dee5|边框颜色 |
|showBorder |Boolean|true |是否显示边框 |
|square |Boolean|true |是否方形显示 |
|highlight |Boolean|true |点击背景是否高亮 |
### Grid Events
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|@change|点击 grid 触发 |e={detail:{index:0}}，index 为当前点击 gird 下标|
### GridItem Props
|属性名|类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|index|Number |- |子组件的唯一标识 ，点击gird会返回当前的标识|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid](https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid)
\ No newline at end of file
docs/component/uniui/uni-group.md 0 → 100644
浏览文件 @ 252862c0
分组组件可用于将组件分组，添加间隔，以产生明显的区块，组件名：``uni-group``，代码块： uGroup。
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
>
### 基本用法
在 ``template`` 中使用组件
```html
<uni-group title="分组1" top="20">
<view>分组1 的内容</view>
<view>分组1 的内容</view>
</uni-group>
<uni-group title="分组2">
<view>分组2 的内容</view>
<view>分组2 的内容</view>
</uni-group>
```
## API
### Group Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|title|String|-|主标题|
|top|Number|-|分组间隔|
|mode|String|''|模式 ，card 为卡片模式|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/group/group](https://hellouniapp.dcloud.net.cn/pages/extUI/group/group)
\ No newline at end of file
docs/component/uniui/uni-icons.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-icons**
> 代码块： `uIcons`
用于展示 icons 图标 。
### 基本用法
在 ``template`` 中使用组件
```html
<uni-icons type="contact" size="30"></uni-icons>
```
## API
### Icons Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|size |Number |24 |图标大小 |
|type |String |- |图标图案，参考示例 |
|color |String |- |图标颜色 |
|customPrefix |String |- |自定义图标|
### Icons Events
|事件名 |说明 |返回值|
|:-: |:-: |:-: |
|@click|点击 Icon 触发事件|- |
## 自定义图标
> nvue 页面暂时不支持自定义图标，如需在 nvue 中使用 ，请自行引入字体文件
`uni-icons` 已经收录了日常开发中常用的图标 ，但是因为体积问题 ，不可能一直无限添加新图标 ，所以`uni-icons` 也提供了扩展的方法。
使用 `custom-prefix` 和 `type` 属性自定义图标
```html
<uni-icons custom-prefix="custom-icon" type="icon-youxi" size="30"></uni-icons>
```
### 获取图标
**以下所有说明都是基于[阿里图标库](https://www.iconfont.cn/)进行扩展，其他图标库同理，明白原理即可方便扩展**
1. 访问 [阿里图标库](https://www.iconfont.cn/)，搜索图标并加入购物车：
![搜索图标](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/8610a5f2-2562-4ca6-9806-679a500a1d0a.png)
2. 点击页面右上角购物车图标 ，点击`添加至项目`，如没有项目，需要点击下图第二步的图标添加一个项目目录，如已经有项目则可以略过第二步，选择项目后点击确定：
![添加至项目](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/2f639b71-a2d3-43a1-bd6b-766134dea8e3.png)
3. 确定后进入项目，点击项目设置 ，对图标库进行一些设置：
![编辑项目](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/996ffe2e-4fdd-42d2-bf04-c44c0c978874.png)
4. 项目名称和项目描述根据自己需求填写， `fontClass` 是图标的前缀 ，需要传入组件`type`属性，`fontFamily` 是图标集名称，需要传入组件`custom-prefix` 属性，字体格式可以只勾选 `ttf`:
![设置项目](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/6992d375-0ec2-4cfb-82eb-6e724a111fd7.png)
5. 点击保存后 ，可以下载图库库到本地：
![下载图标库](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/acaf25c2-8806-4fa8-b502-d9ac4b8138a6.png)
6. 下载解压后，需要用到的文件暂时有两个 `iconfont.css`、`iconfont.ttf`:
![解压](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/8d1b81af-c1f2-494d-b139-2ac6d3ea4ff5.png)
7. 将 `iconfont.ttf`、`iconfont.css` 放到项目根目录 `static` 下。
8. 打开 `iconfont.css` ,修改 `@font-face` 如下,注意 src 字体文件的引用路径是否正确：
```css
@font-face {
font-family: "iconfont";
src : url('./iconfont.ttf) format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
}
.icon-search:before {
content: "\e65c";
}
```
通过上述操作 ，现在就获得一个可以自定义的图标库，
### 在 vue 页面使用自定义图标
在项目根目录的 `App.vue` 中，引入上述的 `iconfont.css`，注意自己存放的路径，且通过 `@import` 引入的外部样式，需要写在 `style` 标签有效内容中的最前面
```html
<!-- App.vue -->
<style>
@import "@/static/iconfont.css";
</style>
```
使用 `custom-prefix` 和 `type` 属性自定义图标
```html
<uni-icons custom-prefix="iconfont" type="icon-search" size="30"></uni-icons>
```
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons)
\ No newline at end of file
docs/component/uniui/uni-indexed-list.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-indexed-list**
> 代码块： `uIndexedList`
用于展示索引列表。
### 基本用法
在 ``template`` 中使用组件
```html
<uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list>
```
## API
### IndexedList Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|options |Object |- |索引列表需要的数据对象 |
|showSelect |Boolean|- | 展示模式，true 为展示默认，false 为选择模式，默认为 false |
**options 数据格式说明**
```json
[{
"letter": "A",
"data": [
"阿克苏机场",
"阿拉山口机场",
"阿勒泰机场",
"阿里昆莎机场",
"安庆天柱山机场",
"澳门国际机场"
]
}, {
"letter": "B",
"data": [
"保山机场",
"包头机场",
"北海福成机场",
"北京南苑机场",
"北京首都国际机场"
]
}]
```
### IndexedList Events
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|click |点击列表事件 ，返回当前选择项的事件对象 |- |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/indexed-list/indexed-list](https://hellouniapp.dcloud.net.cn/pages/extUI/indexed-list/indexed-list)
\ No newline at end of file
docs/component/uniui/uni-link.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-link**
> 代码块： `uLink`
uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。
### 基本用法
在 ``template`` 中使用组件
```html
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link>
```
## API
### Link Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|href |String |- |链接地址 |
|text |String |- |显示文字 |
|download |String |- |H5平台下载文件名 |
|showUnderLine|Boolean|true |是否显示下划线 |
|copyTips |String |已自动复制网址，请在手机浏览器里粘贴该网址 |在小程序端复制链接时的提示语 |
|color |String |#999999 |链接文字颜色 |
|fontSize |String |14 |链接文字大小，单位px |
### Link Slots
|名称|说明|
|:-:|:-:|
|default|自定义内容，回覆盖原有的内容显示（仅 vue 支持）|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/link/link](https://hellouniapp.dcloud.net.cn/pages/extUI/link/link)
\ No newline at end of file
docs/component/uniui/uni-list.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-list**
> 代码块： `uList`、`uListItem`
> 关联组件：`uni-list-item`、`uni-badge`、`uni-icons`、`uni-list-chat`、`uni-list-ad`
List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。
在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。
uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。
uni-list-item有很多风格，uni-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容。
内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。
涉及很多大图或丰富内容的列表，比如类今日头条的新闻列表、类淘宝的电商列表，需要通过扩展插槽实现。
下文均有样例给出。
uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29)
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - 组件内部依赖 `'uni-icons'` 、`uni-badge` 组件
> - `uni-list` 和 `uni-list-item` 需要配套使用，暂不支持单独使用 `uni-list-item`
> - 只有开启点击反馈后，会有点击选中效果
> - 使用插槽时，可以完全自定义内容
> - note 、rightText 属性暂时没做限制，不支持文字溢出隐藏，使用时应该控制长度显示或通过默认插槽自行扩展
> - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译
> - 如果需要修改 `switch`、`badge` 样式，请使用插槽自定义
> - 在 `HBuilderX` 低版本中，可能会出现组件显示 `undefined` 的问题，请升级最新的 `HBuilderX` 或者 `cli`
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
### 基本用法
- 设置 `title` 属性，可以显示列表标题
- 设置 `disabled` 属性，可以禁用当前项
```html
<uni-list>
<uni-list-item title="列表文字" ></uni-list-item>
<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
</uni-list>
```
### 多行内容显示
- 设置 `note` 属性 ，可以在第二行显示描述文本信息
```html
<uni-list>
<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
</uni-list>
```
### 右侧显示角标、switch
- 设置 `show-badge` 属性 ，可以显示角标内容
- 设置 `show-switch` 属性，可以显示 switch 开关
```html
<uni-list>
<uni-list-item title="列表右侧显示角标" :show-badge="true" badge-text="12" ></uni-list-item>
<uni-list-item title="列表右侧显示 switch" :show-switch="true" @switchChange="switchChange" ></uni-list-item>
</uni-list>
```
### 左侧显示略缩图、图标
- 设置 `thumb` 属性 ，可以在列表左侧显示略缩图
- 设置 `show-extra-icon` 属性，并指定 `extra-icon` 可以在左侧显示图标
```html
<uni-list>
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size="lg" rightText="右侧文字"></uni-list-item>
<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
</uni-list>
```
### 开启点击反馈和右侧箭头
- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
- 设置 `link` 属性，会自动开启点击反馈，并给列表右侧添加一个箭头
- 设置 `to` 属性，可以跳转页面，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`
```html
<uni-list>
<uni-list-item title="开启点击反馈" clickable @click="onClick" ></uni-list-item>
<uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
</uni-list>
```
## API
### List Props
属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
border |Boolean |true | 是否显示边框
### ListItem Props
属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
title |String |- | 标题
note |String |- | 描述
ellipsis |Number |0 | title 是否溢出隐藏，可选值，0:默认; 1:显示一行; 2:显示两行;【nvue 暂不支持】
thumb |String |- | 左侧缩略图，若thumb有值，则不会显示扩展图标
thumbSize |String |medium | 略缩图尺寸，可选值，lg:大图; medium:一般; sm:小图;
showBadge |Boolean |false | 是否显示数字角标
badgeText |String |- | 数字角标内容
badgeType |String |- | 数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
rightText |String |- | 右侧文字内容
disabled |Boolean |false | 是否禁用
showArrow |Boolean |true | 是否显示箭头图标
link |String |navigateTo | 新页面跳转方式，可选值见下表
to |String |- | 新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功
clickable |Boolean |false | 是否开启点击反馈
showSwitch |Boolean |false | 是否显示Switch
switchChecked |Boolean |false | Switch是否被选中
showExtraIcon |Boolean |false | 左侧是否显示扩展图标
extraIcon |Object |- | 扩展图标参数，格式为 ``{color: '#4cd964',size: '22',type: 'spinner'}``，参考 [uni-icons](https://ext.dcloud.net.cn/plugin?id=28)
direction | String |row | 排版方向，可选值，row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制
#### Link Options
属性名 | 说明
:-: | :-:
navigateTo | 同 uni.navigateTo()
redirectTo | 同 uni.reLaunch()
reLaunch | 同 uni.reLaunch()
switchTab | 同 uni.switchTab()
### ListItem Events
事件称名 |说明 |返回参数
:-: |:-: |:-:
click |点击 uniListItem 触发事件，需开启点击反馈 |-
switchChange |点击切换 Switch 时触发，需显示 switch |e={value:checked}
### ListItem Slots
名称 | 说明
:-: | :-:
header | 左/上内容插槽，可完全自定义默认显示
body | 中间内容插槽，可完全自定义中间内容
footer | 右/下内容插槽，可完全自定义右侧内容
> **通过插槽扩展**
> 需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现
> 如果 `uni-list-item` 组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。
> uni-list-item提供了3个可扩展的插槽：`header`、`body`、`footer`
> - 当 `direction` 属性为 `row` 时表示水平排列，此时 `header` 表示列表的左边部分，`body` 表示列表的中间部分，`footer` 表示列表的右边部分
> - 当 `direction` 属性为 `column` 时表示垂直排列，此时 `header` 表示列表的上边部分，`body` 表示列表的中间部分，`footer` 表示列表的下边部分
> 开发者可以只用1个插槽，也可以3个一起使用。在插槽中可自主编写view标签，实现自己所需的效果。
**示例**
```html
<uni-list>
<uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
<template slot="header">
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</template>
</uni-list-item>
<uni-list-item>
<!-- 自定义 header -->
<view slot="header" class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view>
<!-- 自定义 body -->
<text slot="body" class="slot-box slot-text">自定义插槽</text>
<!-- 自定义 footer-->
<template slot="footer">
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</template>
</uni-list-item>
</uni-list>
```
## 基于uni-list扩展的页面模板
通过扩展插槽，可实现多种常见样式的列表
**新闻列表类**
1. 云端一体混合布局：[https://ext.dcloud.net.cn/plugin?id=2546](https://ext.dcloud.net.cn/plugin?id=2546)
2. 云端一体垂直布局，大图模式：[https://ext.dcloud.net.cn/plugin?id=2583](https://ext.dcloud.net.cn/plugin?id=2583)
3. 云端一体垂直布局，多行图文混排：[https://ext.dcloud.net.cn/plugin?id=2584](https://ext.dcloud.net.cn/plugin?id=2584)
4. 云端一体垂直布局，多图模式：[https://ext.dcloud.net.cn/plugin?id=2585](https://ext.dcloud.net.cn/plugin?id=2585)
5. 云端一体水平布局，左图右文：[https://ext.dcloud.net.cn/plugin?id=2586](https://ext.dcloud.net.cn/plugin?id=2586)
6. 云端一体水平布局，左文右图：[https://ext.dcloud.net.cn/plugin?id=2587](https://ext.dcloud.net.cn/plugin?id=2587)
7. 云端一体垂直布局，无图模式，主标题+副标题：[https://ext.dcloud.net.cn/plugin?id=2588](https://ext.dcloud.net.cn/plugin?id=2588)
**商品列表类**
1. 云端一体列表/宫格视图互切：[https://ext.dcloud.net.cn/plugin?id=2651](https://ext.dcloud.net.cn/plugin?id=2651)
2. 云端一体列表（宫格模式）：[https://ext.dcloud.net.cn/plugin?id=2671](https://ext.dcloud.net.cn/plugin?id=2671)
3. 云端一体列表（列表模式）：[https://ext.dcloud.net.cn/plugin?id=2672](https://ext.dcloud.net.cn/plugin?id=2672)
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/list/list](https://hellouniapp.dcloud.net.cn/pages/extUI/list/list)
\ No newline at end of file
docs/component/uniui/uni-load-more.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-load-more**
> 代码块： `uLoadMore`
用于列表中，做滚动加载使用，展示 loading 的各种状态。
### 基本用法
在 ``template`` 中使用组件
```html
<uni-load-more :status="more"></uni-load-more>
```
## API
### LoadMore Props
|属性名|类型| 可选值|默认值 |说明|
|:-:|:-:|:-:|:-:|:-:|
|iconSize|Number|-|24|指定图标大小|
|status|String |more/loading/noMore|more|loading 的状态|
|showIcon|Boolean|-|true|是否显示 loading 图标|
|iconType|String|snow/circle/auto|auto|指定图标样式|
|color|String|-|#777777 |图标和文字颜色|
|contentText|Object|-|{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}|各状态文字说明 |
#### Status Options
|参数名称|说明|
|:-:|:-:|
|more|loading前|
|loading|loading前中 |
|more|没有更多数据 |
#### IconType Options
|参数名称|说明|
|:-:|:-:|
|snow|ios雪花加载样式|
|circle |安卓环形加载样式|
|auto|根据平台自动选择加载样式 |
> **说明**
> `iconType`为`snow`时，在`APP-NVUE`平台不可设置大小，在非`APP-NVUE`平台不可设置颜色
### LoadMore Events
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|clickLoadMore |点击加载更多时触发 |e.detail={status:'loading'}|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/load-more/load-more](https://hellouniapp.dcloud.net.cn/pages/extUI/load-more/load-more)
\ No newline at end of file
docs/component/uniui/uni-nav-bar.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-nav-bar**
> 代码块： `uNavBar`
导航栏组件，主要用于头部导航。
## 基本用法
在 ``template`` 中使用组件
```html
<uni-nav-bar left-icon="back" left-text="返回" right-text="菜单" title="导航栏组件"></uni-nav-bar>
```
### NavBar Props
|属性名|类型|默认值 |说明|
|:-:|:-:|:-:|:-:|
|title|String|-|标题文字|
|leftText|String|-|左侧按钮文本|
|rightText|String|-|右侧按钮文本|
|leftIcon|String|-|左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性） |
|rightIcon|String |-|右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性） |
|color|String|#000000|图标和文字颜色|
|backgroundColor|String |#FFFFFF|导航栏背景颜色|
|fixed|Boolean|false|是否固定顶部|
|statusBar|Boolean|false|是否包含状态栏|
|shadow|Boolean|false|导航栏下是否有阴影|
### NavBar Slots
开发者使用 NavBar 时，支持向 NavBar 里插入不同内容，以达到自定义的目的。
|slot名 |说明|
|:-:|:-:|
|left|向导航栏左侧插入 |
|right |向导航栏右侧插入 |
|default|向导航栏中间插入 |
```html
<uni-nav-bar>
<view>标题栏</view>
<view slot="left">left</view>
<view slot="right">right</view>
</uni-nav-bar>
```
### NavBar Events
|事件名|说明|返回值|
|:-:|:-:|:-:|
|@clickLeft |左侧按钮点击时触发|-|
|@clickRight|右侧按钮点击时触发|-|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/nav-bar/nav-bar](https://hellouniapp.dcloud.net.cn/pages/extUI/nav-bar/nav-bar)
\ No newline at end of file
docs/component/uniui/uni-notice-bar.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-notice-bar**
> 代码块： `uNoticeBar`
通告栏组件 。
### 基本用法
在 ``template`` 中使用组件
```html
<!-- 基本用法 -->
<uni-notice-bar single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
<uni-notice-bar text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
<!-- 文字滚动 -->
<uni-notice-bar scrollable="true" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
<!-- 显示图标 -->
<uni-notice-bar showIcon="true" text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
<!-- 显示关闭按钮 -->
<uni-notice-bar showClose="true" showIcon="true" text="这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
<!-- 查看更多 -->
<uni-notice-bar @getmore="getMore" :showGetMore="true" moreText="查看更多" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
```
> **注意**
> 如果需要异步获取内容后展示需要使用`v-if`进行控制，`<uni-notice-bar v-if="text" :text="text"></uni-notice-bar>`
## NoticeBar API
### NoticeBar Props
|属性名|类型 |默认值|说明|
|:-:|:-:|:-:|:-:|
|speed|Number|100|文字滚动的速度，默认100px/秒|
|text|String|-|显示文字|
|background-color|String|#fffbe8|背景颜色|
|color|String|#de8c17|文字颜色|
|moreColor|String|#999999|查看更多文字的颜色|
|moreText|String|-|设置“查看更多”的文本|
|single|Boolean|false|是否单行|
|scrollable|Boolean|false|是否滚动，为true时，NoticeBar为单行|
|showIcon|Boolean|false |是否显示左侧喇叭图标|
|showClose|Boolean|false|是否显示左侧关闭按钮|
|showGetMore|Boolean|false|是否显示右侧查看更多图标，为true时，NoticeBar为单行|
### NoticeBar Events
|事件名称|说明|返回值 |
|:-:|:-:|:-:|
|@click|点击 NoticeBar 触发事件 |-|
|@close|关闭 NoticeBar 触发事件 |-|
|@getmore|点击”查看更多“时触发事件 |-|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/notice-bar/notice-bar](https://hellouniapp.dcloud.net.cn/pages/extUI/notice-bar/notice-bar)
\ No newline at end of file
docs/component/uniui/uni-number-box.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-number-box**
> 代码块： `uNumberBox`
带加减按钮的数字输入框。
### 基本用法
在 ``template`` 中使用组件
```html
<uni-number-box></uni-number-box>
<uni-number-box v-model="vModelValue" ></uni-number-box>
<uni-number-box :min="0" :max="9"></uni-number-box>
<uni-number-box @change="bindChange"></uni-number-box>
```
## API
### NumberBox Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|value/v-model|Number|0|输入框当前值|
|min|Number |0|最小值|
|max|Number |100|最大值|
|step|Number|1|每次点击改变的间隔大小|
|disabled|Boolean|false |是否为禁用状态|
### NumberBox Events
|事件名称|说明|返回值 |
|:-:|:-:|:-:|
|change|输入框值改变时触发的事件，参数为输入框当前的 value |-|
|focus|输入框聚焦时触发的事件，参数为 event 对象|-|
|blur|输入框失焦时触发的事件，参数为 event 对象|-|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/number-box/number-box](https://hellouniapp.dcloud.net.cn/pages/extUI/number-box/number-box)
\ No newline at end of file
docs/component/uniui/uni-pagination.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-pagination**
> 代码块： `uPagination`
分页器组件，用于展示页码、请求数据等。
### 基本用法
在 ``template`` 中使用组件
```html
<uni-pagination title="标题文字" total="20"></uni-pagination>
<uni-pagination title="标题文字" show-icon="true" total="50" current="2"></uni-pagination>
```
## API
### Pagination Props
|属性名|类型 |默认值 |说明|
|:-:|:-:|:-:|:-:|
|prevText|String|上一页|左侧按钮文字|
|nextText|String|下一页|右侧按钮文字|
|value/v-model|Number|1|当前页|
|current|Number |1|当前页, 优先级高于 value|
|total|Number|0|数据总量|
|pageSize|Number|10|每页数据量|
|showIcon|Boolean|false |是否以 icon 形式展示按钮 |
### Pagination Events
|事件称名|说明|返回值|
|:-:|:-:|:-:|
|@change|点击页码按钮时触发 |e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/pagination/pagination](https://hellouniapp.dcloud.net.cn/pages/extUI/pagination/pagination)
\ No newline at end of file
docs/component/uniui/uni-popup.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-popup**
> 代码块： `uPopup`
> 关联组件：`uni-popup-dialog`,`uni-popup-message`,`uni-popup-share`,`uni-transition`
弹出层组件，在应用中弹出一个消息提示窗口、提示框等
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - `uni-popup-message` 、 `uni-popup-dialog` 等扩展ui组件，需要和 `uni-popup` 配套使用，暂不支持单独使用
> - `nvue` 中使用 `uni-popup` 时，尽量将组件置于其他元素后面，避免出现层级问题
> - `uni-popup` 并不能完全阻止页面滚动，可在打开 `uni-popup` 的时候手动去做一些处理，禁止页面滚动
> - 如果想在页面渲染完毕后就打开 `uni-popup` ，请在 `onReady` 或 `mounted` 生命周期内调用，确保组件渲染完毕
> - 在微信小程序开发者工具中，启用真机调试，popup 会延时出现，是因为 setTimeout 在真机调试中的延时问题导致的，预览和发布小程序不会出现此问题
> - 使用 `npm` 方式引入组件，如果确认引用正确，但是提示未注册组件或显示不正常，请尝试重新编译项目
> - `uni-popup` 中尽量不要使用 `scroll-view` 嵌套过多的内容，可能会影响组件的性能，导致组件无法打开或者打开卡顿
> - `uni-popup` 不会覆盖原生 tabbar 和原生导航栏
> - 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
### 基本用法
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>
```
```javascript
export default {
methods:{
open(){
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
this.$refs.popup.open('top')
}
}
}
```
### 设置主窗口背景色
在大多数场景下，并不需要设置 `background-color` 属性，因为`uni-popup`的主窗口默认是透明的，在向里面插入内容的时候 ，样式完全交由用户定制，如果设置了背景色 ，例如 `uni-popup-dialog` 中的圆角就很难去实现，不设置背景色，更适合用户去自由发挥。
而也有特例，需要我们主动去设置背景色，例如 `type = 'bottom'` 的时候 ，在异型屏中遇到了底部安全区问题（如 iphone 11），因为 `uni-popup`的主要内容避开了安全区（设置`safe-area:true`），导致底部的颜色我们无法自定义，这时候使用 `background-color` 就可以解决这个问题。
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup>
```
### 禁用打开动画
在某些场景 ，可能不希望弹层有动画效果 ，只需要将 `animation` 属性设置为 `false` 即可以关闭动画。
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>
```
### 禁用点击遮罩关闭
默认情况下，点击遮罩会自动关闭`uni-popup`，如不想点击关闭，只需将`mask-click`设置为`false`，这时候要关闭`uni-popup`，只能手动调用 `close` 方法。
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" :mask-click="false">
<text>Popup</text>
<button @click="close">关闭</button>
</uni-popup>
```
```javascript
export default {
data() {
return {}
},
onReady() {},
methods: {
open() {
this.$refs.popup.open('top')
},
close() {
this.$refs.popup.close()
}
}
}
```
## API
### Popup Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|animation|Boolean|true|是否开启动画|
|type|String|'center'|弹出方式|
|mask-click|Boolean|true|蒙版点击是否关闭弹窗|
|background-color|String|'none'|主窗口背景色|
|safe-area|Boolean|true|是否适配底部安全区|
#### Type Options
|属性名|说明|
|:-:| :-:|
|top|顶部弹出 |
|center|居中弹出|
|bottom|底部弹出|
|left|左侧弹出|
|right|右侧弹出|
|message|预置样式 ：消息提示|
|dialog|预置样式 ：对话框|
|share|预置样式 ：底部弹出分享示例 |
### Popup Methods
|方法称名 |说明|参数|
|:-:|:-:|:-:|
|open|打开弹出层|open(String:type) ，如果参数可代替 type 属性|
|close|关闭弹出层 |-|
### Popup Events
|事件称名|说明|返回值|
|:-:|:-:|:-:|
|change|组件状态发生变化触发|e={show: true｜false,type:当前模式}|
|maskClick|点击遮罩层触发|-|
## 扩展组件说明
`uni-popup` 其实并没有任何样式，只提供基础的动画效果，给用户一个弹出层解决方案，仅仅是这样并不能满足开发需求，所以我们提供了三种基础扩展样式
### uni-popup-message 提示信息
将 `uni-popup` 的`type`属性改为 `message`，并引入对应组件即可使用消息提示 ，*该组件不支持单独使用*
**示例**
```html
<uni-popup ref="popup" type="message">
<uni-popup-message type="success" message="成功消息" :duration="2000"></uni-popup-message>
</uni-popup>
```
### PopupMessage Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|type|String|success|消息提示主题|
|message|String|-|消息提示文字|
|duration|Number|3000|消息显示时间，超过显示时间组件自动关闭，设置为0 将不会关闭，需手动调用 close 方法关闭|
#### Type Options
|属性名|说明|
|:-:| :-:|
|success|成功|
|warn|警告|
|error|失败|
|info|消息|
### PopupMessage Slots
|名称|说明|
|:-:|:-:|
|default|消息内容，会覆盖 message 属性|
### uni-popup-dialog 对话框
将 `uni-popup` 的`type`属性改为 `dialog`，并引入对应组件即可使用对话框 ，*该组件不支持单独使用*
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
</uni-popup>
```
```javascript
export default {
methods: {
open() {
this.$refs.popup.open()
},
/**
* 点击取消按钮触发
* @param {Object} done
*/
close() {
// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
// ...
this.$refs.popup.close()
},
/**
* 点击确认按钮触发
* @param {Object} done
* @param {Object} value
*/
confirm(value) {
// 输入框的值
console.log(value)
// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
// ...
this.$refs.popup.close()
}
}
}
```
### PopupDialog Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|type|String|success|对话框标题主题，可选值： success/warn/info/error|
|mode|String|base| 对话框模式，可选值：base（提示对话框）/input（可输入对话框）|
|title|String|-|对话框标题|
|content|String|-|对话框内容，base模式下生效|
|value| String\Number|-|输入框默认值，input模式下生效|
|placeholder|String|-|输入框提示文字，input模式下生效|
|before-close|Boolean|false | 是否拦截按钮事件，如为true，则不会关闭对话框，关闭需要手动执行 uni-popup 的 close 方法|
#### PopupDialog Events
|事件称名 |说明|返回值|
|:-:|:-:|:-:|
|close|点击dialog取消按钮触发|-|
|confirm|点击dialog确定按钮触发|e={value:input模式下输入框的值}|
### PopupDialog Slots
|名称|说明|
|:-:|:-:|
|default|自定义内容，回覆盖原有的内容显示|
### uni-popup-share 分享示例
分享示例，不作为最终可使用的组件，只做为样式组件，供用户自行修改，`后续的开发计划是实现实际的分享逻辑，参数可配置`。
将 `uni-popup` 的 `type` 属性改为 `share`，并引入对应组件即可使用 ，*该组件不支持单独使用*
**示例**
```html
<uni-popup ref="popup" type="share">
<uni-popup-share title="分享到" @select="select"></uni-popup-share>
</uni-popup>
```
### PopupShare Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:| :-: |
|title|String|-|分享弹窗标题|
|before-close|Boolean|false | 是否拦截按钮事件，如为true，则不会关闭对话框，关闭需要手动执行 uni-popup 的 close 方法|
### PopupShare Events
|事件称名|说明|返回值|
|:-:|:-:|:-:|
|select|选择触发|e = {item,index}：所选参数|
**Tips**
- share 分享组件，只是作为一个扩展示例，如果需要修改数据源，请到组件内修改
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup](https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup)
\ No newline at end of file
docs/component/uniui/uni-rate.md 0 → 100644
浏览文件 @ 252862c0
此差异已折叠。
docs/component/uniui/uni-row.md 0 → 100644
浏览文件 @ 252862c0
此差异已折叠。
docs/component/uniui/uni-sass.md 0 → 100644
浏览文件 @ 252862c0
此差异已折叠。
docs/component/uniui/uni-search-bar.md 0 → 100644
浏览文件 @ 252862c0
此差异已折叠。
docs/component/uniui/uni-segmented-control.md 0 → 100644
浏览文件 @ 252862c0
> **组件名：uni-segmented-control**
> 代码块： `uSegmentedControl`
用作不同视图的显示
### 基本用法
在 ``template`` 中的使用
```html
<template>
<view>
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control>
<view class="content">
<view v-show="current === 0">
选项卡1的内容
</view>
<view v-show="current === 1">
选项卡2的内容
</view>
<view v-show="current === 2">
选项卡3的内容
</view>
</view>
</view>
</template>
```
## API
### SegmentedControl Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|current|Number|0|当前选中的tab索引值，从0计数|
|styleType|String|button|分段器样式类型，可选值：button（按钮类型），text（文字类型） |
|activeColor|String|#007aff|选中的标签背景色与边框颜色|
|values|Array|-|选项数组|
### SegmentedControl Events
|事件名|说明|返回值|
|:-:|:-:|:-:|
|@clickItem |组件触发点击事件时触发|e={currentIndex} |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/segmented-control/segmented-control](https://hellouniapp.dcloud.net.cn/pages/extUI/segmented-control/segmented-control)
\ No newline at end of file
docs/component/uniui/uni-steps.md 0 → 100644
浏览文件 @ 252862c0
此差异已折叠。
docs/component/uniui/uni-swipe-action.md 0 → 100644
浏览文件 @ 252862c0
此差异已折叠。
docs/component/uniui/uni-swiper-dot.md 0 → 100644
浏览文件 @ 252862c0
此差异已折叠。
docs/component/uniui/uni-table.md 0 → 100644
浏览文件 @ 252862c0
此差异已折叠。
docs/component/uniui/uni-tag.md 0 → 100644
浏览文件 @ 252862c0
此差异已折叠。
docs/component/uniui/uni-title.md 0 → 100644
浏览文件 @ 252862c0
此差异已折叠。
docs/component/uniui/uni-transition.md 0 → 100644
浏览文件 @ 252862c0
此差异已折叠。
docs/component/uniui/uni-ui.md 0 → 100644
浏览文件 @ 252862c0
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或