mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -0,0 +1,174 @@
|
||||
# UniApp 组件参考文档
|
||||
|
||||
本文档提供 uni-app 组件的详细说明和快速导航。每个组件都有独立的文档文件，包含组件概述、属性、事件、平台兼容性、使用示例和官方文档链接。
|
||||
|
||||
**注意**：
|
||||
- 组件文档已按类型分类：**内置组件**位于 `built-in/` 目录，**扩展组件（uni-ui）**位于 `uni-ui/` 目录
|
||||
- 每个组件都有独立的文档文件（`.md`），格式参考 `block.md`
|
||||
- **详细文档和示例**：每个组件文档都包含官方文档链接
|
||||
- **uni-ui 组件示例代码**：见 `examples/uni-ui/` 目录（每个组件都有独立的 .vue 示例文件）
|
||||
|
||||
## 组件分类索引
|
||||
|
||||
### 1. 内置组件（Built-in Components）
|
||||
|
||||
uni-app 提供的基础组件，无需安装即可使用。文档位于 `built-in/` 目录。
|
||||
|
||||
#### 视图容器
|
||||
|
||||
- [view](./built-in/view.md) - 视图容器，类似于 HTML 中的 div
|
||||
- [scroll-view](./built-in/scroll-view.md) - 可滚动视图容器
|
||||
- [swiper](./built-in/swiper.md) - 滑块视图容器，用于轮播图
|
||||
- [match-media](./built-in/match-media.md) - 屏幕动态适配组件
|
||||
- [movable-area](./built-in/movable-area.md) - 可拖动区域
|
||||
- [movable-view](./built-in/movable-view.md) - 可移动的视图容器
|
||||
- [cover-view](./built-in/cover-view.md) - 可覆盖在原生组件上的文本组件
|
||||
- [cover-image](./built-in/cover-image.md) - 可覆盖在原生组件上的图片组件
|
||||
|
||||
#### 基础内容
|
||||
|
||||
- [icon](./built-in/icon.md) - 图标组件
|
||||
- [text](./built-in/text.md) - 文本组件，用于显示文本内容
|
||||
- [rich-text](./built-in/rich-text.md) - 富文本显示组件
|
||||
- [progress](./built-in/progress.md) - 进度条组件
|
||||
|
||||
#### 表单组件
|
||||
|
||||
- [button](./built-in/button.md) - 按钮组件
|
||||
- [checkbox](./built-in/checkbox.md) - 多项选择器
|
||||
- [editor](./built-in/editor.md) - 富文本输入框
|
||||
- [form](./built-in/form.md) - 表单组件
|
||||
- [input](./built-in/input.md) - 输入框组件
|
||||
- [label](./built-in/label.md) - 标签组件
|
||||
- [picker](./built-in/picker.md) - 弹出式列表选择器
|
||||
- [picker-view](./built-in/picker-view.md) - 窗体内嵌式列表选择器
|
||||
- [radio](./built-in/radio.md) - 单项选择器
|
||||
- [slider](./built-in/slider.md) - 滑动选择器
|
||||
- [switch](./built-in/switch.md) - 开关选择器
|
||||
- [textarea](./built-in/textarea.md) - 多行文本输入框
|
||||
|
||||
#### 导航组件
|
||||
|
||||
- [navigator](./built-in/navigator.md) - 页面链接，类似于 HTML 中的 a 标签
|
||||
|
||||
#### 媒体组件
|
||||
|
||||
- [audio](./built-in/audio.md) - 音频组件
|
||||
- [camera](./built-in/camera.md) - 相机组件
|
||||
- [image](./built-in/image.md) - 图片组件
|
||||
- [video](./built-in/video.md) - 视频组件
|
||||
- [live-player](./built-in/live-player.md) - 直播播放组件
|
||||
- [live-pusher](./built-in/live-pusher.md) - 实时音视频录制（直播推流）组件
|
||||
|
||||
#### 其他组件
|
||||
|
||||
- [map](./built-in/map.md) - 地图组件
|
||||
- [canvas](./built-in/canvas.md) - 画布组件
|
||||
- [web-view](./built-in/web-view.md) - web 浏览器组件
|
||||
- [ad](./built-in/ad.md) - 广告组件
|
||||
- [ad-draw](./built-in/ad-draw.md) - 沉浸视频流广告组件
|
||||
- [custom-tab-bar](./built-in/custom-tab-bar.md) - 底部 tabbar 自定义组件
|
||||
- [navigation-bar](./built-in/navigation-bar.md) - 页面顶部导航
|
||||
- [page-meta](./built-in/page-meta.md) - 页面属性配置节点
|
||||
- [unicloud-db](./built-in/unicloud-db.md) - uniCloud 数据库访问和操作组件
|
||||
|
||||
### 2. 扩展组件（uni-ui）
|
||||
|
||||
uni-ui 是 DCloud 官方提供的跨端 UI 库，包含 40+ 个常用组件，需要从插件市场安装。文档位于 `uni-ui/` 目录。
|
||||
|
||||
#### 基础组件
|
||||
|
||||
- [uni-badge](./uni-ui/uni-badge.md) - 数字角标组件
|
||||
- [uni-icons](./uni-ui/uni-icons.md) - 图标组件
|
||||
- [uni-tag](./uni-ui/uni-tag.md) - 标签组件
|
||||
- [uni-link](./uni-ui/uni-link.md) - 超链接组件
|
||||
- [uni-section](./uni-ui/uni-section.md) - 标题栏组件
|
||||
|
||||
#### 布局组件
|
||||
|
||||
- [uni-row](./uni-ui/uni-row.md) - 布局-行组件
|
||||
- [uni-grid](./uni-ui/uni-grid.md) - 宫格组件
|
||||
- [uni-group](./uni-ui/uni-group.md) - 分组组件
|
||||
- [uni-title](./uni-ui/uni-title.md) - 章节标题组件
|
||||
|
||||
#### 导航组件
|
||||
|
||||
- [uni-nav-bar](./uni-ui/uni-nav-bar.md) - 自定义导航栏组件
|
||||
- [uni-breadcrumb](./uni-ui/uni-breadcrumb.md) - 面包屑组件
|
||||
|
||||
#### 数据展示组件
|
||||
|
||||
- [uni-card](./uni-ui/uni-card.md) - 卡片组件
|
||||
- [uni-list](./uni-ui/uni-list.md) - 列表组件
|
||||
- [uni-indexed-list](./uni-ui/uni-indexed-list.md) - 索引列表组件
|
||||
- [uni-table](./uni-ui/uni-table.md) - 表格组件
|
||||
- [uni-load-more](./uni-ui/uni-load-more.md) - 加载更多组件
|
||||
- [uni-pagination](./uni-ui/uni-pagination.md) - 分页器组件
|
||||
|
||||
#### 数据录入组件
|
||||
|
||||
- [uni-easyinput](./uni-ui/uni-easyinput.md) - 增强输入框组件
|
||||
- [uni-number-box](./uni-ui/uni-number-box.md) - 数字输入框组件
|
||||
- [uni-forms](./uni-ui/uni-forms.md) - 表单组件
|
||||
- [uni-data-checkbox](./uni-ui/uni-data-checkbox.md) - 数据选择器组件
|
||||
- [uni-data-picker](./uni-ui/uni-data-picker.md) - 级联选择器组件
|
||||
- [uni-data-select](./uni-ui/uni-data-select.md) - 下拉框组件
|
||||
- [uni-combox](./uni-ui/uni-combox.md) - 组合框组件
|
||||
|
||||
#### 日期时间组件
|
||||
|
||||
- [uni-calendar](./uni-ui/uni-calendar.md) - 日历组件
|
||||
- [uni-datetime-picker](./uni-ui/uni-datetime-picker.md) - 日期选择器组件
|
||||
- [uni-dateformat](./uni-ui/uni-dateformat.md) - 日期格式化组件
|
||||
|
||||
#### 反馈组件
|
||||
|
||||
- [uni-popup](./uni-ui/uni-popup.md) - 弹出层组件
|
||||
- [uni-drawer](./uni-ui/uni-drawer.md) - 抽屉组件
|
||||
- [uni-notice-bar](./uni-ui/uni-notice-bar.md) - 通告栏组件
|
||||
- [uni-tooltip](./uni-ui/uni-tooltip.md) - 文字提示组件
|
||||
|
||||
#### 操作反馈组件
|
||||
|
||||
- [uni-rate](./uni-ui/uni-rate.md) - 评分组件
|
||||
- [uni-fav](./uni-ui/uni-fav.md) - 收藏按钮组件
|
||||
- [uni-fab](./uni-ui/uni-fab.md) - 悬浮按钮组件
|
||||
- [uni-swipe-action](./uni-ui/uni-swipe-action.md) - 滑动操作组件
|
||||
|
||||
#### 其他组件
|
||||
|
||||
- [uni-collapse](./uni-ui/uni-collapse.md) - 折叠面板组件
|
||||
- [uni-countdown](./uni-ui/uni-countdown.md) - 倒计时组件
|
||||
- [uni-search-bar](./uni-ui/uni-search-bar.md) - 搜索栏组件
|
||||
- [uni-segmented-control](./uni-ui/uni-segmented-control.md) - 分段器组件
|
||||
- [uni-steps](./uni-ui/uni-steps.md) - 步骤条组件
|
||||
- [uni-swiper-dot](./uni-ui/uni-swiper-dot.md) - 轮播图指示点组件
|
||||
- [uni-transition](./uni-ui/uni-transition.md) - 过渡动画组件
|
||||
- [uni-file-picker](./uni-ui/uni-file-picker.md) - 文件选择上传组件
|
||||
- [uni-goods-nav](./uni-ui/uni-goods-nav.md) - 商品导航组件
|
||||
|
||||
## 文档结构说明
|
||||
|
||||
每个组件文档文件（`.md`）包含以下内容：
|
||||
|
||||
1. **概述**：组件简介和用途说明
|
||||
2. **属性**：组件的所有属性说明（含类型、默认值、说明）
|
||||
3. **事件**：组件支持的所有事件
|
||||
4. **插槽**：组件支持的插槽（如果有）
|
||||
5. **平台兼容性**：各平台支持情况
|
||||
6. **使用示例**：基础用法和更多示例
|
||||
7. **参考资源**：官方文档链接、插件市场链接（uni-ui）、本地示例链接（uni-ui）
|
||||
|
||||
## 使用说明
|
||||
|
||||
1. **查找组件**：根据组件分类查找对应的文档文件
|
||||
2. **查看详细文档**：点击组件名称链接查看完整的组件文档
|
||||
3. **查看示例**：uni-ui 组件有完整的示例代码在 `examples/uni-ui/` 目录
|
||||
4. **访问官方文档**：每个组件文档都包含官方文档链接，可获取最新信息
|
||||
|
||||
## 参考资源
|
||||
|
||||
- [uni-app 组件文档](https://uniapp.dcloud.net.cn/component/)
|
||||
- [uni-ui 组件库](https://ext.dcloud.net.cn/plugin?id=55)
|
||||
- [uni-ui 官方文档](https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html)
|
||||
- [插件市场](https://ext.dcloud.net.cn/)
|
||||
@@ -0,0 +1,32 @@
|
||||
# ad-draw
|
||||
|
||||
## Instructions
|
||||
|
||||
也称为Draw视频信息流广告
|
||||
|
||||
沉浸视频流广告为媒体提供了竖屏视频信息流广告样式，适合在全屏的竖屏视频中使用。支持app-nvue页面使用。
|
||||
|
||||
类抖音的竖版视频流，来电秀、直播间等全屏观看的视频。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<ad-draw />`（或 `<ad-draw></ad-draw>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
See official docs for full properties list: `https://uniapp.dcloud.net.cn/component/ad-draw.html`
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/ad-draw.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/ad-draw.html`
|
||||
|
||||
### Examples
|
||||
|
||||
Examples are available in the official docs: `https://uniapp.dcloud.net.cn/component/ad-draw.html`
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/ad-draw.html)
|
||||
@@ -0,0 +1,32 @@
|
||||
# ad
|
||||
|
||||
## Instructions
|
||||
|
||||
应用内展示的广告组件，可用于banner或信息流。
|
||||
|
||||
Banner或信息流广告展现场景非常灵活，常见的展现场景为：文章顶部，详情页面顶部，第一屏中部等。建议信息流广告不要放置在底部
|
||||
|
||||
平台差异说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<ad />`（或 `<ad></ad>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
See official docs for full properties list: `https://uniapp.dcloud.net.cn/component/ad.html`
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/ad.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/ad.html`
|
||||
|
||||
### Examples
|
||||
|
||||
Examples are available in the official docs: `https://uniapp.dcloud.net.cn/component/ad.html`
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/ad.html)
|
||||
@@ -0,0 +1,112 @@
|
||||
# audio
|
||||
|
||||
## Instructions
|
||||
|
||||
音频。
|
||||
|
||||
平台差异说明
|
||||
|
||||
注意： 微信小程序平台自基础库 1.6.0 版本开始，不再维护 audio 组件，推荐使用API方式而不是组件方式来播放音频。API见 uni.createInnerAudioContext 替代。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<audio />`（或 `<audio></audio>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| id | String | | audio 组件的唯一标识符 |
|
||||
| src | String | | 要播放音频的资源地址 |
|
||||
| loop | Boolean | false | 是否循环播放 |
|
||||
| controls | Boolean | false | 是否显示默认控件 |
|
||||
| poster | String | | 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效 |
|
||||
| name | String | 未知音频 | 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效 |
|
||||
| author | String | 未知作者 | 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @error | EventHandle | | 当发生错误时触发 error 事件，detail = {errMsg: MediaError.code} |
|
||||
| @play | EventHandle | | 当开始/继续播放时触发play事件 |
|
||||
| @pause | EventHandle | | 当暂停播放时触发 pause 事件 |
|
||||
| @timeupdate | EventHandle | | 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration} |
|
||||
| @ended | EventHandle | | 当播放到末尾时触发 ended 事件 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/audio.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-body">
|
||||
<view class="page-section page-section-gap" style="text-align: center;">
|
||||
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-body">
|
||||
<view class="page-section page-section-gap" style="text-align: center;">
|
||||
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: {
|
||||
poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
|
||||
name: '致爱丽丝',
|
||||
author: '暂无',
|
||||
src: 'https://web-ext-storage.dcloud.net.cn/doc/uniapp/ForElise.mp3',
|
||||
},
|
||||
audioAction: {
|
||||
method: 'pause'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: {
|
||||
poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
|
||||
name: '致爱丽丝',
|
||||
author: '暂无',
|
||||
src: 'https://web-ext-storage.dcloud.net.cn/doc/uniapp/ForElise.mp3',
|
||||
},
|
||||
audioAction: {
|
||||
method: 'pause'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/audio.html)
|
||||
@@ -0,0 +1,240 @@
|
||||
# button
|
||||
|
||||
## Instructions
|
||||
|
||||
按钮。
|
||||
|
||||
属性说明
|
||||
|
||||
button组件也支持style中通过css定义文字大小。 见下
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<button />`（或 `<button></button>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 生效时机 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| size | String | default | 按钮的大小 | | |
|
||||
| type | String | default | 按钮的样式类型 | | |
|
||||
| plain | Boolean | false | 按钮是否镂空，背景色透明 | | |
|
||||
| disabled | Boolean | false | 是否禁用 | | |
|
||||
| loading | Boolean | false | 名称前是否带 loading 图标 | | H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) |
|
||||
| form-type | String | | 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 | | |
|
||||
| open-type | String | | 开放能力 | | |
|
||||
| hover-class | String | button-hover | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 | | App-nvue 平台暂不支持 |
|
||||
| hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | | |
|
||||
| hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | | |
|
||||
| app-parameter | String | | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | | 微信小程序、QQ小程序 |
|
||||
| hover-stop-propagation | boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | | 微信小程序 |
|
||||
| lang | string | 'en' | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 | | 微信小程序 |
|
||||
| session-from | string | | 会话来源，open-type="contact"时有效 | | 微信小程序 |
|
||||
| send-message-title | string | 当前标题 | 会话内消息卡片标题，open-type="contact"时有效 | | 微信小程序 |
|
||||
| send-message-path | string | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | | 微信小程序 |
|
||||
| send-message-img | string | 截图 | 会话内消息卡片图片，open-type="contact"时有效 | | 微信小程序 |
|
||||
| show-message-card | boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | | 微信小程序 |
|
||||
| group-id | String | | 打开群资料卡时，传递的群号 | open-type="openGroupProfile" | QQ小程序 |
|
||||
| guild-id | String | | 打开频道页面时，传递的频道号 | open-type="openGuildProfile" | QQ小程序 |
|
||||
| public-id | String | | 打开公众号资料卡时，传递的号码 | open-type="openPublicProfile" | QQ小程序 |
|
||||
| data-im-id | String | | 客服的抖音号 | open-type="im" | 抖音小程序2.68.0版本+ |
|
||||
| data-im-type | String | | IM卡片类型 | open-type="im" | 抖音小程序2.80.0版本+ |
|
||||
| data-goods-id | String | | 商品的id，仅支持泛知识课程库和生活服务商品库中的商品 | open-type="im" | 抖音小程序2.80.0版本+ |
|
||||
| data-order-id | String | | 订单的id，仅支持交易2.0订单 | open-type="im" | 抖音小程序2.80.0版本+ |
|
||||
| data-biz-line | String | | 商品类型，“1”代表生活服务，“2”代表泛知识。 | open-type="im" | 抖音小程序2.80.0版本+ |
|
||||
| contact-type | String | | 客服类型，默认值 seller | | 小红书小程序 |
|
||||
| contact-id | String | | contact-type 对应的key。contact-type 为 seller 时非必传；goods 时第三方商品 id；order时第三方订单 id。open-type=contact时有效 | | 小红书小程序 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 生效时机 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| @getphonenumber | Handler | | 获取用户手机号回调 | open-type="getPhoneNumber" | 微信、支付宝、百度、抖音、快手、京东小程序、小红书小程序 |
|
||||
| @getuserinfo | Handler | | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo | open-type="getUserInfo" | 微信、QQ、百度、快手、京东小程序、小红书小程序 |
|
||||
| @error | Handler | | 当使用开放能力时，发生错误的回调 | open-type="launchApp" | 微信、QQ、快手、京东小程序 |
|
||||
| @opensetting | Handler | | 在打开授权设置页并关闭后回调 | open-type="openSetting" | 微信、QQ、百度、快手、京东小程序、小红书小程序 |
|
||||
| @launchapp | Handler | | 从小程序打开 App 成功的回调 | open-type="launchApp" | 微信、QQ、快手、京东小程序 |
|
||||
| @contact | Handler | | 客服消息回调 | open-type="contact" | 微信、QQ、百度、快手小程序 |
|
||||
| @chooseavatar | Handler | | 获取用户头像回调 | open-type="chooseAvatar" | 微信、支付宝小程序 |
|
||||
| @agreeprivacyauthorization | Handler | | 用户同意隐私协议事件回调，open-type="agreePrivacyAuthorization"时有效 | open-type="agreeprivacyauthorization" | 微信小程序2.32.3 |
|
||||
| @addgroupapp | Handler | | 添加群应用的回调 | open-type="addGroupApp" | QQ小程序 |
|
||||
| @chooseaddress | Handler | | 调起用户编辑并选择收货地址的回调 | open-type="chooseAddress" | 百度小程序 |
|
||||
| @chooseinvoicetitle | Handler | | 用户选择发票抬头的回调 | open-type="chooseInvoiceTitle" | 百度小程序 |
|
||||
| @subscribe | Handler | | 订阅消息授权回调 | open-type="subscribe" | 百度小程序 |
|
||||
| @login | Handler | | 登录回调 | open-type="login" | 百度小程序 |
|
||||
| @im | Handler | | 监听跳转IM的成功回调 | open-type="im" | 抖音小程序2.68.0版本+ |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
| 值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- |
|
||||
| feedback | 打开“意见反馈”页面，用户可提交反馈内容并上传日志 | App、微信小程序、QQ小程序 |
|
||||
| share | 触发用户转发 | 微信小程序、百度小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序、京东小程序、360小程序、小红书小程序 |
|
||||
| getUserInfo | 获取用户信息，可以从@getuserinfo回调中获取到用户信息 | 微信小程序、百度小程序、QQ小程序、快手小程序、京东小程序、360小程序、小红书小程序 |
|
||||
| contact | 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息 | 微信小程序、百度小程序、快手小程序、抖音小程序、小红书小程序 |
|
||||
| getPhoneNumber | 获取用户手机号，可以从@getphonenumber回调中获取到用户信息 | 微信小程序、百度小程序、抖音小程序、支付宝小程序、快手小程序、京东小程序、小红书小程序。App平台另见 一键登陆 |
|
||||
| launchApp | 小程序中打开APP，可以通过app-parameter属性设定向APP传的参数 | 微信小程序 、 QQ小程序 、快手小程序、京东小程序、 鸿蒙元服务 |
|
||||
| openSetting | 打开授权设置页 | 微信小程序、QQ小程序、百度小程序、快手小程序、京东小程序、360小程序、小红书小程序、鸿蒙元服务 |
|
||||
| chooseAvatar | 获取用户头像，可以从@chooseavatar回调中获取到头像信息 | 微信小程序2.21.2版本+ |
|
||||
| agreePrivacyAuthorization | 用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过 @agreeprivacyauthorization 监听用户同意隐私协议事件。隐私合规开发指南详情可见 《小程序隐私协议开发指南》 | 微信小程序2.32.3版本+ |
|
||||
| uploadDouyinVideo | 发布抖音视频 | 抖音小程序2.65.0版本+ |
|
||||
| im | 跳转到抖音IM客服 | 抖音小程序2.80.0版本+ |
|
||||
| getAuthorize | 支持小程序授权 | 支付宝小程序 |
|
||||
| lifestyle | 关注生活号 | 支付宝小程序 |
|
||||
| contactShare | 分享到通讯录好友 | 支付宝小程序基础库1.11.0版本+ |
|
||||
| openGroupProfile | 呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest.json中必须配置groupIdList | QQ小程序基础库1.4.7版本+ |
|
||||
| openGuildProfile | 呼起频道页面，可以通过guild-id属性设定需要打开的频道ID | QQ小程序基础库1.46.8版本+ |
|
||||
| openPublicProfile | 打开公众号资料卡，可以通过public-id属性设定需要打开的公众号资料卡的号码，同时manifest.json中必须配置publicIdList | QQ小程序基础库1.12.0版本+ |
|
||||
| shareMessageToFriend | 在自定义开放数据域组件中,向指定好友发起分享据 | QQ小程序基础库1.17.0版本+ |
|
||||
| addFriend | 添加好友， 对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权 | QQ小程序 |
|
||||
| addColorSign | 添加彩签，点击后添加状态有用户提示，无回调 | QQ小程序基础库1.10.0版本+ |
|
||||
| addGroupApp | 添加群应用（只有管理员或群主有权操作），添加后给button绑定@addgroupapp事件接收回调数据 | QQ小程序基础库1.16.0版本+ |
|
||||
| addToFavorites | 收藏当前页面，点击按钮后会触发Page.onAddToFavorites方法 | QQ小程序基础库1.19.0版本+ |
|
||||
| chooseAddress | 选择用户收货地址，可以从@chooseaddress回调中获取到用户选择的地址信息 | 百度小程序3.160.3版本+ |
|
||||
| chooseInvoiceTitle | 选择用户发票抬头，可以从@chooseinvoicetitle回调中获取到用户选择发票抬头信息 | 百度小程序3.160.3版本+ |
|
||||
| login | 登录，可以从@login回调中确认是否登录成功 | 百度小程序3.230.1版本+ |
|
||||
| subscribe | 订阅类模板消息，需要用户授权才可发送 | 百度小程序 |
|
||||
| favorite | 触发用户收藏 | 快手小程序 |
|
||||
| watchLater | 触发用户稍后再看 | 快手小程序 |
|
||||
| openProfile | 触发打开用户主页 | 快手小程序 |
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<button size="default" type="default"
|
||||
style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19"
|
||||
hover-class="is-hover">按钮</button>
|
||||
</template>
|
||||
<style>
|
||||
.is-hover {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
background-color: #179b16;
|
||||
border-color: #179b16;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<button size="default" type="default"
|
||||
style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19"
|
||||
hover-class="is-hover">按钮</button>
|
||||
</template>
|
||||
<style>
|
||||
.is-hover {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
background-color: #179b16;
|
||||
border-color: #179b16;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<navigator url="/pages/about/about"><button type="default">通过navigator组件跳转到about页面</button></navigator>
|
||||
<button type="default" @click="goto('/pages/about/about')">通过方法跳转到about页面</button>
|
||||
<button type="default" @click="navigateTo('/pages/about/about')">跳转到about页面</button><!-- 这种写法只有h5平台支持，不跨端，不推荐使用 -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goto(url) {
|
||||
uni.navigateTo({
|
||||
url:url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<navigator url="/pages/about/about"><button type="default">通过navigator组件跳转到about页面</button></navigator>
|
||||
<button type="default" @click="goto('/pages/about/about')">通过方法跳转到about页面</button>
|
||||
<button type="default" @click="navigateTo('/pages/about/about')">跳转到about页面</button><!-- 这种写法只有h5平台支持，不跨端，不推荐使用 -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goto(url) {
|
||||
uni.navigateTo({
|
||||
url:url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<button type="primary">页面主操作 Normal</button>
|
||||
<button type="primary" loading="true">页面主操作 Loading</button>
|
||||
<button type="primary" disabled="true">页面主操作 Disabled</button>
|
||||
<button type="default">页面次要操作 Normal</button>
|
||||
<button type="default" disabled="true">页面次要操作 Disabled</button>
|
||||
<button type="warn">警告类操作 Normal</button>
|
||||
<button type="warn" disabled="true">警告类操作 Disabled</button>
|
||||
<view class="button-sp-area">
|
||||
<button type="primary" plain="true">按钮</button>
|
||||
<button type="primary" disabled="true" plain="true">不可点击的按钮</button>
|
||||
<button type="default" plain="true">按钮</button>
|
||||
<button type="default" disabled="true" plain="true">按钮</button>
|
||||
<button class="mini-btn" type="primary" size="mini">按钮</button>
|
||||
<button class="mini-btn" type="default" size="mini">按钮</button>
|
||||
<button class="mini-btn" type="warn" size="mini">按钮</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<button type="primary">页面主操作 Normal</button>
|
||||
<button type="primary" loading="true">页面主操作 Loading</button>
|
||||
<button type="primary" disabled="true">页面主操作 Disabled</button>
|
||||
<button type="default">页面次要操作 Normal</button>
|
||||
<button type="default" disabled="true">页面次要操作 Disabled</button>
|
||||
<button type="warn">警告类操作 Normal</button>
|
||||
<button type="warn" disabled="true">警告类操作 Disabled</button>
|
||||
<view class="button-sp-area">
|
||||
<button type="primary" plain="true">按钮</button>
|
||||
<button type="primary" disabled="true" plain="true">不可点击的按钮</button>
|
||||
<button type="default" plain="true">按钮</button>
|
||||
<button type="default" disabled="true" plain="true">按钮</button>
|
||||
<button class="mini-btn" type="primary" size="mini">按钮</button>
|
||||
<button class="mini-btn" type="default" size="mini">按钮</button>
|
||||
<button class="mini-btn" type="warn" size="mini">按钮</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/button.html)
|
||||
@@ -0,0 +1,121 @@
|
||||
# camera
|
||||
|
||||
## Instructions
|
||||
|
||||
页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。
|
||||
|
||||
平台差异说明
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<camera />`（或 `<camera></camera>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| mode | String | normal | 应用模式，有效值为 normal(相机模式), scanCode(扫码模式)，不支持动态修改 | |
|
||||
| resolution | string | medium | 分辨率，有效值为low, medium, high，不支持动态修改 | 微信小程序2.10.0、抖音小程序、飞书小程序 |
|
||||
| device-position | String | back | 前置或后置摄像头，值为front, back | |
|
||||
| flash | String | auto | 闪光灯，值为auto, on, off, torch | |
|
||||
| frame-size | string | medium | 指定期望的相机帧数据尺寸，值为small, medium, large | 微信小程序2.7.0、快应用、支付宝小程序、抖音小程序 |
|
||||
| output-dimension | String | 720P | 相机拍照，录制的分辨率。有效值为 360P、540P、720P、1080P、max。 | 支付宝小程序1.23.0 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @stop | EventHandle | | 摄像头在非正常终止时触发，如退出后台等情况 | |
|
||||
| @error | EventHandle | | 用户不允许使用摄像头时触发 | |
|
||||
| @initdone | eventhandle | | 相机初始化完成时触发，e.detail = {maxZoom} | 微信小程序2.7.0、抖音小程序1.78.0、飞书小程序、快手小程序 |
|
||||
| @ready | EventHandle | | 相机初始化成功时触发。event.detail = {maxZoom} | 支付宝小程序1.24.3 |
|
||||
| @scancode | EventHandle | | 在扫码识别成功时触发，仅在 mode="scanCode" 时生效 | 微信小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/camera.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
|
||||
<button type="primary" @click="takePhoto">拍照</button>
|
||||
<view>预览</view>
|
||||
<image mode="widthFix" :src="src"></image>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
|
||||
<button type="primary" @click="takePhoto">拍照</button>
|
||||
<view>预览</view>
|
||||
<image mode="widthFix" :src="src"></image>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src:""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
takePhoto() {
|
||||
const ctx = uni.createCameraContext();
|
||||
ctx.takePhoto({
|
||||
quality: 'high',
|
||||
success: (res) => {
|
||||
this.src = res.tempImagePath
|
||||
}
|
||||
});
|
||||
},
|
||||
error(e) {
|
||||
console.log(e.detail);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src:""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
takePhoto() {
|
||||
const ctx = uni.createCameraContext();
|
||||
ctx.takePhoto({
|
||||
quality: 'high',
|
||||
success: (res) => {
|
||||
this.src = res.tempImagePath
|
||||
}
|
||||
});
|
||||
},
|
||||
error(e) {
|
||||
console.log(e.detail);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/camera.html)
|
||||
@@ -0,0 +1,99 @@
|
||||
# canvas
|
||||
|
||||
## Instructions
|
||||
|
||||
画布
|
||||
|
||||
属性说明
|
||||
|
||||
注意事项：
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<canvas />`（或 `<canvas></canvas>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| type | String | | 指定 canvas 类型，支持 2d 和 webgl | 微信小程序2.7.0+ 、抖音小程序1.78.0+、支付宝小程序2.7.0+ |
|
||||
| canvas-id | String | | canvas 组件的唯一标识符 | |
|
||||
| disable-scroll | Boolean | false | 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 | 抖音小程序与飞书小程序不支持 |
|
||||
| hidpi | Boolean | true | 是否启用高清处理 | H5 (HBuilder X 3.4.0+)、App-vue (HBuilder X 3.4.0+) |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @touchstart | EventHandle | | 手指触摸动作开始 | 抖音小程序1.78.0+、小红书小程序 |
|
||||
| @touchmove | EventHandle | | 手指触摸后移动 | 抖音小程序1.78.0+、小红书小程序 |
|
||||
| @touchend | EventHandle | | 手指触摸动作结束 | 抖音小程序1.78.0+、小红书小程序 |
|
||||
| @touchcancel | EventHandle | | 手指触摸动作被打断，如来电提醒，弹窗 | 抖音小程序1.78.0+ |
|
||||
| @longtap | EventHandle | | 手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动 | 抖音小程序与飞书小程序不支持 |
|
||||
| @error | EventHandle | | 当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'} | 抖音小程序与飞书小程序不支持 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/canvas.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
|
||||
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" id="secondCanvas"></canvas>
|
||||
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" id="secondCanvas" @error="canvasIdErrorCallback"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
|
||||
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" id="secondCanvas"></canvas>
|
||||
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" id="secondCanvas" @error="canvasIdErrorCallback"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
onReady: function (e) {
|
||||
var context = uni.createCanvasContext('firstCanvas')
|
||||
context.setStrokeStyle("#00ff00")
|
||||
context.setLineWidth(5)
|
||||
context.rect(0, 0, 200, 200)
|
||||
context.stroke()
|
||||
context.setStrokeStyle("#ff0000")
|
||||
context.setLineWidth(2)
|
||||
context.moveTo(160, 100)
|
||||
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
|
||||
context.moveTo(140, 100)
|
||||
context.arc(100, 100, 40, 0, Math.PI, false)
|
||||
context.moveTo(85, 80)
|
||||
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
|
||||
context.moveTo(125, 80)
|
||||
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
|
||||
context.stroke()
|
||||
context.draw()
|
||||
},
|
||||
methods: {
|
||||
canvasIdErrorCallback: function (e) {
|
||||
console.error(e.detail.errMsg)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/canvas.html)
|
||||
@@ -0,0 +1,198 @@
|
||||
# checkbox
|
||||
|
||||
## Instructions
|
||||
|
||||
多选框组
|
||||
|
||||
属性说明
|
||||
|
||||
多选项。在1组check-group中可选择多个
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<checkbox />`（或 `<checkbox></checkbox>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
See official docs for full properties list: `https://uniapp.dcloud.net.cn/component/checkbox.html`
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @change | EventHandle | | <checkbox-group> 中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/checkbox.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">默认样式</view>
|
||||
<view>
|
||||
<checkbox-group>
|
||||
<label>
|
||||
<checkbox value="cb" :checked="true" />选中
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="cb" />未选中
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
|
||||
<view>
|
||||
<checkbox-group>
|
||||
<label>
|
||||
<checkbox value="cb" :checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title uni-common-mt">
|
||||
推荐展示样式
|
||||
<text>\n使用 uni-list 布局</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<checkbox-group @change="checkboxChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
|
||||
<view>
|
||||
<checkbox :value="item.value" :checked="item.checked" />
|
||||
</view>
|
||||
<view>{{item.name}}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">默认样式</view>
|
||||
<view>
|
||||
<checkbox-group>
|
||||
<label>
|
||||
<checkbox value="cb" :checked="true" />选中
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="cb" />未选中
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
|
||||
<view>
|
||||
<checkbox-group>
|
||||
<label>
|
||||
<checkbox value="cb" :checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title uni-common-mt">
|
||||
推荐展示样式
|
||||
<text>\n使用 uni-list 布局</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<checkbox-group @change="checkboxChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
|
||||
<view>
|
||||
<checkbox :value="item.value" :checked="item.checked" />
|
||||
</view>
|
||||
<view>{{item.name}}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'checkbox 复选框',
|
||||
items: [{
|
||||
value: 'USA',
|
||||
name: '美国'
|
||||
},
|
||||
{
|
||||
value: 'CHN',
|
||||
name: '中国',
|
||||
checked: 'true'
|
||||
},
|
||||
{
|
||||
value: 'BRA',
|
||||
name: '巴西'
|
||||
},
|
||||
{
|
||||
value: 'JPN',
|
||||
name: '日本'
|
||||
},
|
||||
{
|
||||
value: 'ENG',
|
||||
name: '英国'
|
||||
},
|
||||
{
|
||||
value: 'FRA',
|
||||
name: '法国'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkboxChange: function (e) {
|
||||
var items = this.items,
|
||||
values = e.detail.value;
|
||||
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
||||
const item = items[i]
|
||||
if(values.includes(item.value)){
|
||||
this.$set(item,'checked',true)
|
||||
}else{
|
||||
this.$set(item,'checked',false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<style>
|
||||
.uni-list-cell {
|
||||
justify-content: flex-start
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/checkbox.html)
|
||||
@@ -0,0 +1,138 @@
|
||||
# cover-image
|
||||
|
||||
## Instructions
|
||||
|
||||
覆盖在原生组件上的图片视图。可覆盖的原生组件同 cover-view ，支持嵌套在 cover-view 里。
|
||||
|
||||
平台差异说明
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<cover-image />`（或 `<cover-image></cover-image>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| src | String | | 图标路径。支持本地路径、网络路径。不支持 base64 格式。 | |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @load | eventhandle | | 图片加载成功时触发 | 微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东小程序 |
|
||||
| @error | eventhandle | | 图片加载失败时触发 | 微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东小程序 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/cover-image.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view class="page">
|
||||
<video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="true" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v">
|
||||
<cover-view class="controls-title">简单的自定义 controls</cover-view>
|
||||
<cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image>
|
||||
<cover-image class="controls-pause img" @click="pause" src="/static/pause.png"></cover-image>
|
||||
</video>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view class="page">
|
||||
<video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="true" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v">
|
||||
<cover-view class="controls-title">简单的自定义 controls</cover-view>
|
||||
<cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image>
|
||||
<cover-image class="controls-pause img" @click="pause" src="/static/pause.png"></cover-image>
|
||||
</video>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
this.videoCtx = uni.createVideoContext('demoVideo')
|
||||
},
|
||||
methods: {
|
||||
play(event) {
|
||||
this.videoCtx.play();
|
||||
uni.showToast({
|
||||
title: '开始播放',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
pause(event) {
|
||||
this.videoCtx.pause();
|
||||
uni.showToast({
|
||||
title: '暂停播放',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<style>
|
||||
.page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.video {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
cover-view,
|
||||
cover-image {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.img {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
top: 50%;
|
||||
margin-top: -50rpx;
|
||||
}
|
||||
|
||||
.controls-play {
|
||||
left: 50rpx;
|
||||
}
|
||||
|
||||
.controls-pause {
|
||||
right: 50rpx;
|
||||
}
|
||||
|
||||
.controls-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/cover-image.html)
|
||||
@@ -0,0 +1,34 @@
|
||||
# cover-view
|
||||
|
||||
## Instructions
|
||||
|
||||
覆盖在原生组件上的文本视图。
|
||||
|
||||
app-vue和小程序框架，渲染引擎是webview的。但为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view。
|
||||
|
||||
平台差异说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<cover-view />`（或 `<cover-view></cover-view>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| scroll-top | number/string | | 设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效 | 支付宝小程序不支持 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/cover-view.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/cover-view.html`
|
||||
|
||||
### Examples
|
||||
|
||||
Examples are available in the official docs: `https://uniapp.dcloud.net.cn/component/cover-view.html`
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/cover-view.html)
|
||||
@@ -0,0 +1,58 @@
|
||||
# custom-tab-bar
|
||||
|
||||
## Instructions
|
||||
|
||||
自定义tabBar组件。
|
||||
|
||||
在小程序和App端，为提升性能，在 pages.json 里配置固定的原生tabBar。但在H5端，这一设计并不会提升性能。
|
||||
|
||||
同时，H5端尤其是PC宽屏，对tabBar的位置和样式有更灵活的需求，tabBar作为一级导航，更多的时候是在PC网页顶部而不是底部。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<custom-tab-bar />`（或 `<custom-tab-bar></custom-tab-bar>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| direction | String | horizontal | 选项的排列方向 可选值：horizontal，vertical |
|
||||
| show-icon | Boolean | false | 是否显示icon |
|
||||
| selected | Number | 0 | 选中的tabBar选项索引值 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| onTabItemTap | EventHandle | | 点击事件，参数为Object，具体见下表 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/custom-tab-bar.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中的 top-window 查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<custom-tab-bar direction="horizontal" :show-icon="false" :selected="selected" @onTabItemTap="onTabItemTap" />
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中的 top-window 查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<custom-tab-bar direction="horizontal" :show-icon="false" :selected="selected" @onTabItemTap="onTabItemTap" />
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/custom-tab-bar.html)
|
||||
@@ -0,0 +1,252 @@
|
||||
# editor
|
||||
|
||||
## Instructions
|
||||
|
||||
富文本编辑器，可以对图片、文字格式进行编辑和混排。
|
||||
|
||||
在web开发时，可以使用 contenteditable 来实现内容编辑。但这是一个dom API，在非H5平台无法使用。于是微信小程序和uni-app的App-vue提供了 editor 组件来实现这个功能，并且在uni-app的H5平台也提供了兼容。从技术本质来讲，这个组件仍然运行在视图层webview中，利用的也是浏览器的 contenteditable 功能。
|
||||
|
||||
编辑器导出内容支持带标签的 html 和纯文本的 text ，编辑器内部采用 delta 格式进行存储。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<editor />`（或 `<editor></editor>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| read-only | boolean | false | 否 | 设置编辑器为只读 |
|
||||
| placeholder | string | | 否 | 提示信息 |
|
||||
| show-img-size | boolean | false | 否 | 点击图片时显示图片大小控件 |
|
||||
| show-img-toolbar | boolean | false | 否 | 点击图片时显示工具栏控件 |
|
||||
| show-img-resize | boolean | false | 否 | 点击图片时显示修改尺寸控件 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 必填 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @ready | eventhandle | | 否 | 编辑器初始化完成时触发 |
|
||||
| @focus | eventhandle | | 否 | 编辑器聚焦时触发，event.detail = {html, text, delta} |
|
||||
| @blur | eventhandle | | 否 | 编辑器失去焦点时触发，detail = {html, text, delta} |
|
||||
| @input | eventhandle | | 否 | 编辑器内容改变时触发，detail = {html, text, delta} |
|
||||
| @statuschange | eventhandle | | 否 | 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/editor.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<head>
|
||||
<script src="/static/quill-1.3.7.min.js"></script>
|
||||
<script src="/static/image-resize-3.0.1.min.js"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<head>
|
||||
<script src="/static/quill-1.3.7.min.js"></script>
|
||||
<script src="/static/image-resize-3.0.1.min.js"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
// #ifdef H5
|
||||
import quill from "quill";
|
||||
window.Quill = quill;
|
||||
// #endif
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
// #ifdef H5
|
||||
import quill from "quill";
|
||||
window.Quill = quill;
|
||||
// #endif
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="page-body">
|
||||
<view class='wrapper'>
|
||||
<view class='toolbar' @tap="format" style="height: 120px;overflow-y: auto;">
|
||||
<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold">
|
||||
</view>
|
||||
<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic">
|
||||
</view>
|
||||
<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
|
||||
data-name="underline"></view>
|
||||
<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
|
||||
data-name="strike"></view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
|
||||
data-name="align" data-value="left"></view>
|
||||
<!-- #endif -->
|
||||
<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
|
||||
data-name="align" data-value="center"></view>
|
||||
<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
|
||||
data-name="align" data-value="right"></view>
|
||||
<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
|
||||
data-name="align" data-value="justify"></view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
|
||||
data-name="lineHeight" data-value="2"></view>
|
||||
<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing"
|
||||
data-name="letterSpacing" data-value="2em"></view>
|
||||
<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju"
|
||||
data-name="marginTop" data-value="20px"></view>
|
||||
<view :class="formats.marginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"
|
||||
data-name="marginBottom" data-value="20px"></view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
|
||||
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
|
||||
data-name="fontFamily" data-value="Pacifico"></view>
|
||||
<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
|
||||
data-name="fontSize" data-value="24px"></view>
|
||||
<!-- #endif -->
|
||||
<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color"
|
||||
data-name="color" data-value="#0000ff"></view>
|
||||
<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
|
||||
class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
|
||||
<view class="iconfont icon-date" @tap="insertDate"></view>
|
||||
<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
|
||||
<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
|
||||
data-name="list" data-value="ordered"></view>
|
||||
<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
|
||||
data-name="list" data-value="bullet"></view>
|
||||
|
||||
<view class="iconfont icon-undo" @tap="undo"></view>
|
||||
<view class="iconfont icon-redo" @tap="redo"></view>
|
||||
|
||||
<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
|
||||
<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
|
||||
<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
|
||||
<view class="iconfont icon-charutupian" @tap="insertImage"></view>
|
||||
<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
|
||||
data-name="header" :data-value="1"></view>
|
||||
<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
|
||||
data-name="script" data-value="sub"></view>
|
||||
<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao"
|
||||
data-name="script" data-value="super"></view>
|
||||
|
||||
<view class="iconfont icon-shanchu" @tap="clear"></view>
|
||||
|
||||
<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl"
|
||||
data-name="direction" data-value="rtl"></view>
|
||||
</view>
|
||||
|
||||
<view class="editor-wrapper">
|
||||
<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar
|
||||
show-img-resize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
|
||||
</editor>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="page-body">
|
||||
<view class='wrapper'>
|
||||
<view class='toolbar' @tap="format" style="height: 120px;overflow-y: auto;">
|
||||
<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold">
|
||||
</view>
|
||||
<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic">
|
||||
</view>
|
||||
<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
|
||||
data-name="underline"></view>
|
||||
<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
|
||||
data-name="strike"></view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
|
||||
data-name="align" data-value="left"></view>
|
||||
<!-- #endif -->
|
||||
<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
|
||||
data-name="align" data-value="center"></view>
|
||||
<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
|
||||
data-name="align" data-value="right"></view>
|
||||
<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
|
||||
data-name="align" data-value="justify"></view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
|
||||
data-name="lineHeight" data-value="2"></view>
|
||||
<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing"
|
||||
data-name="letterSpacing" data-value="2em"></view>
|
||||
<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju"
|
||||
data-name="marginTop" data-value="20px"></view>
|
||||
<view :class="formats.marginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"
|
||||
data-name="marginBottom" data-value="20px"></view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
|
||||
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
|
||||
data-name="fontFamily" data-value="Pacifico"></view>
|
||||
<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
|
||||
data-name="fontSize" data-value="24px"></view>
|
||||
<!-- #endif -->
|
||||
<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color"
|
||||
data-name="color" data-value="#0000ff"></view>
|
||||
<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
|
||||
class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
|
||||
<view class="iconfont icon-date" @tap="insertDate"></view>
|
||||
<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
|
||||
<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
|
||||
data-name="list" data-value="ordered"></view>
|
||||
<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
|
||||
data-name="list" data-value="bullet"></view>
|
||||
|
||||
<view class="iconfont icon-undo" @tap="undo"></view>
|
||||
<view class="iconfont icon-redo" @tap="redo"></view>
|
||||
|
||||
<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
|
||||
<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
|
||||
<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
|
||||
<view class="iconfont icon-charutupian" @tap="insertImage"></view>
|
||||
<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
|
||||
data-name="header" :data-value="1"></view>
|
||||
<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
|
||||
data-name="script" data-value="sub"></view>
|
||||
<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao"
|
||||
data-name="script" data-value="super"></view>
|
||||
|
||||
<view class="iconfont icon-shanchu" @tap="clear"></view>
|
||||
|
||||
<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl"
|
||||
data-name="direction" data-value="rtl"></view>
|
||||
</view>
|
||||
|
||||
<view class="editor-wrapper">
|
||||
<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar
|
||||
show-img-resize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
|
||||
</editor>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/editor.html)
|
||||
@@ -0,0 +1,238 @@
|
||||
# form
|
||||
|
||||
## Instructions
|
||||
|
||||
表单，将组件内的用户输入的 <switch> <input> <checkbox> <slider> <radio> <picker> 提交。
|
||||
|
||||
当点击 <form> 表单中 formType 为 submit 的 <button> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<form />`（或 `<form></form>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| report-submit | Boolean | 是否返回 formId 用于发送 模板消息 | 微信小程序、支付宝小程序 |
|
||||
| report-submit-timeout | number | 等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId | 微信小程序2.6.2 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @submit | EventHandle | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}，report-submit 为 true 时才会返回 formId | |
|
||||
| @reset | EventHandle | 表单重置时会触发 reset 事件 | |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/form.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view>
|
||||
<form @submit="formSubmit" @reset="formReset">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">switch</view>
|
||||
<view>
|
||||
<switch name="switch" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">radio</view>
|
||||
<radio-group name="radio">
|
||||
<label>
|
||||
<radio value="radio1" /><text>选项一</text>
|
||||
</label>
|
||||
<label>
|
||||
<radio value="radio2" /><text>选项二</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">checkbox</view>
|
||||
<checkbox-group name="checkbox">
|
||||
<label>
|
||||
<checkbox value="checkbox1" /><text>选项一</text>
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="checkbox2" /><text>选项二</text>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">slider</view>
|
||||
<slider value="50" name="slider" show-value></slider>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">input</view>
|
||||
<input class="uni-input" name="input" placeholder="这是一个输入框" />
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button form-type="submit">Submit</button>
|
||||
<button type="default" form-type="reset">Reset</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view>
|
||||
<form @submit="formSubmit" @reset="formReset">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">switch</view>
|
||||
<view>
|
||||
<switch name="switch" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">radio</view>
|
||||
<radio-group name="radio">
|
||||
<label>
|
||||
<radio value="radio1" /><text>选项一</text>
|
||||
</label>
|
||||
<label>
|
||||
<radio value="radio2" /><text>选项二</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">checkbox</view>
|
||||
<checkbox-group name="checkbox">
|
||||
<label>
|
||||
<checkbox value="checkbox1" /><text>选项一</text>
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="checkbox2" /><text>选项二</text>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">slider</view>
|
||||
<slider value="50" name="slider" show-value></slider>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">input</view>
|
||||
<input class="uni-input" name="input" placeholder="这是一个输入框" />
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button form-type="submit">Submit</button>
|
||||
<button type="default" form-type="reset">Reset</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formSubmit: function(e) {
|
||||
console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
|
||||
var formdata = e.detail.value
|
||||
uni.showModal({
|
||||
content: '表单数据内容：' + JSON.stringify(formdata),
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
formReset: function(e) {
|
||||
console.log('清空数据')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<style>
|
||||
.uni-form-item .title {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<!-- /pages/index/index.vue -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<form @submit="onSubmit">
|
||||
<compInput name="test" v-model="testValue"></compInput>
|
||||
<button form-type="submit">Submit</button>
|
||||
</form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
testValue: 'Hello'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit(e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<!-- /pages/index/index.vue -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<form @submit="onSubmit">
|
||||
<compInput name="test" v-model="testValue"></compInput>
|
||||
<button form-type="submit">Submit</button>
|
||||
</form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
testValue: 'Hello'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit(e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/form.html)
|
||||
@@ -0,0 +1,99 @@
|
||||
# icon
|
||||
|
||||
## Instructions
|
||||
|
||||
图标。
|
||||
|
||||
平台差异说明
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<icon />`（或 `<icon></icon>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | String | | icon的类型 |
|
||||
| size | Number | 23 | icon的大小，单位px |
|
||||
| color | Color | | icon的颜色，同css的color |
|
||||
| view-box | number | 1024 | 小红书小程序 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/icon.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/icon.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<view class="item" v-for="(value,index) in iconType" :key="index">
|
||||
<icon :type="value" size="26"/>
|
||||
<text>{{value}}</text>
|
||||
</view>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<view class="item" v-for="(value,index) in iconType" :key="index">
|
||||
<icon :type="value" size="26"/>
|
||||
<text>{{value}}</text>
|
||||
</view>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
iconType: ['success']
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef APP-PLUS|| MP-WEIXIN
|
||||
this.iconType = ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear']
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
this.iconType = ['info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear', 'success', 'success_no_circle', 'loading']
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU
|
||||
this.iconType = ['success', 'info', 'warn', 'waiting', 'success_no_circle', 'clear', 'search', 'personal', 'setting', 'top', 'close', 'cancel', 'download', 'checkboxSelected', 'radioSelected', 'radioUnselect']
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
iconType: ['success']
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef APP-PLUS|| MP-WEIXIN
|
||||
this.iconType = ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear']
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
this.iconType = ['info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear', 'success', 'success_no_circle', 'loading']
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU
|
||||
this.iconType = ['success', 'info', 'warn', 'waiting', 'success_no_circle', 'clear', 'search', 'personal', 'setting', 'top', 'close', 'cancel', 'download', 'checkboxSelected', 'radioSelected', 'radioUnselect']
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/icon.html)
|
||||
@@ -0,0 +1,133 @@
|
||||
# # image
|
||||
|
||||
## Instructions
|
||||
|
||||
图片需要上传？推荐 uni-cdn ，帮你节省至少30%的 CDN 费用！ 详情 。
|
||||
|
||||
HarmonyOS
|
||||
|
||||
图片组件。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<image />`（或 `<image></image>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| src | String | | 图片资源地址 | |
|
||||
| mode | String | 'scaleToFill' | 图片裁剪、缩放的模式 | |
|
||||
| lazy-load | Boolean | false | 图片懒加载。只针对page与scroll-view下的image有效 | 微信小程序、百度小程序、抖音小程序、飞书小程序、小红书小程序 |
|
||||
| fade-show | Boolean | true | 图片显示动画效果 | 仅App-nvue 2.3.4+ Android有效 |
|
||||
| webp | boolean | false | 在系统不支持webp的情况下是否单独启用webp。默认false，只支持网络资源。webp支持详见下面说明 | 微信小程序2.9.0、抖音小程序2.90.0 |
|
||||
| show-menu-by-longpress | boolean | false | 开启长按图片显示识别小程序码菜单 | 微信小程序2.7.0 |
|
||||
| draggable | boolean | false | 是否能拖动图片 | H5 3.1.1+、App（iOS15+） |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @error | HandleEvent | | 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'} | |
|
||||
| @load | HandleEvent | | 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'} | |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/image.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="image-list">
|
||||
<view class="image-item" v-for="(item,index) in array" :key="index">
|
||||
<view class="image-content">
|
||||
<image style="width: 200px; height: 200px; background-color: #eeeeee;" :mode="item.mode" :src="src"
|
||||
@error="imageError"></image>
|
||||
</view>
|
||||
<view class="image-title">{{item.text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="image-list">
|
||||
<view class="image-item" v-for="(item,index) in array" :key="index">
|
||||
<view class="image-content">
|
||||
<image style="width: 200px; height: 200px; background-color: #eeeeee;" :mode="item.mode" :src="src"
|
||||
@error="imageError"></image>
|
||||
</view>
|
||||
<view class="image-title">{{item.text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
array: [{
|
||||
mode: 'scaleToFill',
|
||||
text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
|
||||
}, {
|
||||
mode: 'aspectFit',
|
||||
text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
|
||||
}, {
|
||||
mode: 'aspectFill',
|
||||
text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
|
||||
}, {
|
||||
mode: 'top',
|
||||
text: 'top：不缩放图片，只显示图片的顶部区域'
|
||||
}, {
|
||||
mode: 'bottom',
|
||||
text: 'bottom：不缩放图片，只显示图片的底部区域'
|
||||
}, {
|
||||
mode: 'center',
|
||||
text: 'center：不缩放图片，只显示图片的中间区域'
|
||||
}, {
|
||||
mode: 'left',
|
||||
text: 'left：不缩放图片，只显示图片的左边区域'
|
||||
}, {
|
||||
mode: 'right',
|
||||
text: 'right：不缩放图片，只显示图片的右边边区域'
|
||||
}, {
|
||||
mode: 'top left',
|
||||
text: 'top left：不缩放图片，只显示图片的左上边区域'
|
||||
}, {
|
||||
mode: 'top right',
|
||||
text: 'top right：不缩放图片，只显示图片的右上边区域'
|
||||
}, {
|
||||
mode: 'bottom left',
|
||||
text: 'bottom left：不缩放图片，只显示图片的左下边区域'
|
||||
}, {
|
||||
mode: 'bottom right',
|
||||
text: 'bottom right：不缩放图片，只显示图片的右下边区域'
|
||||
}],
|
||||
src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
imageError: function(e) {
|
||||
console.error('image发生error事件，携带值为' + e.detail.errMsg)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/image.html)
|
||||
@@ -0,0 +1,133 @@
|
||||
# input
|
||||
|
||||
## Instructions
|
||||
|
||||
单行输入框。
|
||||
|
||||
html规范中input不仅是输入框，还有radio、checkbox、时间、日期、文件选择功能。在uni-app规范中，input仅仅是输入框。其他功能uni-app有单独的组件或API： radio组件 、 checkbox组件 、 时间选择 、 日期选择 、 图片选择 、 视频选择 、 多媒体文件选择(含图片视频) 、 通用文件选择 。
|
||||
|
||||
注意事项
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<input />`（或 `<input></input>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| value | String | | 输入框的初始内容 | |
|
||||
| type | String | text | input 的类型 有效值 | |
|
||||
| text-content-type | String | | 文本区域的语义，根据类型自动填充 有效值 | 仅 App-nvue-iOS 支持 |
|
||||
| password | Boolean | false | 是否是密码类型 | H5和App写此属性时，type失效 |
|
||||
| placeholder | String | | 输入框为空时占位符 | |
|
||||
| placeholder-style | String | | 指定 placeholder 的样式 | |
|
||||
| placeholder-class | String | "input-placeholder" | 指定 placeholder 的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ | 抖音小程序、飞书小程序、快手小程序不支持 |
|
||||
| disabled | Boolean | false | 是否禁用 | |
|
||||
| maxlength | Number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 | |
|
||||
| cursor-spacing | Number | 0 | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | App、微信小程序、百度小程序、QQ小程序、京东小程序 |
|
||||
| focus | Boolean | false | 获取焦点。 | H5、App需要点击按钮获取焦点的，必须使用@touchend.prevent="onTap"阻止键盘收起默认事件才能获取焦点 关于软键盘弹出的逻辑说明 ，小程序、nvue需使用组件的 focus()、blur() 方法控制焦点 |
|
||||
| confirm-type | String | done | 设置键盘右下角按钮的文字，仅在 type="text" 时生效。 有效值 | 微信小程序、App、H5、快手小程序、京东小程序、小红书小程序 |
|
||||
| confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | App(3.3.7+)、H5 (3.3.7+)、微信小程序、支付宝小程序、百度小程序、QQ小程序、京东小程序、小红书小程序 |
|
||||
| cursor | Number | | 指定focus时的光标位置 | |
|
||||
| cursor-color | String | | 光标颜色 | 微信小程序 3.1.0+、H5(4.0+)、App-Vue(4.0+) |
|
||||
| selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 | |
|
||||
| selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与selection-start搭配使用 | |
|
||||
| adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | App-Android（vue 页面 softinputMode 为 adjustResize 时无效，使用 x5 内核时无效）、微信小程序、百度小程序、QQ小程序、京东小程序、小红书小程序 |
|
||||
| auto-blur | Boolean | false | 键盘收起时，是否自动失去焦点 | App-Vue 3.0.0+ |
|
||||
| ignoreCompositionEvent | Boolean | true | 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件 | App-vue (3.4.4+)、H5 (3.4.4+)、App-nvue不支持 |
|
||||
| always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | 微信小程序 2.10.4+ |
|
||||
| hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | 微信小程序 2.8.2+ |
|
||||
| safe-password-cert-path | String | | 安全键盘加密公钥的路径，只支持包内路径 | 微信小程序 2.18.0+ |
|
||||
| safe-password-length | Number | | 安全键盘输入密码长度 | 微信小程序 2.18.0+ |
|
||||
| safe-password-time-stamp | Number | | 安全键盘加密时间戳 | 微信小程序 2.18.0+ |
|
||||
| safe-password-nonce | String | | 安全键盘加密盐值 | 微信小程序 2.18.0+ |
|
||||
| safe-password-salt | String | | 安全键盘计算 hash 盐值，若指定custom-hash 则无效 | 微信小程序 2.18.0+ |
|
||||
| safe-password-custom-hash | String | | 安全键盘计算 hash 的算法表达式，如 md5(sha1('foo' + sha256(sm3(password + 'bar')))) | 微信小程序 2.18.0+ |
|
||||
| random-number | Boolean | false | 当 type 为 number, digit, idcard 数字键盘是否随机排列 | 支付宝小程序 1.9.0+ |
|
||||
| controlled | Boolean | false | 是否为受控组件。为 true 时，value 内容会完全受 setData 控制 | 支付宝小程序 1.9.0+ |
|
||||
| always-system | Boolean | false | 是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效 | 支付宝小程序 2.7.3+ |
|
||||
| inputmode | String | "text" | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。 有效值 | H5（3.6.16+）、App-vue（3.6.16+） |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @input | EventHandle | | 当键盘输入时，触发input事件，event.detail = {value} | 差异见下方 Tips |
|
||||
| @focus | EventHandle | | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 | 仅微信小程序、京东小程序、App（2.2.3+） 、QQ小程序、快手小程序支持 height、小红书小程序 |
|
||||
| @blur | EventHandle | | 输入框失去焦点时触发，event.detail = {value: value} | |
|
||||
| @confirm | EventHandle | | 点击完成按钮时触发，event.detail = {value: value} | |
|
||||
| @keyboardheightchange | eventhandle | | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} | 微信小程序基础库2.7.0+、App 3.1.0+ |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
| 值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- |
|
||||
| text | 文本输入键盘 | |
|
||||
| number | 数字输入键盘 | 均支持，App平台、H5平台 3.1.22 以下版本 vue 页面在 iOS 平台显示的键盘包含负数和小数。 |
|
||||
| idcard | 身份证输入键盘 | 微信、支付宝、百度、QQ小程序、快手小程序、京东小程序 |
|
||||
| digit | 带小数点的数字键盘 | 均支持，App平台、H5平台 vue 页面在 iOS 平台显示的键盘包含负数（原生键盘不支持负号）。 |
|
||||
| tel | 电话输入键盘 | 小红书小程序不支持 |
|
||||
| safe-password | 密码安全输入键盘 | 微信小程序 |
|
||||
| nickname | 昵称输入键盘 | 微信小程序 |
|
||||
| none | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 | H5 (5.0+)、App (5.0+) |
|
||||
| decimal | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键 | H5 (5.0+)、App (5.0+) |
|
||||
| numeric | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 | H5 (5.0+)、App (5.0+) |
|
||||
| search | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 | H5 (5.0+)、App (5.0+) |
|
||||
| email | 为邮件地址输入优化的虚拟键盘，通常包含""符号和其他优化。表单里面的邮件地址输入应该使用 。 | H5 (5.0+)、App (5.0+) |
|
||||
| url | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 。 | H5 (5.0+)、App (5.0+) |
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
"app-plus": {
|
||||
"softinputNavBar": "none"
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```javascript
|
||||
"app-plus": {
|
||||
"softinputNavBar": "none"
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
this.$scope.$getAppWebview().setStyle({
|
||||
softinputNavBar: 'none'
|
||||
})
|
||||
//this.$scope.$getAppWebview()相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
this.$scope.$getAppWebview().setStyle({
|
||||
softinputNavBar: 'none'
|
||||
})
|
||||
//this.$scope.$getAppWebview()相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
"app-plus": {
|
||||
"softinputMode": "adjustResize"
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```javascript
|
||||
"app-plus": {
|
||||
"softinputMode": "adjustResize"
|
||||
}
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/input.html)
|
||||
@@ -0,0 +1,201 @@
|
||||
# label
|
||||
|
||||
## Instructions
|
||||
|
||||
用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。
|
||||
|
||||
for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
|
||||
|
||||
目前可以绑定的控件有： <button> , <checkbox> , <radio> , <switch> 。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<label />`（或 `<label></label>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| for | String | 绑定控件的 id |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/label.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/label.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-common-mt">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">表单组件在label内</view>
|
||||
<checkbox-group class="uni-list" @change="checkboxChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxItems" :key="item.name">
|
||||
<view>
|
||||
<checkbox :value="item.name" :checked="item.checked"></checkbox>
|
||||
</view>
|
||||
<view>{{item.value}}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">label用for标识表单组件</view>
|
||||
<radio-group class="uni-list" @change="radioChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
|
||||
<view>
|
||||
<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
|
||||
</view>
|
||||
<view>
|
||||
<label class="label-2-text" :for="item.name">
|
||||
<text>{{item.value}}</text>
|
||||
</label>
|
||||
</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">label内有多个时选中第一个</view>
|
||||
<checkbox-group class="uni-list" @change="checkboxChange">
|
||||
<label class="label-3">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<checkbox class="checkbox-3">选项一</checkbox>
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<checkbox class="checkbox-3">选项二</checkbox>
|
||||
</view>
|
||||
<view class="uni-link uni-center" style="margin-top:20rpx;">点击该label下的文字默认选中第一个checkbox</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-common-mt">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">表单组件在label内</view>
|
||||
<checkbox-group class="uni-list" @change="checkboxChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxItems" :key="item.name">
|
||||
<view>
|
||||
<checkbox :value="item.name" :checked="item.checked"></checkbox>
|
||||
</view>
|
||||
<view>{{item.value}}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">label用for标识表单组件</view>
|
||||
<radio-group class="uni-list" @change="radioChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
|
||||
<view>
|
||||
<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
|
||||
</view>
|
||||
<view>
|
||||
<label class="label-2-text" :for="item.name">
|
||||
<text>{{item.value}}</text>
|
||||
</label>
|
||||
</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">label内有多个时选中第一个</view>
|
||||
<checkbox-group class="uni-list" @change="checkboxChange">
|
||||
<label class="label-3">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<checkbox class="checkbox-3">选项一</checkbox>
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<checkbox class="checkbox-3">选项二</checkbox>
|
||||
</view>
|
||||
<view class="uni-link uni-center" style="margin-top:20rpx;">点击该label下的文字默认选中第一个checkbox</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkboxItems: [{
|
||||
name: 'USA',
|
||||
value: '美国'
|
||||
},
|
||||
{
|
||||
name: 'CHN',
|
||||
value: '中国',
|
||||
checked: 'true'
|
||||
}
|
||||
],
|
||||
radioItems: [{
|
||||
name: 'USA',
|
||||
value: '美国'
|
||||
},
|
||||
{
|
||||
name: 'CHN',
|
||||
value: '中国',
|
||||
checked: 'true'
|
||||
}
|
||||
],
|
||||
hidden: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkboxChange: function(e) {
|
||||
console.log(e)
|
||||
var checked = e.target.value
|
||||
var changed = {}
|
||||
for (var i = 0; i < this.checkboxItems.length; i++) {
|
||||
if (checked.indexOf(this.checkboxItems[i].name) !== -1) {
|
||||
changed['checkboxItems[' + i + '].checked'] = true
|
||||
} else {
|
||||
changed['checkboxItems[' + i + '].checked'] = false
|
||||
}
|
||||
}
|
||||
},
|
||||
radioChange: function(e) {
|
||||
var checked = e.target.value
|
||||
var changed = {}
|
||||
for (var i = 0; i < this.radioItems.length; i++) {
|
||||
if (checked.indexOf(this.radioItems[i].name) !== -1) {
|
||||
changed['radioItems[' + i + '].checked'] = true
|
||||
} else {
|
||||
changed['radioItems[' + i + '].checked'] = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/label.html)
|
||||
@@ -0,0 +1,104 @@
|
||||
# live-player
|
||||
|
||||
## Instructions
|
||||
|
||||
推荐 uni直播 ，官方内置，使用简单，且价格便宜，更具高性价比！ 详情 。
|
||||
|
||||
实时音视频播放，也称直播拉流。
|
||||
|
||||
使用live-player 组件需注意：如果发布到小程序，需要先通过各家小程序的审核。指定类目的小程序才能使用（ 微信小程序类目 、 百度小程序类目 ），审核通过后在各家小程序管理后台自助开通该组件权限。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<live-player />`（或 `<live-player></live-player>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| id | String | | live-player 属性的唯一标志符 | |
|
||||
| src | String | | 音视频地址。百度小程序支持 m3u8 格式；微信小程序支持 flv, rtmp 格式 | |
|
||||
| mode | String | live | live（直播），RTC（实时通话，该模式时延更低） | 微信小程序 |
|
||||
| autoplay | Boolean | false | 自动播放 | |
|
||||
| muted | Boolean | false | 是否静音 | |
|
||||
| orientation | String | vertical | 画面方向，可选值有 vertical，horizontal | |
|
||||
| object-fit | String | contain | 填充模式，可选值:contain、fillCrop | |
|
||||
| background-mute | Boolean | false | 进入后台时是否静音 | |
|
||||
| sound-mode | string | speaker | 声音输出方式;可选值speaker、ear | 微信小程序、QQ小程序1.5.0（仅支持speaker） |
|
||||
| min-cache | Number | 1 | 最小缓冲区，单位s | |
|
||||
| max-cache | Number | 3 | 最大缓冲区，单位s | |
|
||||
| picture-in-picture-mode | string/Array | 3 | 设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]） | 微信小程序（2.10.3） |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @statechange | EventHandle | | 播放状态变化事件，detail = {code} | |
|
||||
| @netstatus | EventHandle | | 网络状态通知，detail = {info} | |
|
||||
| @fullscreenchange | EventHandle | | 全屏变化事件，detail = {direction, fullScreen}。 | |
|
||||
| @audiovolumenotify | EventHandle | | 播放音量大小通知，detail = {} | 微信小程序（2.10.0） |
|
||||
| @enterpictureinpicture | EventHandle | | 播放器进入小窗 | 微信小程序（2.11.0） |
|
||||
| @leavepictureinpicture | EventHandle | | 播放器退出小窗 | 2.11.0 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/live-player.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<live-player
|
||||
src="https://domain/pull_stream"
|
||||
autoplay
|
||||
@statechange="statechange"
|
||||
@error="error"
|
||||
style="width: 300px; height: 225px;"
|
||||
/>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<live-player
|
||||
src="https://domain/pull_stream"
|
||||
autoplay
|
||||
@statechange="statechange"
|
||||
@error="error"
|
||||
style="width: 300px; height: 225px;"
|
||||
/>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
methods:{
|
||||
statechange(e){
|
||||
console.log('live-player code:', e.detail.code)
|
||||
},
|
||||
error(e){
|
||||
console.error('live-player error:', e.detail.errMsg)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods:{
|
||||
statechange(e){
|
||||
console.log('live-player code:', e.detail.code)
|
||||
},
|
||||
error(e){
|
||||
console.error('live-player error:', e.detail.errMsg)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/live-player.html)
|
||||
@@ -0,0 +1,280 @@
|
||||
# live-pusher
|
||||
|
||||
## Instructions
|
||||
|
||||
推荐 uni直播 ，官方内置，使用简单，且价格便宜，更具高性价比！ 详情 。
|
||||
|
||||
实时音视频录制，也称直播推流。
|
||||
|
||||
平台差异说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<live-pusher />`（或 `<live-pusher></live-pusher>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性 | 类型 | 默认值 | 必填 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| url | string | | 是 | 推流地址，支持RTMP协议。 | |
|
||||
| mode | string | SD | 否 | 推流视频模式，可取值：SD（标清）, HD（高清）, FHD（超清）。 | |
|
||||
| aspect | string | 3:2 | 否 | 视频宽高比例 | |
|
||||
| muted | Boolean | false | 否 | 是否静音。 | |
|
||||
| enable-camera | Boolean | true | 否 | 开启摄像头。 | |
|
||||
| auto-focus | Boolean | true | 否 | 自动聚集。 | |
|
||||
| beauty | Number | 0 | 否 | 美颜，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。 | |
|
||||
| whiteness | Number | 0 | 否 | 美白，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。 | |
|
||||
| orientation | String | "vertical" | 否 | 画面方向 | |
|
||||
| min-bitrate | Number | 200 | 否 | 最小码率。 | |
|
||||
| max-bitrate | Number | 1000 | 否 | 最大码率。 | |
|
||||
| audio-quality | string | high | 否 | 高音质(48KHz)或低音质(16KHz)，值为high, low | 微信小程序1.7.0 |
|
||||
| waiting-image | string | | 否 | 进入后台时推流的等待画面 | 微信小程序1.7.0 |
|
||||
| waiting-image-hash | string | | 否 | 等待画面资源的MD5值 | 微信小程序1.7.0 |
|
||||
| zoom | boolean | false | 否 | 调整焦距 | 微信小程序2.1.0 |
|
||||
| device-position | string | front | 否 | 前置或后置，值为front, back | 微信小程序2.3.0 |
|
||||
| background-mute | boolean | false | 否 | 进入后台时是否静音 | 微信小程序1.7.0 |
|
||||
| remote-mirror | boolean | false | 否 | 设置推流画面是否镜像，产生的效果在 live-player 反应到 | 微信小程序2.10.0 |
|
||||
| local-mirror | string | auto | 否 | 控制本地预览画面是否镜像 | 微信小程序2.10.0 |
|
||||
| audio-reverb-type | number | 0 | 否 | 音频混响类型 | 微信小程序2.10.0 |
|
||||
| enable-mic | boolean | true | 否 | 开启或关闭麦克风 | 微信小程序2.10.0 |
|
||||
| enable-agc | boolean | false | 否 | 是否开启音频自动增益 | 微信小程序2.10.0 |
|
||||
| enable-ans | boolean | false | 否 | 是否开启音频噪声抑制 | 微信小程序2.10.0 |
|
||||
| audio-volume-type | string | voicecall | 否 | 音量类型 | 微信小程序2.10.0 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 参数 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| code | Number | |
|
||||
| message | string | |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/live-pusher.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<live-pusher id='livePusher' ref="livePusher" class="livePusher" url=""
|
||||
mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
|
||||
aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
|
||||
></live-pusher>
|
||||
<button class="btn" @click="start">开始推流</button>
|
||||
<button class="btn" @click="pause">暂停推流</button>
|
||||
<button class="btn" @click="resume">resume</button>
|
||||
<button class="btn" @click="stop">停止推流</button>
|
||||
<button class="btn" @click="snapshot">快照</button>
|
||||
<button class="btn" @click="startPreview">开启摄像头预览</button>
|
||||
<button class="btn" @click="stopPreview">关闭摄像头预览</button>
|
||||
<button class="btn" @click="switchCamera">切换摄像头</button>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<live-pusher id='livePusher' ref="livePusher" class="livePusher" url=""
|
||||
mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
|
||||
aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
|
||||
></live-pusher>
|
||||
<button class="btn" @click="start">开始推流</button>
|
||||
<button class="btn" @click="pause">暂停推流</button>
|
||||
<button class="btn" @click="resume">resume</button>
|
||||
<button class="btn" @click="stop">停止推流</button>
|
||||
<button class="btn" @click="snapshot">快照</button>
|
||||
<button class="btn" @click="startPreview">开启摄像头预览</button>
|
||||
<button class="btn" @click="stopPreview">关闭摄像头预览</button>
|
||||
<button class="btn" @click="switchCamera">切换摄像头</button>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onReady() {
|
||||
// 注意：需要在onReady中 或 onLoad 延时
|
||||
this.context = uni.createLivePusherContext("livePusher", this);
|
||||
},
|
||||
methods: {
|
||||
statechange(e) {
|
||||
console.log("statechange:" + JSON.stringify(e));
|
||||
},
|
||||
netstatus(e) {
|
||||
console.log("netstatus:" + JSON.stringify(e));
|
||||
},
|
||||
error(e) {
|
||||
console.log("error:" + JSON.stringify(e));
|
||||
},
|
||||
start: function() {
|
||||
this.context.start({
|
||||
success: (a) => {
|
||||
console.log("livePusher.start:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
close: function() {
|
||||
this.context.close({
|
||||
success: (a) => {
|
||||
console.log("livePusher.close:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
snapshot: function() {
|
||||
this.context.snapshot({
|
||||
success: (e) => {
|
||||
console.log(JSON.stringify(e));
|
||||
}
|
||||
});
|
||||
},
|
||||
resume: function() {
|
||||
this.context.resume({
|
||||
success: (a) => {
|
||||
console.log("livePusher.resume:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
pause: function() {
|
||||
this.context.pause({
|
||||
success: (a) => {
|
||||
console.log("livePusher.pause:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
stop: function() {
|
||||
this.context.stop({
|
||||
success: (a) => {
|
||||
console.log(JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
switchCamera: function() {
|
||||
this.context.switchCamera({
|
||||
success: (a) => {
|
||||
console.log("livePusher.switchCamera:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
startPreview: function() {
|
||||
this.context.startPreview({
|
||||
success: (a) => {
|
||||
console.log("livePusher.startPreview:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
stopPreview: function() {
|
||||
this.context.stopPreview({
|
||||
success: (a) => {
|
||||
console.log("livePusher.stopPreview:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onReady() {
|
||||
// 注意：需要在onReady中 或 onLoad 延时
|
||||
this.context = uni.createLivePusherContext("livePusher", this);
|
||||
},
|
||||
methods: {
|
||||
statechange(e) {
|
||||
console.log("statechange:" + JSON.stringify(e));
|
||||
},
|
||||
netstatus(e) {
|
||||
console.log("netstatus:" + JSON.stringify(e));
|
||||
},
|
||||
error(e) {
|
||||
console.log("error:" + JSON.stringify(e));
|
||||
},
|
||||
start: function() {
|
||||
this.context.start({
|
||||
success: (a) => {
|
||||
console.log("livePusher.start:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
close: function() {
|
||||
this.context.close({
|
||||
success: (a) => {
|
||||
console.log("livePusher.close:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
snapshot: function() {
|
||||
this.context.snapshot({
|
||||
success: (e) => {
|
||||
console.log(JSON.stringify(e));
|
||||
}
|
||||
});
|
||||
},
|
||||
resume: function() {
|
||||
this.context.resume({
|
||||
success: (a) => {
|
||||
console.log("livePusher.resume:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
pause: function() {
|
||||
this.context.pause({
|
||||
success: (a) => {
|
||||
console.log("livePusher.pause:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
stop: function() {
|
||||
this.context.stop({
|
||||
success: (a) => {
|
||||
console.log(JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
switchCamera: function() {
|
||||
this.context.switchCamera({
|
||||
success: (a) => {
|
||||
console.log("livePusher.switchCamera:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
startPreview: function() {
|
||||
this.context.startPreview({
|
||||
success: (a) => {
|
||||
console.log("livePusher.startPreview:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
stopPreview: function() {
|
||||
this.context.stopPreview({
|
||||
success: (a) => {
|
||||
console.log("livePusher.stopPreview:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/live-pusher.html)
|
||||
@@ -0,0 +1,128 @@
|
||||
# map
|
||||
|
||||
## Instructions
|
||||
|
||||
地图组件。
|
||||
|
||||
地图组件用于展示地图，而定位API只是获取坐标，请勿混淆两者。
|
||||
|
||||
平台差异说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<map />`（或 `<map></map>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| longitude | Number | | 中心经度 | |
|
||||
| latitude | Number | | 中心纬度 | |
|
||||
| scale | Number | 16 | 缩放级别，取值范围为3-20 | 高德地图缩放比例与微信小程序不同 |
|
||||
| theme | String | normal | 主题（satellite 或 normal）只在初始化时有效，不能动态变更（仅Android支持） | 京东小程序 |
|
||||
| min-scale | Number | 3 | 最小缩放级别 | App-nvue 3.1.0+、微信小程序2.13+、小红书小程序 |
|
||||
| max-scale | Number | 20 | 最大缩放级别 | App-nvue 3.1.0+、微信小程序2.13+、小红书小程序 |
|
||||
| layer-style | Number/String | 1 | 个性化地图 | App-nvue 3.1.0+、微信小程序2.13+、小红书小程序 |
|
||||
| markers | Array | | 标记点 | |
|
||||
| polyline | Array | | 路线 | 飞书小程序、小红书小程序不支持 |
|
||||
| circles | Array | | 圆 | 小红书小程序不支持 |
|
||||
| controls | Array | | 控件 | 小红书小程序不支持 |
|
||||
| include-points | Array | | 缩放视野以包含所有给定的坐标点 | App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序、京东小程序 |
|
||||
| zIndex | number | false | 显示层级 | 微信小程序2.3.0 |
|
||||
| enable-3D | Boolean | false | 是否显示3D楼块 | App-nvue 2.1.5+、微信小程序2.3.0、小红书小程序 |
|
||||
| show-compass | Boolean | false | 是否显示指南针 | App-nvue 2.1.5+、微信小程序2.3.0、小红书小程序 |
|
||||
| enable-zoom | Boolean | true | 是否支持缩放 | App-nvue 2.1.5+、微信小程序2.3.0 |
|
||||
| enable-scroll | Boolean | true | 是否支持拖动 | App-nvue 2.1.5+、微信小程序2.3.0 |
|
||||
| enable-rotate | Boolean | false | 是否支持旋转 | App-nvue 2.1.5+、微信小程序2.3.0、小红书小程序 |
|
||||
| rotate | Number | 0 | 旋转角度(范围0-360)地图正北和设备 y 轴角度的夹角 | 微信小程序2.5.0、支付宝小程序、抖音小程序、QQ小程序、小红书小程序 |
|
||||
| skew | Number | 0 | 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 | 微信小程序2.5.0、支付宝小程序、抖音小程序、QQ小程序、小红书小程序 |
|
||||
| enable-overlooking | Boolean | false | 是否开启俯视 | App-nvue 2.1.5+、微信小程序2.3.0 |
|
||||
| enable-satellite | Boolean | false | 是否开启卫星图 | App-nvue 2.1.5+、微信小程序2.7.0 |
|
||||
| enable-traffic | Boolean | false | 是否开启实时路况 | App-nvue 2.1.5+、微信小程序2.7.0 |
|
||||
| enable-poi | Boolean | false | 是否展示 POI 点 | App-nvue 3.1.0+ |
|
||||
| enable-building | Boolean | false | 是否展示建筑物 | App-nvue 3.1.0+ 支持 ( 废除原enable-3D属性 高德地图默认开启建筑物就是3D无法设置 ) |
|
||||
| show-location | Boolean | | 显示带有方向的当前定位点 | 微信小程序、H5、百度小程序、支付宝小程序、京东小程序、元服务 |
|
||||
| polygons（支付宝为: polygon） | Array. <polygon> | | 多边形 | App-nvue 2.1.5+、App-vue 3.4.3+、H5 3.4.3+、微信小程序、百度小程序、支付宝小程序、元服务 |
|
||||
| enable-indoorMap | Boolean | false | 是否展示室内地图 | App-nvue 3.1.0+ |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @markertap | EventHandle | | 点击标记点时触发，e.detail = {markerId} | App-nvue 2.3.3+、H5、微信小程序、支付宝小程序 （App和H5平台需要指定 marker 对象属性 id）、小红书小程序 |
|
||||
| @labeltap | EventHandle | | 点击label时触发，e.detail = {markerId} | 微信小程序2.9.0、小红书小程序 |
|
||||
| @callouttap | EventHandle | | 点击标记点对应的气泡时触发，e.detail = {markerId} | |
|
||||
| @controltap | EventHandle | | 点击控件时触发，e.detail = {controlId} | |
|
||||
| @regionchange | EventHandle | | 视野发生变化时触发 | 微信小程序、H5、百度小程序、支付宝小程序、京东小程序、元服务 |
|
||||
| @tap | EventHandle | | 点击地图时触发; App-nvue、微信小程序2.9支持返回经纬度 | |
|
||||
| @updated | EventHandle | | 在地图渲染更新完成时触发 | 微信小程序、H5、百度小程序 |
|
||||
| @anchorpointtap | EventHandle | | 点击定位标时触发，e.detail = {longitude, latitude} | App-nvue 3.1.0+、微信小程序2.13+ |
|
||||
| @poitap | EventHandle | | 点击地图poi点时触发，e.detail = {name, longitude, latitude} | 微信小程序2.3.0+ |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/map.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-body">
|
||||
<view class="page-section page-section-gap">
|
||||
<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
|
||||
</map>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-body">
|
||||
<view class="page-section page-section-gap">
|
||||
<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
|
||||
</map>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id:0, // 使用 marker点击事件 需要填写id
|
||||
title: 'map',
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
covers: [{
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
iconPath: '../../../static/location.png'
|
||||
}, {
|
||||
latitude: 39.90,
|
||||
longitude: 116.39,
|
||||
iconPath: '../../../static/location.png'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/map.html)
|
||||
@@ -0,0 +1,70 @@
|
||||
# match-media
|
||||
|
||||
## Instructions
|
||||
|
||||
media query 匹配检测节点。
|
||||
|
||||
类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。
|
||||
|
||||
例如在match-media组件中放置一个侧边栏，媒体查询规则设置为宽屏才显示，就可以实现在PC宽屏显示该侧边栏，而在手机窄屏中不显示侧边栏的效果。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<match-media />`（或 `<match-media></match-media>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| min-width | number | | 否 | 页面最小宽度（ px 为单位） |
|
||||
| max-width | number | | 否 | 页面最大宽度（ px 为单位） |
|
||||
| width | number | | 否 | 页面宽度（ px 为单位） |
|
||||
| min-height | number | | 否 | 页面最小高度（ px 为单位） |
|
||||
| max-height | number | | 否 | 页面最大高度（ px 为单位） |
|
||||
| height | number | | 否 | 页面高度（ px 为单位） |
|
||||
| orientation | string | | 否 | 屏幕方向（ landscape 或 portrait ） |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/match-media.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/match-media.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<match-media :min-width="375" :max-width="800" >
|
||||
<view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view>
|
||||
</match-media>
|
||||
|
||||
<match-media :min-height="400" :orientation="landscape">
|
||||
<view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
|
||||
</match-media>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<match-media :min-width="375" :max-width="800" >
|
||||
<view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view>
|
||||
</match-media>
|
||||
|
||||
<match-media :min-height="400" :orientation="landscape">
|
||||
<view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
|
||||
</match-media>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/match-media.html)
|
||||
@@ -0,0 +1,34 @@
|
||||
# movable-area
|
||||
|
||||
## Instructions
|
||||
|
||||
可拖动区域
|
||||
|
||||
由于app和小程序的架构是逻辑层与视图层分离，使用js监听拖动时会引发逻辑层和视图层的频繁通讯，影响性能。为了方便高性能的实现拖动，平台特封装了 movable-area 组件。
|
||||
|
||||
movable-area 指代可拖动的范围，在其中内嵌 movable-view 组件用于指示可拖动的区域。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<movable-area />`（或 `<movable-area></movable-area>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| scale-area | Boolean | false | 当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/movable-area.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/movable-area.html`
|
||||
|
||||
### Examples
|
||||
|
||||
Examples are available in the official docs: `https://uniapp.dcloud.net.cn/component/movable-area.html`
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/movable-area.html)
|
||||
@@ -0,0 +1,138 @@
|
||||
# movable-view
|
||||
|
||||
## Instructions
|
||||
|
||||
可移动的视图容器，在页面中可以拖拽滑动或双指缩放。
|
||||
|
||||
movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。
|
||||
|
||||
平台差异说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<movable-view />`（或 `<movable-view></movable-view>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| direction | String | none | movable-view的移动方向，属性值有all、vertical、horizontal、none | |
|
||||
| inertia | Boolean | false | movable-view是否带有惯性 | |
|
||||
| out-of-bounds | Boolean | false | 超过可移动区域后，movable-view是否还可以移动 | |
|
||||
| x | Number / String | | 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画 | |
|
||||
| y | Number / String | | 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画 | |
|
||||
| damping | Number | 20 | 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快 | 360小程序不支持 |
|
||||
| friction | Number | 2 | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 | 360小程序不支持 |
|
||||
| disabled | Boolean | false | 是否禁用 | |
|
||||
| scale | Boolean | false | 是否支持双指缩放，默认缩放手势生效区域是在movable-view内 | 360小程序不支持 |
|
||||
| scale-min | Number | 0.1/0.5 | 定义缩放倍数最小值 | 0.1 倍需要 App(4.51+)、H5(4.51+)、微信小程序(4.51+) |
|
||||
| scale-max | Number | 10 | 定义缩放倍数最大值 | |
|
||||
| scale-value | Number | 1 | 定义缩放倍数，取值范围为 0.1/0.5 - 10 | 0.1 倍需要 App(4.51+)、H5(4.51+)、微信小程序(4.51+) |
|
||||
| animation | Boolean | true | 是否使用动画 | |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @change | EventHandle | | 拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData） | |
|
||||
| @scale | EventHandle | | 缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}， | |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/movable-view.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 1
|
||||
<text>\nmovable-view 区域小于 movable-area</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
|
||||
</movable-area>
|
||||
<view @tap="tap" class="uni-link uni-center uni-common-mt">
|
||||
点击这里移动至 (30px, 30px)
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 2
|
||||
<text>\nmovable-view区域大于movable-area</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view class="max" direction="all">text</movable-view>
|
||||
</movable-area>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 1
|
||||
<text>\nmovable-view 区域小于 movable-area</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
|
||||
</movable-area>
|
||||
<view @tap="tap" class="uni-link uni-center uni-common-mt">
|
||||
点击这里移动至 (30px, 30px)
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 2
|
||||
<text>\nmovable-view区域大于movable-area</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view class="max" direction="all">text</movable-view>
|
||||
</movable-area>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
old: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tap: function(e) {
|
||||
this.x = this.old.x
|
||||
this.y = this.old.y
|
||||
this.$nextTick(function() {
|
||||
this.x = 30
|
||||
this.y = 30
|
||||
})
|
||||
},
|
||||
onChange: function(e) {
|
||||
this.old.x = e.detail.x
|
||||
this.old.y = e.detail.y
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/movable-view.html)
|
||||
@@ -0,0 +1,131 @@
|
||||
# navigation-bar
|
||||
|
||||
## Instructions
|
||||
|
||||
页面导航条配置节点，用于指定导航栏的一些属性。只能是 page-meta 组件内的第一个节点，需要配合它一同使用。
|
||||
|
||||
平台差异说明
|
||||
|
||||
从HBuilderX 2.9.3起，编译到所有平台均支持 navigation-bar ，但编译到微信时，受微信基础库版本限制；编译到其他平台不受平台版本限制。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<navigation-bar />`（或 `<navigation-bar></navigation-bar>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| title | string | | 否 | 导航条标题 | 微信基础库 2.9.0 |
|
||||
| title-icon | string | | 否 | 标题图标，图标路径如"./img/t.png"，仅支持本地文件路径， 相对路径，相对于当前页面的host位置，固定宽高为逻辑像素值"34px"。 要求图片的宽高相同。 注意：设置标题图标后标题将居左显示。 | App 2.6.7+ |
|
||||
| title-icon-radius | string | 无圆角 | 否 | 标题图标圆角，取值格式为"XXpx"，其中XX为像素值（逻辑像素），如"10px"表示10像素半径圆角。 | App 2.6.7+ |
|
||||
| subtitle-text | string | | 否 | 副标题文字内容，设置副标后将显示两行标题，副标显示在主标题（titleText）下方。 注意：设置副标题后将居左显示 | App 2.6.7+ |
|
||||
| subtitle-size | string | "auto" | 否 | 副标题文字字体大小，字体大小单位为像素，如"14px"表示字体大小为14像素，默认值为12像素。 | App 2.6.7+ |
|
||||
| subtitle-color | string | | 否 | 副标题文字颜色，颜色值格式为"#RRGGBB"和"rgba(R,G,B,A)"，如"#FF0000"表示标题文字颜色为红色。 默认值与主标题文字颜色一致 | App 2.6.7+ |
|
||||
| subtitle-overflow | string | "ellipsis" | 否 | 标题文字超出显示区域时处理方式，可取值： "clip" - 超出显示区域时内容裁剪； "ellipsis" - 超出显示区域时尾部显示省略标记（...）。 | App 2.6.7+ |
|
||||
| title-align | string | "auto" | 否 | 可取值： "center"-居中对齐； "left"-居左对齐； "auto"-根据平台自动选择（Android平台居左对齐，iOS平台居中对齐） | App 2.6.7+ |
|
||||
| background-image | string | | 否 | 支持以下类型： 背景图片路径 - 如"./img/t.png"，仅支持本地文件路径， 相对路径，相对于当前页面的host位置，根据实际标题栏宽高拉伸绘制； 渐变色 - 仅支持线性渐变，两种颜色的渐变，如“linear-gradient(to top, #a80077, #66ff00)”， 其中第一个参数为渐变方向，可取值： "to right"表示从左向右渐变， “to left"表示从右向左渐变， “to bottom"表示从上到下渐变， “to top"表示从下到上渐变， “to bottom right"表示从左上角到右下角， “to top left"表示从右下角到左上角 | App 2.6.7+ |
|
||||
| background-repeat | string | | 否 | 仅在backgroundImage设置为图片路径时有效。 可取值： "repeat" - 背景图片在垂直方向和水平方向平铺； "repeat-x" - 背景图片在水平方向平铺，垂直方向拉伸； “repeat-y” - 背景图片在垂直方向平铺，水平方向拉伸； “no-repeat” - 背景图片在垂直方向和水平方向都拉伸。 默认使用 “no-repeat" | App 2.6.7+ |
|
||||
| blur-effect | string | "none" | 否 | 此效果将会高斯模糊显示标题栏后的内容，仅在type为"transparent"或"float"时有效。 可取值： "dark" - 暗风格模糊，对应iOS原生UIBlurEffectStyleDark效果； "extralight" - 高亮风格模糊，对应iOS原生UIBlurEffectStyleExtraLight效果； "light" - 亮风格模糊，对应iOS原生UIBlurEffectStyleLight效果； "none" - 无模糊效果。 注意：使用模糊效果时应避免设置背景颜色，设置背景颜色可能覆盖模糊效果。 | App 2.6.7+ |
|
||||
| loading | string | false | 否 | 是否在导航条显示 loading 加载提示 | 微信基础库 2.9.0 |
|
||||
| front-color | string | | 否 | 导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000 | 微信基础库 2.9.0 |
|
||||
| background-color | string | | 否 | 导航条背景颜色值，有效值为十六进制颜色 | 微信基础库 2.9.0 |
|
||||
| color-animation-duration | number | 0 | 否 | 改变导航栏颜色时的动画时长，默认为 0 （即没有动画效果） | 微信基础库 2.9.0 |
|
||||
| color-animation-timing-func | string | "linear" | 否 | 改变导航栏颜色时的动画方式，支持 linear 、 easeIn 、 easeOut 和 easeInOut | 微信基础库 2.9.0 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/navigation-bar.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/navigation-bar.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<page-meta>
|
||||
<navigation-bar
|
||||
:title="nbTitle"
|
||||
:title-icon="titleIcon"
|
||||
:title-icon-radius="titleIconRadius"
|
||||
:subtitle-text="subtitleText"
|
||||
:subtitle-color="nbFrontColor"
|
||||
:loading="nbLoading"
|
||||
:front-color="nbFrontColor"
|
||||
:background-color="nbBackgroundColor"
|
||||
:color-animation-duration="2000"
|
||||
color-animation-timing-func="easeIn"
|
||||
/>
|
||||
</page-meta>
|
||||
<view class="content"></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nbTitle: '标题',
|
||||
titleIcon: '/static/logo.png',
|
||||
titleIconRadius: '20px',
|
||||
subtitleText: 'subtitleText',
|
||||
nbLoading: false,
|
||||
nbFrontColor: '#000000',
|
||||
nbBackgroundColor: '#ffffff'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<page-meta>
|
||||
<navigation-bar
|
||||
:title="nbTitle"
|
||||
:title-icon="titleIcon"
|
||||
:title-icon-radius="titleIconRadius"
|
||||
:subtitle-text="subtitleText"
|
||||
:subtitle-color="nbFrontColor"
|
||||
:loading="nbLoading"
|
||||
:front-color="nbFrontColor"
|
||||
:background-color="nbBackgroundColor"
|
||||
:color-animation-duration="2000"
|
||||
color-animation-timing-func="easeIn"
|
||||
/>
|
||||
</page-meta>
|
||||
<view class="content"></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nbTitle: '标题',
|
||||
titleIcon: '/static/logo.png',
|
||||
titleIconRadius: '20px',
|
||||
subtitleText: 'subtitleText',
|
||||
nbLoading: false,
|
||||
nbFrontColor: '#000000',
|
||||
nbBackgroundColor: '#ffffff'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/navigation-bar.html)
|
||||
@@ -0,0 +1,141 @@
|
||||
# navigator
|
||||
|
||||
## Instructions
|
||||
|
||||
页面跳转。
|
||||
|
||||
该组件类似HTML中的 <a> 组件，但只能跳转本地页面。目标页面必须在pages.json中注册。
|
||||
|
||||
除了组件方式，API方式也可以实现页面跳转，另见： https://uniapp.dcloud.io/api/router?id=navigateto
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<navigator />`（或 `<navigator></navigator>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| url | String | | 应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后缀 | |
|
||||
| open-type | String | navigate | 跳转方式 | |
|
||||
| delta | Number | | 当 open-type 为 'navigateBack' 时有效，表示回退的层数 | 支付宝小程序不支持 |
|
||||
| animation-type | String | pop-in/out | 当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见： 窗口动画 | App |
|
||||
| animation-duration | Number | 300 | 当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。 | App |
|
||||
| render-link | boolean | true | 是否给 navigator 组件加一层 a 标签控制 ssr 渲染 | web3.7.6+、App-vue3.7.6+ |
|
||||
| hover-class | String | navigator-hover | 指定点击时的样式类，当hover-class="none"时，没有点击态效果 | |
|
||||
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | 微信小程序、小红书小程序 |
|
||||
| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 | |
|
||||
| hover-stay-time | Number | 600 | 手指松开后点击态保留时间，单位毫秒 | |
|
||||
| target | String | self | 在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram | 微信2.0.7+、百度2.5.2+、QQ |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/navigator.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
| 值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- |
|
||||
| navigate | 对应 uni.navigateTo 的功能，保留当前页面，跳转到应用内的某个页面 | |
|
||||
| redirect | 对应 uni.redirectTo 的功能，关闭当前页面，跳转到应用内的某个页面 | |
|
||||
| switchTab | 对应 uni.switchTab 的功能，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 | |
|
||||
| reLaunch | 对应 uni.reLaunch 的功能，关闭所有页面，打开到应用内的某个页面 | 抖音小程序与飞书小程序不支持 |
|
||||
| navigateBack | 对应 uni.navigateBack 的功能，关闭当前页面，返回上一页面或多级页面 | |
|
||||
| exit | 退出小程序，target="miniProgram"时生效 | 微信2.1.0+、百度2.5.2+、QQ1.4.7+、小红书小程序 |
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-body">
|
||||
<view class="btn-area">
|
||||
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
|
||||
<button type="default">跳转到新页面</button>
|
||||
</navigator>
|
||||
<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
|
||||
<button type="default">在当前页打开</button>
|
||||
</navigator>
|
||||
<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
|
||||
<button type="default">跳转tab页面</button>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// navigate.vue页面接受参数
|
||||
export default {
|
||||
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
|
||||
console.log(option.id); //打印出上个页面传递的参数。
|
||||
console.log(option.name); //打印出上个页面传递的参数。
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-body">
|
||||
<view class="btn-area">
|
||||
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
|
||||
<button type="default">跳转到新页面</button>
|
||||
</navigator>
|
||||
<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
|
||||
<button type="default">在当前页打开</button>
|
||||
</navigator>
|
||||
<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
|
||||
<button type="default">跳转tab页面</button>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// navigate.vue页面接受参数
|
||||
export default {
|
||||
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
|
||||
console.log(option.id); //打印出上个页面传递的参数。
|
||||
console.log(option.name); //打印出上个页面传递的参数。
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
// navigate.vue页面接受参数
|
||||
onLoad: function (option) {
|
||||
const item = JSON.parse(decodeURIComponent(option.item));
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```javascript
|
||||
// navigate.vue页面接受参数
|
||||
onLoad: function (option) {
|
||||
const item = JSON.parse(decodeURIComponent(option.item));
|
||||
}
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/navigator.html)
|
||||
@@ -0,0 +1,214 @@
|
||||
# page-meta
|
||||
|
||||
## Instructions
|
||||
|
||||
页面属性配置节点，用于指定页面的一些属性、监听页面事件。可部分替代pages.json的功能。
|
||||
|
||||
从微信基础库2.9.0开始，新增了 page-meta 组件，它是一个特殊的标签，有点类似html里的header标签。页面的背景色、原生导航栏的参数，都可以写在 page-meta 里。HBuilderX 2.6.3+ 支持了这个组件，并且全平台都实现了。
|
||||
|
||||
从某种意义讲， page-meta 对pages.json有一定替代作用，可以让页面的配置和页面内容代码写在一个vue文件中。它还可以实现通过变量绑定来控制页面配置。但它的性能不如pages.json的配置，在新页面加载时，渲染速度还是pages.json方式的写法更快。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<page-meta />`（或 `<page-meta></page-meta>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性 | 类型 | 默认值 | 必填 | 说明 | 版本要求/平台差异说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| background-text-style | string | | 否 | 下拉背景字体、loading 图的样式，仅支持 dark 和 light | 微信基础库 2.9.0 |
|
||||
| background-color | string | | 否 | 窗口的背景色，必须为十六进制颜色值 | 微信基础库 2.9.0 |
|
||||
| background-color-top | string | | 否 | 顶部窗口的背景色，必须为十六进制颜色值，仅 iOS 支持 | 微信基础库 2.9.0 |
|
||||
| background-color-bottom | string | | 否 | 底部窗口的背景色，必须为十六进制颜色值，仅 iOS 支持 | 微信基础库 2.9.0 |
|
||||
| scroll-top | string | "" | 否 | 滚动位置，可以使用 px 或者 rpx 为单位，在被设置时，页面会滚动到对应位置 | 微信基础库 2.9.0、H5 3.7.0、App-vue 3.7.0 |
|
||||
| scroll-duration | number | 300 | 否 | 滚动动画时长 | 微信基础库 2.9.0 |
|
||||
| page-style | string | "" | 否 | 页面根节点样式，页面根节点是所有页面节点的祖先节点，相当于 HTML 中的 body 节点 | 微信基础库 2.9.0 |
|
||||
| root-font-size | string | "" | 否 | 页面的根字体大小，页面中的所有 rem 单位，将使用这个字体大小作为参考值，即 1rem 等于这个字体大小 | 微信基础库 2.9.0 |
|
||||
| enable-pull-down-refresh | Boolean | "" | 否 | 是否开启下拉刷新 | App 2.6.7 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 必填 | 说明 | 版本要求/平台差异说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| @resize | eventhandle | | 否 | 页面尺寸变化时会触发 resize 事件， event.detail = { size: { windowWidth, windowHeight } } | 微信基础库 2.9.0 |
|
||||
| @scroll | eventhandle | | 否 | 页面滚动时会触发 scroll 事件， event.detail = { scrollTop } | 微信基础库 2.9.0 |
|
||||
| @scrolldone | eventhandle | | 否 | 如果通过改变 scroll-top 属性来使页面滚动，页面滚动结束后会触发 scrolldone 事件 | 微信基础库 2.9.0 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/page-meta.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<page-meta
|
||||
:background-text-style="bgTextStyle"
|
||||
:background-color="bgColor"
|
||||
:background-color-top="bgColorTop"
|
||||
:background-color-bottom="bgColorBottom"
|
||||
:scroll-top="scrollTop"
|
||||
page-style="color: green"
|
||||
root-font-size="16px"
|
||||
>
|
||||
<head>
|
||||
// 仅vue3 ssr支持，此节点下的元素会被拷贝到h5页面的head标签下，可以利用此特性进行seo优化
|
||||
<meta name="keyword" :content="title" />
|
||||
</head>
|
||||
</page-meta>
|
||||
<view class="content"> </view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
};
|
||||
},
|
||||
serverPrefetch() {
|
||||
// 仅vue3版本支持
|
||||
this.keyword = "ServerKeyword";
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<page-meta
|
||||
:background-text-style="bgTextStyle"
|
||||
:background-color="bgColor"
|
||||
:background-color-top="bgColorTop"
|
||||
:background-color-bottom="bgColorBottom"
|
||||
:scroll-top="scrollTop"
|
||||
page-style="color: green"
|
||||
root-font-size="16px"
|
||||
>
|
||||
<head>
|
||||
// 仅vue3 ssr支持，此节点下的元素会被拷贝到h5页面的head标签下，可以利用此特性进行seo优化
|
||||
<meta name="keyword" :content="title" />
|
||||
</head>
|
||||
</page-meta>
|
||||
<view class="content"> </view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
};
|
||||
},
|
||||
serverPrefetch() {
|
||||
// 仅vue3版本支持
|
||||
this.keyword = "ServerKeyword";
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<page-meta
|
||||
:background-text-style="bgTextStyle"
|
||||
:background-color="bgColor"
|
||||
:background-color-top="bgColorTop"
|
||||
:background-color-bottom="bgColorBottom"
|
||||
:scroll-top="scrollTop"
|
||||
page-style="color: green"
|
||||
root-font-size="16px"
|
||||
>
|
||||
<navigation-bar
|
||||
:title="nbTitle"
|
||||
:loading="nbLoading"
|
||||
:front-color="nbFrontColor"
|
||||
:background-color="nbBackgroundColor"
|
||||
/>
|
||||
</page-meta>
|
||||
<view class="content">
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgTextStyle: 'dark',
|
||||
scrollTop: '200rpx',
|
||||
bgColor: '#ff0000',
|
||||
bgColorTop: '#00ff00',
|
||||
bgColorBottom: '#0000ff',
|
||||
nbTitle: '标题',
|
||||
nbLoading: false,
|
||||
nbFrontColor: '#000000',
|
||||
nbBackgroundColor: '#ffffff'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<page-meta
|
||||
:background-text-style="bgTextStyle"
|
||||
:background-color="bgColor"
|
||||
:background-color-top="bgColorTop"
|
||||
:background-color-bottom="bgColorBottom"
|
||||
:scroll-top="scrollTop"
|
||||
page-style="color: green"
|
||||
root-font-size="16px"
|
||||
>
|
||||
<navigation-bar
|
||||
:title="nbTitle"
|
||||
:loading="nbLoading"
|
||||
:front-color="nbFrontColor"
|
||||
:background-color="nbBackgroundColor"
|
||||
/>
|
||||
</page-meta>
|
||||
<view class="content">
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgTextStyle: 'dark',
|
||||
scrollTop: '200rpx',
|
||||
bgColor: '#ff0000',
|
||||
bgColorTop: '#00ff00',
|
||||
bgColorBottom: '#0000ff',
|
||||
nbTitle: '标题',
|
||||
nbLoading: false,
|
||||
nbFrontColor: '#000000',
|
||||
nbBackgroundColor: '#ffffff'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/page-meta.html)
|
||||
@@ -0,0 +1,154 @@
|
||||
# picker-view
|
||||
|
||||
## Instructions
|
||||
|
||||
嵌入页面的滚动选择器。
|
||||
|
||||
相对于 picker 组件， picker-view 拥有更强的灵活性。当需要对自定义选择的弹出方式和UI表现时，往往需要使用 picker-view 。
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<picker-view />`（或 `<picker-view></picker-view>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 平台差异说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| value | Array＜Number＞ | 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 | |
|
||||
| indicator-style | String | 设置选择器中间选中框的样式 | |
|
||||
| indicator-class | String | 设置选择器中间选中框的类名，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ | app-nvue与抖音小程序与飞书小程序不支持 |
|
||||
| mask-style | String | 设置蒙层的样式 | |
|
||||
| mask-top-style | String | 设置蒙层上半部分的样式（使用 background-image 覆盖） | 仅 app-nvue（3.6.7+） 支持 |
|
||||
| mask-bottom-style | String | 设置蒙层下半部分的样式（使用 background-image 覆盖） | 仅 app-nvue（3.6.7+） 支持 |
|
||||
| mask-class | String | 设置蒙层的类名 | app-nvue与抖音小程序与飞书小程序不支持 |
|
||||
| immediate-change | Boolean | 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。 | 微信小程序 2.21.1 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 平台差异说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @change | EventHandle | 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始） | |
|
||||
| @pickstart | eventhandle | 当滚动选择开始时候触发事件 | 微信小程序2.3.1、快手小程序、小红书小程序 |
|
||||
| @pickend | eventhandle | 当滚动选择结束时候触发事件 | 微信小程序2.3.1、快手小程序、小红书小程序 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/picker-view.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">日期：{{year}}年{{month}}月{{day}}日</view>
|
||||
</view>
|
||||
<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">日期：{{year}}年{{month}}月{{day}}日</view>
|
||||
</view>
|
||||
<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data: function () {
|
||||
const date = new Date()
|
||||
const years = []
|
||||
const year = date.getFullYear()
|
||||
const months = []
|
||||
const month = date.getMonth() + 1
|
||||
const days = []
|
||||
const day = date.getDate()
|
||||
for (let i = 1990; i <= date.getFullYear(); i++) {
|
||||
years.push(i)
|
||||
}
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
months.push(i)
|
||||
}
|
||||
for (let i = 1; i <= 31; i++) {
|
||||
days.push(i)
|
||||
}
|
||||
return {
|
||||
title: 'picker-view',
|
||||
years,
|
||||
year,
|
||||
months,
|
||||
month,
|
||||
days,
|
||||
day,
|
||||
value: [9999, month - 1, day - 1],
|
||||
visible: true,
|
||||
indicatorStyle: `height: 50px;`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindChange: function (e) {
|
||||
const val = e.detail.value
|
||||
this.year = this.years[val[0]]
|
||||
this.month = this.months[val[1]]
|
||||
this.day = this.days[val[2]]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<style>
|
||||
.picker-view {
|
||||
width: 750rpx;
|
||||
height: 600rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.item {
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/picker-view.html)
|
||||
@@ -0,0 +1,197 @@
|
||||
# picker
|
||||
|
||||
## Instructions
|
||||
|
||||
从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。
|
||||
|
||||
mode = selector
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<picker />`（或 `<picker></picker>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| range | Array / Array<Object> | [] | mode为 selector 或 multiSelector 时，range 有效 | |
|
||||
| range-key | String | | 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | |
|
||||
| value | Number | 0 | value 的值表示选择了 range 中的第几个（下标从 0 开始） | |
|
||||
| selector-type | String | auto | UI类型,仅大屏时该属性生效，支持 picker、select、auto，默认在 iPad 以 picker 样式展示而在 PC 以 select 样式展示 | H5 2.9.9+ |
|
||||
| disabled | Boolean | false | 是否禁用 | 快手小程序不支持 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @change | EventHandle | | value 改变时触发 change 事件，event.detail = {value: value} | |
|
||||
| @cancel | EventHandle | | 取消选择或点遮罩层收起 picker 时触发 | 快手小程序不支持 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/picker.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-title uni-common-pl">地区选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker @change="bindPickerChange" :value="index" :range="array">
|
||||
<view class="uni-input">{{array[index]}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-pl">时间选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
|
||||
<view class="uni-input">{{time}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-pl">日期选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
|
||||
<view class="uni-input">{{date}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-title uni-common-pl">地区选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker @change="bindPickerChange" :value="index" :range="array">
|
||||
<view class="uni-input">{{array[index]}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-pl">时间选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
|
||||
<view class="uni-input">{{time}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-pl">日期选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
|
||||
<view class="uni-input">{{date}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const currentDate = this.getDate({
|
||||
format: true
|
||||
})
|
||||
return {
|
||||
title: 'picker',
|
||||
array: ['中国', '美国', '巴西', '日本'],
|
||||
index: 0,
|
||||
date: currentDate,
|
||||
time: '12:01'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
startDate() {
|
||||
return this.getDate('start');
|
||||
},
|
||||
endDate() {
|
||||
return this.getDate('end');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindPickerChange: function(e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||||
this.index = e.detail.value
|
||||
},
|
||||
bindDateChange: function(e) {
|
||||
this.date = e.detail.value
|
||||
},
|
||||
bindTimeChange: function(e) {
|
||||
this.time = e.detail.value
|
||||
},
|
||||
getDate(type) {
|
||||
const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
if (type === 'start') {
|
||||
year = year - 10;
|
||||
} else if (type === 'end') {
|
||||
year = year + 10;
|
||||
}
|
||||
month = month > 9 ? month : '0' + month;
|
||||
day = day > 9 ? day : '0' + day;
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/picker.html)
|
||||
@@ -0,0 +1,147 @@
|
||||
# progress
|
||||
|
||||
## Instructions
|
||||
|
||||
进度条。
|
||||
|
||||
属性说明
|
||||
|
||||
示例 查看演示
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<progress />`（或 `<progress></progress>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| percent | Number | 无 | 百分比0~100 | |
|
||||
| show-info | Boolean | false | 在进度条右侧显示百分比 | |
|
||||
| border-radius | Number/String | 0 | 圆角大小 | app-nvue、微信基础库2.3.1+、QQ小程序、快手小程序、京东小程序、小红书小程序 |
|
||||
| font-size | Number/String | 16 | 右侧百分比字体大小 | app-nvue、微信基础库2.3.1+、QQ小程序、京东小程序、小红书小程序 |
|
||||
| stroke-width | Number/String | 6 | 进度条线的宽度，接受 px 和 rpx 值 | |
|
||||
| activeColor | Color | #09BB07（百度为#E6E6E6） | 已选择的进度条的颜色 | |
|
||||
| backgroundColor | Color | #EBEBEB | 未选择的进度条的颜色 | |
|
||||
| active | Boolean | false | 进度条从左往右的动画 | |
|
||||
| active-mode | String | backwards | backwards: 动画从头播；forwards：动画从上次结束点接着播 | App、H5、微信小程序、QQ小程序、快手小程序、京东小程序、小红书小程序 |
|
||||
| duration | Number | 30 | 进度增加1%所需毫秒数 | App-nvue2.6.1+、微信基础库2.8.2+、H5 3.1.11+、App-Vue 3.1.11+、快手小程序、京东小程序、小红书小程序 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @activeend | EventHandle | | 动画完成事件 | 微信小程序、京东小程序、小红书小程序 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/progress.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[0]" show-info stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[1]" stroke-width="3" />
|
||||
<uni-icons type="close" class="progress-cancel" color="#dd524d"></uni-icons>
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[2]" stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[3]" activeColor="#10AEFF" stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-control">
|
||||
<button type="primary" @click="setProgress">设置进度</button>
|
||||
<button type="warn" @click="clearProgress">清除进度</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[0]" show-info stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[1]" stroke-width="3" />
|
||||
<uni-icons type="close" class="progress-cancel" color="#dd524d"></uni-icons>
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[2]" stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[3]" activeColor="#10AEFF" stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-control">
|
||||
<button type="primary" @click="setProgress">设置进度</button>
|
||||
<button type="warn" @click="clearProgress">清除进度</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pgList: [0, 0, 0, 0]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setProgress() {
|
||||
this.pgList = [20, 40, 60, 80]
|
||||
},
|
||||
clearProgress() {
|
||||
this.pgList = [0, 0, 0, 0]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<style>
|
||||
.progress-box {
|
||||
display: flex;
|
||||
height: 50rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.uni-icon {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.progress-cancel {
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
|
||||
.progress-control button {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/progress.html)
|
||||
@@ -0,0 +1,138 @@
|
||||
# radio
|
||||
|
||||
## Instructions
|
||||
|
||||
单项选择器，内部由多个 <radio> 组成。通过把多个 radio 包裹在一个 radio-group 下，实现这些 radio 的单选。
|
||||
|
||||
属性说明
|
||||
|
||||
单选项目。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<radio />`（或 `<radio></radio>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
See official docs for full properties list: `https://uniapp.dcloud.net.cn/component/radio.html`
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @change | EventHandle | | <radio-group> 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/radio.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">默认样式</view>
|
||||
<view>
|
||||
<label class="radio"><radio value="r1" :checked="true" />选中</label>
|
||||
<label class="radio"><radio value="r2" />未选中</label>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view>
|
||||
<view class="uni-list">
|
||||
<radio-group @change="radioChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
|
||||
<view>
|
||||
<radio :value="item.value" :checked="index === current" />
|
||||
</view>
|
||||
<view>{{item.name}}</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">默认样式</view>
|
||||
<view>
|
||||
<label class="radio"><radio value="r1" :checked="true" />选中</label>
|
||||
<label class="radio"><radio value="r2" />未选中</label>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view>
|
||||
<view class="uni-list">
|
||||
<radio-group @change="radioChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
|
||||
<view>
|
||||
<radio :value="item.value" :checked="index === current" />
|
||||
</view>
|
||||
<view>{{item.name}}</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [{
|
||||
value: 'USA',
|
||||
name: '美国',
|
||||
checked: 'true'
|
||||
},
|
||||
{
|
||||
value: 'CHN',
|
||||
name: '中国'
|
||||
},
|
||||
{
|
||||
value: 'BRA',
|
||||
name: '巴西'
|
||||
},
|
||||
{
|
||||
value: 'JPN',
|
||||
name: '日本'
|
||||
},
|
||||
{
|
||||
value: 'ENG',
|
||||
name: '英国'
|
||||
},
|
||||
{
|
||||
value: 'FRA',
|
||||
name: '法国'
|
||||
},
|
||||
],
|
||||
current: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
radioChange: function(evt) {
|
||||
for (let i = 0; i < this.items.length; i++) {
|
||||
if (this.items[i].value === evt.detail.value) {
|
||||
this.current = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/radio.html)
|
||||
@@ -0,0 +1,117 @@
|
||||
# rich-text
|
||||
|
||||
## Instructions
|
||||
|
||||
富文本。
|
||||
|
||||
支持默认事件，包括：click、touchstart、touchmove、touchcancel、touchend、longpress。
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<rich-text />`（或 `<rich-text></rich-text>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台兼容 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| nodes | Array / String | [] | 节点列表 / HTML String | |
|
||||
| space | string | | 显示连续空格 | App、H5、微信基础库2.4.1+ 详见 、QQ小程序、抖音小程序、快手小程序 详见 |
|
||||
| selectable | Boolean | true | 富文本是否可以长按选中，可用于复制，粘贴等场景 | 百度小程序（仅真机支持，基础库 3.150.1 以下版本默认为 false） |
|
||||
| image-menu-prevent | Boolean | false | 阻止长按图片时弹起默认菜单（将该属性设置为image-menu-prevent或image-menu-prevent="true"），只在初始化时有效，不能动态变更；若不想阻止弹起默认菜单，则不需要设置此属性 | 百度小程序 |
|
||||
| preview | Boolean | | 富文本中的图片是否可点击预览。在不设置的情况下，若 rich-text 未监听点击事件，则默认开启。未显示设置 preview 时会进行点击默认预览判断，建议显示设置 preview | 百度小程序 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台兼容 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @itemclick | EventHandle | | 拦截点击事件（只支持 a 、 img 标签），返回当前node信息 event.detail={node} | H5 (3.2.13+)、App-Vue (3.2.13+) |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/rich-text.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title uni-common-mt">
|
||||
数组类型
|
||||
<text>\nnodes属性为Array</text>
|
||||
</view>
|
||||
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
|
||||
<rich-text :nodes="nodes"></rich-text>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
字符串类型
|
||||
<text>\nnodes属性为String</text>
|
||||
</view>
|
||||
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
|
||||
<rich-text :nodes="strings"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title uni-common-mt">
|
||||
数组类型
|
||||
<text>\nnodes属性为Array</text>
|
||||
</view>
|
||||
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
|
||||
<rich-text :nodes="nodes"></rich-text>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
字符串类型
|
||||
<text>\nnodes属性为String</text>
|
||||
</view>
|
||||
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
|
||||
<rich-text :nodes="strings"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: [{
|
||||
name: 'div',
|
||||
attrs: {
|
||||
class: 'div-class',
|
||||
style: 'line-height: 60px; color: red; text-align:center;'
|
||||
},
|
||||
children: [{
|
||||
type: 'text',
|
||||
text: 'Hello uni-app!'
|
||||
}]
|
||||
}],
|
||||
strings: '<div style="text-align:center;"><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/></div>'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/rich-text.html)
|
||||
@@ -0,0 +1,228 @@
|
||||
# scroll-view
|
||||
|
||||
## Instructions
|
||||
|
||||
可滚动视图区域。用于区域滚动。
|
||||
|
||||
需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。
|
||||
|
||||
使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给 <scroll-view> 添加 white-space: nowrap; 样式。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<scroll-view />`（或 `<scroll-view></scroll-view>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| scroll-x | Boolean | false | 允许横向滚动 | |
|
||||
| scroll-y | Boolean | false | 允许纵向滚动 | |
|
||||
| upper-threshold | Number/String | 50 | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 | |
|
||||
| lower-threshold | Number/String | 50 | 距底部/右边多远时（单位px），触发 scrolltolower 事件 | |
|
||||
| scroll-top | Number/String | | 设置竖向滚动条位置 | |
|
||||
| scroll-left | Number/String | | 设置横向滚动条位置 | |
|
||||
| scroll-into-view | String | | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 | |
|
||||
| scroll-with-animation | Boolean | false | 在设置滚动条位置时使用动画过渡 | |
|
||||
| enable-back-to-top | Boolean | false | iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 | app-nvue，微信小程序 |
|
||||
| show-scrollbar | Boolean | true | 控制是否出现滚动条 | App-nvue 2.1.5+ |
|
||||
| refresher-enabled | Boolean | false | 开启自定义下拉刷新 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 |
|
||||
| refresher-threshold | Number | 45 | 设置自定义下拉刷新阈值 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 |
|
||||
| refresher-default-style | String | "black" | 设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 |
|
||||
| refresher-background | String | "#FFF" | 设置自定义下拉刷新区域背景颜色 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 |
|
||||
| refresher-triggered | Boolean | false | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 |
|
||||
| enable-flex | Boolean | false | 启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。 | 微信小程序 2.7.3、小红书小程序 |
|
||||
| scroll-anchoring | Boolean | false | 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。 | 微信小程序 2.8.2 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @scrolltoupper | EventHandle | | 滚动到顶部/左边，会触发 scrolltoupper 事件 | |
|
||||
| @scrolltolower | EventHandle | | 滚动到底部/右边，会触发 scrolltolower 事件 | |
|
||||
| @scroll | EventHandle | | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} | |
|
||||
| @refresherpulling | EventHandle | | 自定义下拉刷新控件被下拉 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 |
|
||||
| @refresherrefresh | EventHandle | | 自定义下拉刷新被触发 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 |
|
||||
| @refresherrestore | EventHandle | | 自定义下拉刷新被复位 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 |
|
||||
| @refresherabort | EventHandle | | 自定义下拉刷新被中止 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/scroll-view.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
Vertical Scroll
|
||||
<text>\n纵向滚动</text>
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
|
||||
@scrolltolower="lower" @scroll="scroll">
|
||||
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
|
||||
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
|
||||
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view @tap="goTop" class="uni-link uni-center uni-common-mt">
|
||||
点击这里返回顶部
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
Horizontal Scroll
|
||||
<text>\n横向滚动</text>
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
|
||||
<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
|
||||
<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
|
||||
<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="uni-common-pb"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
Vertical Scroll
|
||||
<text>\n纵向滚动</text>
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
|
||||
@scrolltolower="lower" @scroll="scroll">
|
||||
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
|
||||
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
|
||||
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view @tap="goTop" class="uni-link uni-center uni-common-mt">
|
||||
点击这里返回顶部
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
Horizontal Scroll
|
||||
<text>\n横向滚动</text>
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
|
||||
<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
|
||||
<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
|
||||
<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="uni-common-pb"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
old: {
|
||||
scrollTop: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upper: function(e) {
|
||||
console.log(e)
|
||||
},
|
||||
lower: function(e) {
|
||||
console.log(e)
|
||||
},
|
||||
scroll: function(e) {
|
||||
console.log(e)
|
||||
this.old.scrollTop = e.detail.scrollTop
|
||||
},
|
||||
goTop: function(e) {
|
||||
// 解决view层不同步的问题
|
||||
this.scrollTop = this.old.scrollTop
|
||||
this.$nextTick(function() {
|
||||
this.scrollTop = 0
|
||||
});
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "纵向滚动 scrollTop 值已被修改为 0"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<style>
|
||||
.scroll-Y {
|
||||
height: 300rpx;
|
||||
}
|
||||
.scroll-view_H {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
.scroll-view-item {
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.scroll-view-item_H {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
|
||||
:refresher-threshold="100" refresher-background="lightgreen" @refresherpulling="onPulling"
|
||||
@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort"></scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
|
||||
:refresher-threshold="100" refresher-background="lightgreen" @refresherpulling="onPulling"
|
||||
@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort"></scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/scroll-view.html)
|
||||
@@ -0,0 +1,130 @@
|
||||
# slider
|
||||
|
||||
## Instructions
|
||||
|
||||
滑动选择器。
|
||||
|
||||
属性说明
|
||||
|
||||
示例 查看演示
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<slider />`（或 `<slider></slider>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| min | Number | 0 | 最小值 |
|
||||
| max | Number | 100 | 最大值 |
|
||||
| step | Number | 1 | 步长，取值必须大于 0，并且可被(max - min)整除 |
|
||||
| disabled | Boolean | false | 是否禁用 |
|
||||
| value | Number | 0 | 当前取值 |
|
||||
| activeColor | Color | 各个平台不同，详见下 | 滑块左侧已选择部分的线条颜色 |
|
||||
| backgroundColor | Color | #e9e9e9 | 滑块右侧背景条的颜色 |
|
||||
| block-size | Number | 28 | 滑块的大小，取值范围为 12 - 28 |
|
||||
| block-color | Color | #ffffff | 滑块的颜色 |
|
||||
| show-value | Boolean | false | 是否显示当前 value |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @change | EventHandle | | 完成一次拖动后触发的事件，event.detail = {value: value} |
|
||||
| @changing | EventHandle | | 拖动过程中触发的事件，event.detail = {value: value} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/slider.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">设置step</view>
|
||||
<view>
|
||||
<slider value="60" @change="sliderChange" step="5" />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">显示当前value</view>
|
||||
<view>
|
||||
<slider value="50" @change="sliderChange" show-value />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">设置最小/最大值</view>
|
||||
<view>
|
||||
<slider value="100" @change="sliderChange" min="50" max="200" show-value />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">不同颜色和大小的滑块</view>
|
||||
<view>
|
||||
<slider value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
sliderChange(e) {
|
||||
console.log('value 发生变化：' + e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">设置step</view>
|
||||
<view>
|
||||
<slider value="60" @change="sliderChange" step="5" />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">显示当前value</view>
|
||||
<view>
|
||||
<slider value="50" @change="sliderChange" show-value />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">设置最小/最大值</view>
|
||||
<view>
|
||||
<slider value="100" @change="sliderChange" min="50" max="200" show-value />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">不同颜色和大小的滑块</view>
|
||||
<view>
|
||||
<slider value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
sliderChange(e) {
|
||||
console.log('value 发生变化：' + e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/slider.html)
|
||||
@@ -0,0 +1,219 @@
|
||||
# swiper
|
||||
|
||||
## Instructions
|
||||
|
||||
滑块视图容器。
|
||||
|
||||
一般用于左右滑动或上下滑动，比如banner轮播图。
|
||||
|
||||
注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<swiper />`（或 `<swiper></swiper>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| indicator-dots | Boolean | false | 是否显示面板指示点 | |
|
||||
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 | |
|
||||
| indicator-active-color | Color | #000000 | 当前选中的指示点颜色 | |
|
||||
| active-class | String | | swiper-item 可见时的 class | 支付宝小程序 |
|
||||
| changing-class | String | | acceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的class | 支付宝小程序 |
|
||||
| autoplay | Boolean | false | 是否自动切换 | |
|
||||
| current | Number | 0 | 当前所在滑块的 index | |
|
||||
| current-item-id | String | | 当前所在滑块的 item-id ，不能与 current 被同时指定 | 支付宝小程序不支持、小红书小程序不支持 |
|
||||
| interval | Number | 5000 | 自动切换时间间隔 | |
|
||||
| duration | Number | 500 | 滑动动画时长 | app-nvue不支持 |
|
||||
| circular | Boolean | false | 是否采用衔接滑动，即播放到末尾后重新回到开头 | |
|
||||
| vertical | Boolean | false | 滑动方向是否为纵向 | |
|
||||
| previous-margin | String | 0px | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 | app-nvue、抖音小程序、飞书小程序不支持 |
|
||||
| next-margin | String | 0px | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 | app-nvue、抖音小程序、飞书小程序不支持 |
|
||||
| acceleration | Boolean | false | 当开启时，会根据滑动速度，连续滑动多屏 | 支付宝小程序 |
|
||||
| disable-programmatic-animation | Boolean | false | 是否禁用代码变动触发 swiper 切换时使用动画。 | 支付宝小程序 |
|
||||
| display-multiple-items | Number | 1 | 同时显示的滑块数量 | app-nvue、支付宝小程序不支持、小红书小程序不支持 |
|
||||
| skip-hidden-item-layout | Boolean | false | 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 | App、微信小程序、京东小程序 |
|
||||
| disable-touch | Boolean | false | 是否禁止用户 touch 操作 | App 2.5.5+、H5 2.5.5+、支付宝小程序 |
|
||||
| easing-function | String | default | 指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic | 微信小程序、快手小程序、京东小程序 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @change | EventHandle | | current 改变时会触发 change 事件，event.detail = {current: current, source: source} | |
|
||||
| @transition | EventHandle | | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy | App、H5、微信小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序 |
|
||||
| @animationfinish | EventHandle | | 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} | 抖音小程序、飞书小程序与小红书小程序不支持 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/swiper.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-margin-wrap">
|
||||
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
|
||||
:duration="duration">
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-red">A</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-green">B</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-blue">C</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<view class="swiper-list">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">指示点</view>
|
||||
<switch :checked="indicatorDots" @change="changeIndicatorDots" />
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">自动播放</view>
|
||||
<switch :checked="autoplay" @change="changeAutoplay" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-common-mt">
|
||||
<text>幻灯片切换时长(ms)</text>
|
||||
<text class="info">{{duration}}</text>
|
||||
</view>
|
||||
<slider @change="durationChange" :value="duration" min="500" max="2000" />
|
||||
<view class="uni-common-mt">
|
||||
<text>自动播放间隔时长(ms)</text>
|
||||
<text class="info">{{interval}}</text>
|
||||
</view>
|
||||
<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-margin-wrap">
|
||||
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
|
||||
:duration="duration">
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-red">A</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-green">B</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-blue">C</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<view class="swiper-list">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">指示点</view>
|
||||
<switch :checked="indicatorDots" @change="changeIndicatorDots" />
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">自动播放</view>
|
||||
<switch :checked="autoplay" @change="changeAutoplay" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-common-mt">
|
||||
<text>幻灯片切换时长(ms)</text>
|
||||
<text class="info">{{duration}}</text>
|
||||
</view>
|
||||
<slider @change="durationChange" :value="duration" min="500" max="2000" />
|
||||
<view class="uni-common-mt">
|
||||
<text>自动播放间隔时长(ms)</text>
|
||||
<text class="info">{{interval}}</text>
|
||||
</view>
|
||||
<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
background: ['color1', 'color2', 'color3'],
|
||||
indicatorDots: true,
|
||||
autoplay: true,
|
||||
interval: 2000,
|
||||
duration: 500
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeIndicatorDots(e) {
|
||||
this.indicatorDots = !this.indicatorDots
|
||||
},
|
||||
changeAutoplay(e) {
|
||||
this.autoplay = !this.autoplay
|
||||
},
|
||||
intervalChange(e) {
|
||||
this.interval = e.target.value
|
||||
},
|
||||
durationChange(e) {
|
||||
this.duration = e.target.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<style>
|
||||
.uni-margin-wrap {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
}
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
}
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.swiper-list {
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.uni-common-mt {
|
||||
margin-top: 60rpx;
|
||||
position: relative;
|
||||
}
|
||||
.info {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
}
|
||||
.uni-padding-wrap {
|
||||
width: 550rpx;
|
||||
padding: 0 100rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/swiper.html)
|
||||
@@ -0,0 +1,121 @@
|
||||
# switch
|
||||
|
||||
## Instructions
|
||||
|
||||
开关选择器。
|
||||
|
||||
属性说明
|
||||
|
||||
示例 查看演示
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<switch />`（或 `<switch></switch>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| checked | Boolean | false | 是否选中 | |
|
||||
| disabled | Boolean | false | 是否禁用 | 抖音小程序与飞书小程序不支持 |
|
||||
| type | String | switch | 样式，有效值：switch, checkbox | |
|
||||
| color | Color | - | switch 的颜色，同 css 的 color | |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @change | EventHandle | - | checked 改变时触发 change 事件，event.detail={ value:checked} | |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/switch.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">默认样式</view>
|
||||
<view>
|
||||
<switch checked @change="switch1Change" />
|
||||
<switch @change="switch2Change" />
|
||||
</view>
|
||||
<view class="uni-title">不同颜色和尺寸的switch</view>
|
||||
<view>
|
||||
<switch checked color="#FFCC33" style="transform:scale(0.7)"/>
|
||||
<switch color="#FFCC33" style="transform:scale(0.7)"/>
|
||||
</view>
|
||||
<view class="uni-title">推荐展示样式</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">开启中</view>
|
||||
<switch checked />
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">关闭</view>
|
||||
<switch />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">默认样式</view>
|
||||
<view>
|
||||
<switch checked @change="switch1Change" />
|
||||
<switch @change="switch2Change" />
|
||||
</view>
|
||||
<view class="uni-title">不同颜色和尺寸的switch</view>
|
||||
<view>
|
||||
<switch checked color="#FFCC33" style="transform:scale(0.7)"/>
|
||||
<switch color="#FFCC33" style="transform:scale(0.7)"/>
|
||||
</view>
|
||||
<view class="uni-title">推荐展示样式</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">开启中</view>
|
||||
<switch checked />
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">关闭</view>
|
||||
<switch />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
switch1Change: function (e) {
|
||||
console.log('switch1 发生 change 事件，携带值为', e.detail.value)
|
||||
},
|
||||
switch2Change: function (e) {
|
||||
console.log('switch2 发生 change 事件，携带值为', e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/switch.html)
|
||||
@@ -0,0 +1,121 @@
|
||||
# text
|
||||
|
||||
## Instructions
|
||||
|
||||
文本组件。用于包裹文本内容。
|
||||
|
||||
在app-uvue和app-nvue中，文本只能写在text中，而不能写在view的text区域。
|
||||
|
||||
虽然app-uvue中写在view的text区域的文字，也会被编译器自动包裹一层text组件，看起来也可以使用。但这样会造成无法修改该text文字的样式，详见uvue的 样式不继承 章节
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<text />`（或 `<text></text>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| selectable | Boolean | false | 文本是否可选 | 小红书小程序不支持 |
|
||||
| user-select | Boolean | false | 文本是否可选 | 微信小程序 |
|
||||
| space | String | | 显示连续空格 | 钉钉小程序不支持 |
|
||||
| decode | Boolean | false | 是否解码 | 百度、钉钉小程序不支持 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/text.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/text.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="text-box" scroll-y="true">
|
||||
<text>{{text}}</text>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button type="primary" :disabled="!canAdd" @click="add">add line</button>
|
||||
<button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="text-box" scroll-y="true">
|
||||
<text>{{text}}</text>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button type="primary" :disabled="!canAdd" @click="add">add line</button>
|
||||
<button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
texts: [
|
||||
'HBuilder，900万开发者选择的IDE',
|
||||
'MUI，轻巧、漂亮的前端开源框架',
|
||||
'wap2app，M站快速转换原生体验的App',
|
||||
'5+Runtime，为HTML5插上原生的翅膀',
|
||||
'HBuilderX，轻巧、极速，极客编辑器',
|
||||
'uni-app，终极跨平台方案',
|
||||
'HBuilder，900万开发者选择的IDE',
|
||||
'MUI，轻巧、漂亮的前端开源框架',
|
||||
'wap2app，M站快速转换原生体验的App',
|
||||
'5+Runtime，为HTML5插上原生的翅膀',
|
||||
'HBuilderX，轻巧、极速，极客编辑器',
|
||||
'uni-app，终极跨平台方案',
|
||||
'......'
|
||||
],
|
||||
text: '',
|
||||
canAdd: true,
|
||||
canRemove: false,
|
||||
extraLine: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add: function(e) {
|
||||
this.extraLine.push(this.texts[this.extraLine.length % 12]);
|
||||
this.text = this.extraLine.join('\n');
|
||||
this.canAdd = this.extraLine.length < 12;
|
||||
this.canRemove = this.extraLine.length > 0;
|
||||
},
|
||||
remove: function(e) {
|
||||
if (this.extraLine.length > 0) {
|
||||
this.extraLine.pop();
|
||||
this.text = this.extraLine.join('\n');
|
||||
this.canAdd = this.extraLine.length < 12;
|
||||
this.canRemove = this.extraLine.length > 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/text.html)
|
||||
@@ -0,0 +1,230 @@
|
||||
# textarea
|
||||
|
||||
## Instructions
|
||||
|
||||
多行输入框。
|
||||
|
||||
属性说明
|
||||
|
||||
confirm-type 有效值
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<textarea />`（或 `<textarea></textarea>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| value | String | | 输入框的内容 | |
|
||||
| placeholder | String | | 输入框为空时占位符 | |
|
||||
| placeholder-style | String | | 指定 placeholder 的样式 | |
|
||||
| placeholder-class | String | textarea-placeholder | 指定 placeholder 的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ | 抖音小程序、飞书小程序、快手小程序不支持 |
|
||||
| disabled | Boolean | false | 是否禁用 | |
|
||||
| maxlength | Number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 | |
|
||||
| focus | Boolean | false | 获取焦点 | 在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点 |
|
||||
| auto-focus | Boolean | false | 自动聚焦，拉起键盘 | 京东小程序、小红书小程序 |
|
||||
| auto-height | Boolean | false | 是否自动增高，设置auto-height时，style.height不生效 | |
|
||||
| fixed | Boolean | false | 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true | 微信小程序、百度小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序、京东小程序 |
|
||||
| cursor-spacing | Number | 0 | 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | App、微信小程序、百度小程序、抖音小程序、飞书小程序、QQ小程序、京东小程序 |
|
||||
| cursor | Number | | 指定focus时的光标位置 | 微信小程序、App、H5、百度小程序、抖音小程序、飞书小程序、QQ小程序、京东小程序、小红书小程序 |
|
||||
| cursor-color | String | | 光标颜色 | H5(4.0+)、App-Vue(4.0+) |
|
||||
| confirm-type | String | done | 设置键盘右下角按钮的文字 | 微信小程序(2.13.0+)、支付宝小程序(2.7.23+)、App-vue和H5(2.9.9+，且要求设备webview内核Chrome81+、Safari13.7+) |
|
||||
| confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | App(3.3.7+)、H5 (3.3.7+)、微信小程序 (基础库 2.16.0+)、百度小程序 (基础库 3.130.1+)、快手小程序 |
|
||||
| show-confirm-bar | Boolean | true | 是否显示键盘上方带有”完成“按钮那一栏 | App-iOS、微信小程序、百度小程序、QQ小程序、京东小程序 |
|
||||
| selection-start | Number | -1 | 光标起始位置，自动聚焦时有效，需与selection-end搭配使用 | 微信小程序、App、H5、百度小程序、抖音小程序、飞书小程序、QQ小程序、京东小程序、小红书小程序 |
|
||||
| selection-end | Number | -1 | 光标结束位置，自动聚焦时有效，需与selection-start搭配使用 | 微信小程序、App、H5、百度小程序、抖音小程序、飞书小程序、QQ小程序、京东小程序、小红书小程序 |
|
||||
| adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | App-Android（softinputMode 为 adjustResize 时无效）、微信小程序、百度小程序、QQ小程序、京东小程序 |
|
||||
| disable-default-padding | boolean | false | 是否去掉 iOS 下的默认内边距 | 微信小程序2.10.0、飞书小程序 3.46 |
|
||||
| hold-keyboard | boolean | false | focus时，点击页面的时候不收起键盘 | 微信小程序2.8.2 |
|
||||
| auto-blur | boolean | false | 键盘收起时，是否自动失去焦点 | App-vue 3.0.0+ ，App-nvue不支持 |
|
||||
| ignoreCompositionEvent | boolean | true | 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件 | App-vue (3.4.4+)、H5 (3.4.4+)、App-nvue不支持 |
|
||||
| inputmode | String | "text" | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。 有效值 | H5（3.7.0+）、App-vue（3.7.0+） |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @focus | EventHandle | | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 | 仅微信小程序、京东小程序、App（HBuilderX 2.0+ nvue uni-app模式 ） 、QQ小程序支持 height |
|
||||
| @blur | EventHandle | | 输入框失去焦点时触发，event.detail = {value, cursor} | 快手小程序不支持 cursor |
|
||||
| @linechange | EventHandle | | 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} | 飞书小程序、快手小程序不支持 |
|
||||
| @input | EventHandle | | 当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上 | 快手小程序不支持 |
|
||||
| @confirm | EventHandle | | 点击完成时， 触发 confirm 事件，event.detail = {value: value} | 微信小程序、百度小程序、QQ小程序、京东小程序 |
|
||||
| @keyboardheightchange | Eventhandle | | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} | 微信小程序基础库2.7.0+、App 3.1.0+ |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/textarea.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-title uni-common-pl">输入区域高度自适应，不会出现滚动条</view>
|
||||
<view class="uni-textarea">
|
||||
<textarea @blur="bindTextAreaBlur" auto-height />
|
||||
</view>
|
||||
<view class="uni-title uni-common-pl">占位符字体是红色的textarea</view>
|
||||
<view class="uni-textarea">
|
||||
<textarea placeholder-style="color:#F76260" placeholder="占位符字体是红色的"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
bindTextAreaBlur: function (e) {
|
||||
console.log(e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-title uni-common-pl">输入区域高度自适应，不会出现滚动条</view>
|
||||
<view class="uni-textarea">
|
||||
<textarea @blur="bindTextAreaBlur" auto-height />
|
||||
</view>
|
||||
<view class="uni-title uni-common-pl">占位符字体是红色的textarea</view>
|
||||
<view class="uni-textarea">
|
||||
<textarea placeholder-style="color:#F76260" placeholder="占位符字体是红色的"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
bindTextAreaBlur: function (e) {
|
||||
console.log(e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="content">
|
||||
<textarea class="textarea" v-model="txt"></textarea>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
"txt":"hello world！\n textarea多行输入框"
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="content">
|
||||
<textarea class="textarea" v-model="txt"></textarea>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
"txt":"hello world！\n textarea多行输入框"
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="content">
|
||||
<textarea class="textarea" v-model="txt"></textarea>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
txt:"txt"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
txt(txt) {
|
||||
if( txt.indexOf('\n') != -1 ){ //敲了回车键了
|
||||
uni.hideKeyboard() //收起软键盘
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.textarea{
|
||||
border: solid 1px red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="content">
|
||||
<textarea class="textarea" v-model="txt"></textarea>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
txt:"txt"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
txt(txt) {
|
||||
if( txt.indexOf('\n') != -1 ){ //敲了回车键了
|
||||
uni.hideKeyboard() //收起软键盘
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.textarea{
|
||||
border: solid 1px red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/textarea.html)
|
||||
@@ -0,0 +1,101 @@
|
||||
# unicloud-db
|
||||
|
||||
## Instructions
|
||||
|
||||
<unicloud-db> ç»ä»¶æ¯ä¸ä¸ªæ°æ®åºæ¥è¯¢ç»ä»¶ï¼å®æ¯å¯¹ clientDB çjsåºçåå°è£ ã
|
||||
|
||||
å端éè¿ç»ä»¶æ¹å¼ç´æ¥è·åuniCloudçäºç«¯æ°æ®åºä¸çæ°æ®ï¼å¹¶ç»å®å¨çé¢ä¸è¿è¡æ¸²æã
|
||||
|
||||
å¨ä¼ ç»å¼åä¸ï¼å¼åè éè¦å¨å端å®ä¹dataãéè¿requestèç½è·åæ¥å£æ°æ®ãç¶åèµå¼ç»dataãåæ¶å端è¿éè¦åæ¥å£æ¥æ¥åºååé¦æ°æ®ã
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<unicloud-db />`（或 `<unicloud-db></unicloud-db>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
See official docs for full properties list: `https://doc.dcloud.net.cn/uniCloud/unicloud-db`
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://doc.dcloud.net.cn/uniCloud/unicloud-db`
|
||||
|
||||
#### Slots
|
||||
|
||||
| å±æ§ | ç±»å | æè¿° |
|
||||
| --- | --- | --- |
|
||||
| data | Array|Object | æ¥è¯¢ç»æï¼é»è®¤å¼ä¸º Array , å½ getone æå®ä¸º true æ¶ï¼å¼ä¸ºæ°ç»ä¸ç¬¬ä¸æ¡æ°æ®ï¼ç±»å为 Object ï¼åå°äºä¸å± |
|
||||
| pagination | Object | å页å±æ§ |
|
||||
| loading | Boolean | æ¥è¯¢ä¸çç¶æãå¯æ ¹æ®æ¤ç¶æï¼å¨templateä¸éè¿v-ifæ¾ç¤ºçå¾ å 容ï¼å¦ <view v-if="loading">å è½½ä¸...</view> |
|
||||
| hasMore | Boolean | æ¯å¦ææ´å¤æ°æ®ãå¯æ ¹æ®æ¤ç¶æï¼å¨templateä¸éè¿v-ifæ¾ç¤ºæ²¡ææ´å¤æ°æ®äºï¼å¦ <uni-load-more v-if="!hasMore" status="noMore"></uni-load-more> , <uni-load-more> 详æ https://ext.dcloud.net.cn/plugin?id=29 |
|
||||
| error | Object | æ¥è¯¢é误ãå¯æ ¹æ®æ¤ç¶æï¼å¨templateä¸éè¿v-ifæ¾ç¤ºçå¾ å 容ï¼å¦ <view v-if="error">å è½½é误</view> |
|
||||
| options | Object | å¨å°ç¨åºä¸ï¼æ槽ä¸è½è®¿é®å¤é¢çæ°æ®ï¼ééè¿æ¤åæ°ä¼ é, ä¸æ¯æä¼ éå½æ° |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://doc.dcloud.net.cn/uniCloud/unicloud-db`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<unicloud-db v-slot:default="{data, loading, error, options}" collection="table1" field="field1" :getone="true" where="id=='1'">
|
||||
<view>
|
||||
{{ data}}
|
||||
</view>
|
||||
</unicloud-db>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<unicloud-db v-slot:default="{data, loading, error, options}" collection="table1" field="field1" :getone="true" where="id=='1'">
|
||||
<view>
|
||||
{{ data}}
|
||||
</view>
|
||||
</unicloud-db>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<unicloud-db v-slot:default="{data, loading, error, options}" collection="user" field="name" :getone="true" where="id=='1'">
|
||||
<view>
|
||||
{{ data.name}}
|
||||
</view>
|
||||
</unicloud-db>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<unicloud-db v-slot:default="{data, loading, error, options}" collection="user" field="name" :getone="true" where="id=='1'">
|
||||
<view>
|
||||
{{ data.name}}
|
||||
</view>
|
||||
</unicloud-db>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<unicloud-db v-slot:default="{data, pagination, loading, hasMore, error, options}"></unicloud-db>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<unicloud-db v-slot:default="{data, pagination, loading, hasMore, error, options}"></unicloud-db>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://doc.dcloud.net.cn/uniCloud/unicloud-db)
|
||||
@@ -0,0 +1,198 @@
|
||||
# video
|
||||
|
||||
## Instructions
|
||||
|
||||
视频需要上传？推荐 uni-cdn ，帮你节省至少30%的 CDN 费用！ 详情 。
|
||||
|
||||
视频播放组件。
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<video />`（或 `<video></video>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| src | String | | 要播放视频的资源地址 | |
|
||||
| autoplay | Boolean | false | 是否自动播放 | |
|
||||
| loop | Boolean | false | 是否循环播放 | |
|
||||
| muted | Boolean | false | 是否静音播放 | 飞书小程序不支持 |
|
||||
| initial-time | Number | | 指定视频初始播放位置，单位为秒（s）。 | 飞书小程序不支持 |
|
||||
| duration | Number | | 指定视频时长，单位为秒（s）。 | 抖音小程序、飞书小程序、快手小程序、京东小程序不支持 |
|
||||
| controls | Boolean | true | 是否显示默认播放控件（播放/暂停按钮、播放进度、时间） | 快手小程序不支持 |
|
||||
| danmu-list | Object Array | | 弹幕列表 | 抖音小程序、飞书小程序、快手小程序、京东小程序不支持 |
|
||||
| danmu-btn | Boolean | false | 是否显示弹幕按钮，只在初始化时有效，不能动态变更 | 抖音小程序、飞书小程序、快手小程序、京东小程序不支持 |
|
||||
| enable-danmu | Boolean | false | 是否展示弹幕，只在初始化时有效，不能动态变更 | 抖音小程序、飞书小程序、快手小程序、京东小程序不支持 |
|
||||
| page-gesture | Boolean | false | 在非全屏模式下，是否开启亮度与音量调节手势 | 微信小程序、H5 |
|
||||
| direction | Number | | 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度） | H5、飞书小程序、快手小程序、京东小程序、小红书小程序不支持 |
|
||||
| show-progress | Boolean | true | 若不设置，宽度大于240时才会显示 | 抖音小程序、飞书小程序、快手小程序、京东小程序不支持 |
|
||||
| show-fullscreen-btn | Boolean | true | 是否显示全屏按钮 | 京东小程序不支持 |
|
||||
| show-play-btn | Boolean | true | 是否显示视频底部控制栏的播放按钮 | 京东小程序不支持 |
|
||||
| show-center-play-btn | Boolean | true | 是否显示视频中间的播放按钮 | 抖音小程序、京东小程序不支持 |
|
||||
| show-loading | Boolean | true | 是否显示loading控件 | 仅app 2.8.12+ |
|
||||
| enable-progress-gesture | Boolean | true | 是否开启控制进度的手势 | 抖音小程序、京东小程序不支持、小红书小程序不支持 |
|
||||
| object-fit | String | contain | 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖 | App、微信小程序、抖音小程序、飞书小程序、H5、京东小程序、小红书小程序 |
|
||||
| poster | String | | 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效 | |
|
||||
| show-mute-btn | Boolean | false | 是否显示静音按钮 | 微信小程序、抖音小程序、App-nvue、小红书小程序 |
|
||||
| title | String | | 视频的标题，全屏时在顶部展示 | 微信小程序、App（3.6.7+） |
|
||||
| play-btn-position | String | bottom | 播放按钮的位置 | 微信小程序、抖音小程序、飞书小程序 |
|
||||
| mobilenet-hint-type | number | 1 | 移动网络提醒样式：0是不提醒，1是提醒，默认值为1 | 京东小程序 |
|
||||
| enable-play-gesture | Boolean | false | 是否开启播放手势，即双击切换播放/暂停 | 微信小程序、快手小程序 |
|
||||
| auto-pause-if-navigate | Boolean | true | 当跳转到其它小程序页面时，是否自动暂停本页面的视频 | 微信小程序 |
|
||||
| auto-pause-if-open-native | Boolean | true | 当跳转到其它微信原生页面时，是否自动暂停本页面的视频 | 微信小程序 |
|
||||
| vslide-gesture | Boolean | false | 在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture） | 微信小程序、App（3.4.0+）、快手小程序 |
|
||||
| vslide-gesture-in-fullscreen | Boolean | true | 在全屏模式下，是否开启亮度与音量调节手势 | 微信小程序、App（3.4.0+）、快手小程序 |
|
||||
| ad-unit-id | String | | 视频前贴广告单元ID，更多详情可参考开放能力 视频前贴广告 | 微信小程序 |
|
||||
| poster-for-crawler | String | | 用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址 | 微信小程序 |
|
||||
| codec | String | hardware | 解码器选择，hardware：硬解码（硬解码可以增加解码算力，提高视频清晰度。少部分老旧硬件可能存在兼容性问题）；software：ffmpeg 软解码； | App-Android 3.1.0+ |
|
||||
| http-cache | Boolean | true | 是否对 http、https 视频源开启本地缓存。缓存策略:开启了此开关的视频源，在视频播放时会在本地保存缓存文件，如果本地缓存池已超过100M，在进行缓存前会清空之前的缓存（不适用于m3u8等流媒体协议） | App-Android 3.1.0+ |
|
||||
| play-strategy | Number | 0 | 播放策略，0：普通模式，适合绝大部分视频播放场景；1：平滑播放模式（降级），增加缓冲区大小，采用open sl解码音频，避免音视频脱轨的问题，可能会降低首屏展现速度、视频帧率，出现开屏音频延迟等。 适用于高码率视频的极端场景；2： M3U8优化模式，增加缓冲区大小，提升视频加载速度和流畅度，可能会降低首屏展现速度。 适用于M3U8在线播放的场景 | App-Android 3.1.0+ |
|
||||
| header | Object | | HTTP 请求 Header | App 3.1.19+ |
|
||||
| is-live | Boolean | false | 是否为直播源 | App 3.7.2+、微信小程序（2.28.1+） |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| @play | EventHandle | | 当开始/继续播放时触发play事件 | 飞书小程序不支持 |
|
||||
| @pause | EventHandle | | 当暂停播放时触发 pause 事件 | 飞书小程序不支持 |
|
||||
| @ended | EventHandle | | 当播放到末尾时触发 ended 事件 | 飞书小程序不支持 |
|
||||
| @timeupdate | EventHandle | | 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次 | 飞书小程序不支持 |
|
||||
| @fullscreenchange | EventHandle | | 当视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal | 飞书小程序不支持 |
|
||||
| @waiting | EventHandle | | 视频出现缓冲时触发 | 飞书小程序、快手小程序不支持 |
|
||||
| @error | EventHandle | | 视频播放出错时触发 | 飞书小程序不支持 |
|
||||
| @progress | EventHandle | | 加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比 | 微信小程序、抖音小程序、H5 |
|
||||
| @loadeddata | EventHandle | | 视频资源开始加载时触发 | 京东小程序 |
|
||||
| @loadstart | EventHandle | | 开始加载数据 | 京东小程序 |
|
||||
| @seeked | EventHandle | | 拖动进度条结束 | 京东小程序 |
|
||||
| @seeking | EventHandle | | 正在拖动进度条 | 京东小程序 |
|
||||
| @loadedmetadata | EventHandle | | 视频元数据加载完成时触发。event.detail = {width, height, duration} | 微信小程序、H5、抖音小程序、京东小程序 |
|
||||
| @fullscreenclick | EventHandle | | 视频播放全屏播放时点击事件。event.detail = { screenX:"Number类型，点击点相对于屏幕左侧边缘的 X 轴坐标", screenY:"Number类型，点击点相对于屏幕顶部边缘的 Y 轴坐标", screenWidth:"Number类型，屏幕总宽度", screenHeight:"Number类型，屏幕总高度"} | App 2.6.3+ |
|
||||
| @controlstoggle | EventHandle | | 切换 controls 显示隐藏时触发。event.detail = {show} | 微信小程序2.9.5 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/video.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view>
|
||||
<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
|
||||
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
|
||||
</view>
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<view class="uni-list uni-common-mt">
|
||||
<view class="uni-list-cell">
|
||||
<view>
|
||||
<view class="uni-label">弹幕内容</view>
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view>
|
||||
<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
|
||||
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
|
||||
</view>
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<view class="uni-list uni-common-mt">
|
||||
<view class="uni-list-cell">
|
||||
<view>
|
||||
<view class="uni-label">弹幕内容</view>
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src: '',
|
||||
danmuList: [{
|
||||
text: '第 1s 出现的弹幕',
|
||||
color: '#ff0000',
|
||||
time: 1
|
||||
},
|
||||
{
|
||||
text: '第 3s 出现的弹幕',
|
||||
color: '#ff00ff',
|
||||
time: 3
|
||||
}
|
||||
],
|
||||
danmuValue: ''
|
||||
}
|
||||
},
|
||||
onReady: function(res) {
|
||||
// #ifndef MP-ALIPAY
|
||||
this.videoContext = uni.createVideoContext('myVideo')
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
sendDanmu: function() {
|
||||
this.videoContext.sendDanmu({
|
||||
text: this.danmuValue,
|
||||
color: this.getRandomColor()
|
||||
});
|
||||
this.danmuValue = '';
|
||||
},
|
||||
videoErrorCallback: function(e) {
|
||||
uni.showModal({
|
||||
content: e.target.errMsg,
|
||||
showCancel: false
|
||||
})
|
||||
},
|
||||
getRandomColor: function() {
|
||||
const rgb = []
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
let color = Math.floor(Math.random() * 256).toString(16)
|
||||
color = color.length == 1 ? '0' + color : color
|
||||
rgb.push(color)
|
||||
}
|
||||
return '#' + rgb.join('')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/video.html)
|
||||
@@ -0,0 +1,95 @@
|
||||
# view
|
||||
|
||||
## Instructions
|
||||
|
||||
所有的视图组件，包括view、swiper等，本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件。
|
||||
|
||||
视图容器。
|
||||
|
||||
它类似于传统html中的div，用于包裹各种元素内容。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<view />`（或 `<view></view>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| hover-class | String | none | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
|
||||
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）、小红书小程序 |
|
||||
| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 |
|
||||
| hover-stay-time | Number | 400 | 手指松开后点击态保留时间，单位毫秒 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/view.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/view.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: row
|
||||
<text>\n横向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="flex-item uni-bg-red">A</view>
|
||||
<view class="flex-item uni-bg-green">B</view>
|
||||
<view class="flex-item uni-bg-blue">C</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: column
|
||||
<text>\n纵向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-column">
|
||||
<view class="flex-item flex-item-V uni-bg-red">A</view>
|
||||
<view class="flex-item flex-item-V uni-bg-green">B</view>
|
||||
<view class="flex-item flex-item-V uni-bg-blue">C</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: row
|
||||
<text>\n横向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="flex-item uni-bg-red">A</view>
|
||||
<view class="flex-item uni-bg-green">B</view>
|
||||
<view class="flex-item uni-bg-blue">C</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: column
|
||||
<text>\n纵向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-column">
|
||||
<view class="flex-item flex-item-V uni-bg-red">A</view>
|
||||
<view class="flex-item flex-item-V uni-bg-green">B</view>
|
||||
<view class="flex-item flex-item-V uni-bg-blue">C</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/view.html)
|
||||
@@ -0,0 +1,289 @@
|
||||
# web-view
|
||||
|
||||
## Instructions
|
||||
|
||||
web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。
|
||||
|
||||
各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。
|
||||
|
||||
属性说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<web-view />`（或 `<web-view></web-view>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| src | String | webview 指向网页的链接 | |
|
||||
| allow | String | 用于为 iframe 指定其 特征策略 | H5 |
|
||||
| sandbox | String | 该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。 | H5 |
|
||||
| fullscreen | Boolean | 是否铺满整个页面，默认值： true 。 | H5 (HBuilder X 3.5.4+)、App-HarmonyOS |
|
||||
| webview-styles | Object | webview 的样式 | App-vue |
|
||||
| update-title | Boolean | 是否自动更新当前页面标题。默认值： true | App-vue (HBuilder X 3.3.8+) |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 类型 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @message | EventHandler | 网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。 | H5 暂不支持（可以直接使用 window.postMessage ） |
|
||||
| @onPostMessage | EventHandler | 网页向应用实时 postMessage | App-nvue |
|
||||
| @load | EventHandler | 网页加载成功时候触发此事件。 | 微信小程序、支付宝小程序、抖音小程序、QQ小程序、H5、小红书小程序 |
|
||||
| @error | EventHandler | 网页加载失败的时候触发此事件。 | 微信小程序、支付宝小程序、抖音小程序、QQ小程序、小红书小程序 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
| 方法名 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- |
|
||||
| uni.navigateTo | navigateTo | |
|
||||
| uni.redirectTo | redirectTo | |
|
||||
| uni.reLaunch | reLaunch | |
|
||||
| uni.switchTab | switchTab | |
|
||||
| uni.navigateBack | navigateBack | |
|
||||
| uni.postMessage | 向应用发送消息 | 抖音小程序不支持、H5 暂不支持（可以直接使用 window.postMessage ） |
|
||||
| uni.getEnv | 获取当前环境 | 抖音小程序与飞书小程序不支持 |
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webviewStyles: {
|
||||
progress: {
|
||||
color: '#FF3333'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webviewStyles: {
|
||||
progress: {
|
||||
color: '#FF3333'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
┌─components
|
||||
├─hybrid
|
||||
│ └─html
|
||||
│ ├─css
|
||||
│ │ └─test.css
|
||||
│ ├─img
|
||||
│ │ └─icon.png
|
||||
│ ├─js
|
||||
│ │ └─test.js
|
||||
│ └─local.html
|
||||
├─pages
|
||||
│ └─index
|
||||
│ └─index.vue
|
||||
├─static
|
||||
├─main.js
|
||||
├─App.vue
|
||||
├─manifest.json
|
||||
└─pages.json
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<web-view src="/hybrid/html/local.html"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<web-view src="/hybrid/html/local.html"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```vue
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
||||
<title>网络网页</title>
|
||||
<style type="text/css">
|
||||
.btn {
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
padding: 5px;
|
||||
background-color: #007aff;
|
||||
border: 0;
|
||||
color: #ffffff;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.btn-red {
|
||||
background-color: #dd524d;
|
||||
}
|
||||
|
||||
.btn-yellow {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.desc {
|
||||
padding: 10px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.post-message-section {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="desc">web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。</p>
|
||||
<div class="btn-list">
|
||||
<button class="btn" type="button" data-action="navigateTo">navigateTo</button>
|
||||
<button class="btn" type="button" data-action="redirectTo">redirectTo</button>
|
||||
<button class="btn" type="button" data-action="navigateBack">navigateBack</button>
|
||||
<button class="btn" type="button" data-action="reLaunch">reLaunch</button>
|
||||
<button class="btn" type="button" data-action="switchTab">switchTab</button>
|
||||
</div>
|
||||
<div class="post-message-section">
|
||||
<p class="desc">网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。</p>
|
||||
<div class="btn-list">
|
||||
<button class="btn btn-red" type="button" id="postMessage">postMessage</button>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var userAgent = navigator.userAgent;
|
||||
if (userAgent.indexOf('AlipayClient') > -1) {
|
||||
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
|
||||
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
|
||||
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
|
||||
// QQ 小程序
|
||||
document.write(
|
||||
'<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
|
||||
);
|
||||
} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
|
||||
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
|
||||
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
|
||||
} else if (/toutiaomicroapp/i.test(userAgent)) {
|
||||
// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
|
||||
document.write(
|
||||
'<script type="text/javascript" src="https://lf1-cdn-tos.bytegoofy.com/goofy/developer/jssdk/jssdk-1.2.0.js"><\/script>');
|
||||
} else if (/swan/i.test(userAgent)) {
|
||||
// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
|
||||
document.write(
|
||||
'<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
|
||||
);
|
||||
} else if (/quickapp/i.test(userAgent)) {
|
||||
// quickapp
|
||||
document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
|
||||
}
|
||||
if (!/toutiaomicroapp/i.test(userAgent)) {
|
||||
document.querySelector('.post-message-section').style.visibility = 'visible';
|
||||
}
|
||||
</script>
|
||||
<!-- uni 的 SDK -->
|
||||
<!-- 需要把 uni.webview.1.5.6.js 下载到自己的服务器 -->
|
||||
<script type="text/javascript" src="https://gitcode.com/dcloud/uni-app/tree/dev/dist/uni.webview.1.5.6.js"></script>
|
||||
<script type="text/javascript">
|
||||
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
|
||||
document.addEventListener('UniAppJSBridgeReady', function() {
|
||||
uni.postMessage({
|
||||
data: {
|
||||
action: 'message'
|
||||
}
|
||||
});
|
||||
uni.getEnv(function(res) {
|
||||
console.log('当前环境：' + JSON.stringify(res));
|
||||
});
|
||||
|
||||
document.querySelector('.btn-list').addEventListener('click', function(evt) {
|
||||
var target = evt.target;
|
||||
if (target.tagName === 'BUTTON') {
|
||||
var action = target.getAttribute('data-action');
|
||||
switch (action) {
|
||||
case 'switchTab':
|
||||
uni.switchTab({
|
||||
url: '/pages/tabBar/API/API'
|
||||
});
|
||||
break;
|
||||
case 'reLaunch':
|
||||
uni.reLaunch({
|
||||
url: '/pages/tabBar/component/component'
|
||||
});
|
||||
break;
|
||||
case 'navigateBack':
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
break;
|
||||
default:
|
||||
uni[action]({
|
||||
url: '/pages/component/button/button'
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
document.getElementById('postMessage').addEventListener('click', function() {
|
||||
uni.postMessage({
|
||||
data: {
|
||||
action: 'message'
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/web-view.html)
|
||||
@@ -0,0 +1,309 @@
|
||||
# uni-badge
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-badge
|
||||
|
||||
代码块： uBadge
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-badge />`（或 `<uni-badge></uni-badge>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| text | String | - | 角标内容 |
|
||||
| type | String | default | 颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色) |
|
||||
| size | String | small | 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]） |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 事件说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| @click | 点击 Badge 触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-badge.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">数字角标通用来标记重点信息使用，如接受到新消息、有未读消息等</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-badge class="uni-badge-left-margin" text="1" />
|
||||
<uni-badge class="uni-badge-left-margin" text="2" type="primary" />
|
||||
<uni-badge class="uni-badge-left-margin" text="34" type="success" />
|
||||
<uni-badge class="uni-badge-left-margin" text="45" type="warning" />
|
||||
<uni-badge class="uni-badge-left-margin" text="123" type="info" />
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="无底色" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="1" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="2" type="primary" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="34" type="success" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="45" type="warning" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="123" type="info" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-badge class="uni-badge-left-margin" text="2" type="primary"
|
||||
:customStyle="{background: '#4335d6'}" />
|
||||
<uni-badge class="uni-badge-left-margin" text="2" type="primary" :customStyle="customStyle" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="定位: aboslute 属性" subTitle="注：在安卓端不支持 nvue" type="line" padding>
|
||||
<uni-badge class="uni-badge-left-margin" :text="value" absolute="rightTop" size="small">
|
||||
<view class="box"><text class="box-text">右上</text></view>
|
||||
</uni-badge>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="偏移: offset 属性(存在 aboslute)" type="line" padding>
|
||||
<uni-badge class="uni-badge-left-margin" :text="8" absolute="rightTop" :offset="[-3, -3]" size="small">
|
||||
<view class="box"><text class="box-text">右上</text></view>
|
||||
</uni-badge>
|
||||
</uni-section>
|
||||
<uni-section title="仅显示点: is-dot 属性" type="line" padding>
|
||||
<uni-badge class="uni-badge-left-margin" :is-dot="true" :text="value" absolute="rightTop" size="small">
|
||||
<view class="box"><text class="box-text">圆点</text></view>
|
||||
</uni-badge>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
customStyle: {
|
||||
backgroundColor: '#62ed0d',
|
||||
color: '#fff'
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const timer = setInterval(() => {
|
||||
if (this.value >= 199) {
|
||||
clearInterval(timer)
|
||||
return
|
||||
}
|
||||
this.value++
|
||||
}, 100)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifdef MP-ALIPAY */
|
||||
.uni-badge {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.example-body {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.uni-badge-left-margin {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.uni-badge-absolute {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #DCDFE6;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.box-text {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">数字角标通用来标记重点信息使用，如接受到新消息、有未读消息等</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-badge class="uni-badge-left-margin" text="1" />
|
||||
<uni-badge class="uni-badge-left-margin" text="2" type="primary" />
|
||||
<uni-badge class="uni-badge-left-margin" text="34" type="success" />
|
||||
<uni-badge class="uni-badge-left-margin" text="45" type="warning" />
|
||||
<uni-badge class="uni-badge-left-margin" text="123" type="info" />
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="无底色" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="1" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="2" type="primary" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="34" type="success" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="45" type="warning" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="123" type="info" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-badge class="uni-badge-left-margin" text="2" type="primary"
|
||||
:customStyle="{background: '#4335d6'}" />
|
||||
<uni-badge class="uni-badge-left-margin" text="2" type="primary" :customStyle="customStyle" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="定位: aboslute 属性" subTitle="注：在安卓端不支持 nvue" type="line" padding>
|
||||
<uni-badge class="uni-badge-left-margin" :text="value" absolute="rightTop" size="small">
|
||||
<view class="box"><text class="box-text">右上</text></view>
|
||||
</uni-badge>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="偏移: offset 属性(存在 aboslute)" type="line" padding>
|
||||
<uni-badge class="uni-badge-left-margin" :text="8" absolute="rightTop" :offset="[-3, -3]" size="small">
|
||||
<view class="box"><text class="box-text">右上</text></view>
|
||||
</uni-badge>
|
||||
</uni-section>
|
||||
<uni-section title="仅显示点: is-dot 属性" type="line" padding>
|
||||
<uni-badge class="uni-badge-left-margin" :is-dot="true" :text="value" absolute="rightTop" size="small">
|
||||
<view class="box"><text class="box-text">圆点</text></view>
|
||||
</uni-badge>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
customStyle: {
|
||||
backgroundColor: '#62ed0d',
|
||||
color: '#fff'
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const timer = setInterval(() => {
|
||||
if (this.value >= 199) {
|
||||
clearInterval(timer)
|
||||
return
|
||||
}
|
||||
this.value++
|
||||
}, 100)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifdef MP-ALIPAY */
|
||||
.uni-badge {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.example-body {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.uni-badge-left-margin {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.uni-badge-absolute {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #DCDFE6;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.box-text {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-badge.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=badge)
|
||||
- [Local Example](examples/uni-ui/uni-badge.vue)
|
||||
@@ -0,0 +1,216 @@
|
||||
# uni-breadcrumb
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-breadcrumb
|
||||
|
||||
代码块： uBreadcrumb
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-breadcrumb />`（或 `<uni-breadcrumb></uni-breadcrumb>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| separator | String | 斜杠'/' | 分隔符 |
|
||||
| separatorClass | String | | 图标分隔符 class |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-breadcrumb.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-breadcrumb.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-breadcrumb separator="/">
|
||||
<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
|
||||
{{route.name}}
|
||||
</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-breadcrumb separator="/">
|
||||
<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
|
||||
{{route.name}}
|
||||
</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
name: "uni-stat-breadcrumb",
|
||||
data() {
|
||||
return {
|
||||
routes: [
|
||||
{
|
||||
to: "/A",
|
||||
name: "A页面",
|
||||
},
|
||||
{
|
||||
to: "/B",
|
||||
name: "B页面",
|
||||
},
|
||||
{
|
||||
to: "/C",
|
||||
name: "C页面",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
name: "uni-stat-breadcrumb",
|
||||
data() {
|
||||
return {
|
||||
routes: [
|
||||
{
|
||||
to: "/A",
|
||||
name: "A页面",
|
||||
},
|
||||
{
|
||||
to: "/B",
|
||||
name: "B页面",
|
||||
},
|
||||
{
|
||||
to: "/C",
|
||||
name: "C页面",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6"
|
||||
>面包屑导航显示当前页面的路径，快速返回之前的任意可跳转页面</text
|
||||
>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<uni-breadcrumb separator="/">
|
||||
<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
|
||||
{{route.name}}
|
||||
</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
</uni-section>
|
||||
<uni-section title="自定义分隔符" type="line" padding>
|
||||
<uni-breadcrumb separator=">">
|
||||
<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
|
||||
{{route.name}}
|
||||
</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
routes: [
|
||||
{
|
||||
to: "/pages/index/index",
|
||||
name: "首页",
|
||||
},
|
||||
{
|
||||
to: "",
|
||||
name: "菜单 A",
|
||||
},
|
||||
{
|
||||
to: "",
|
||||
name: "菜单 B",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6"
|
||||
>面包屑导航显示当前页面的路径，快速返回之前的任意可跳转页面</text
|
||||
>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<uni-breadcrumb separator="/">
|
||||
<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
|
||||
{{route.name}}
|
||||
</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
</uni-section>
|
||||
<uni-section title="自定义分隔符" type="line" padding>
|
||||
<uni-breadcrumb separator=">">
|
||||
<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
|
||||
{{route.name}}
|
||||
</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
routes: [
|
||||
{
|
||||
to: "/pages/index/index",
|
||||
name: "首页",
|
||||
},
|
||||
{
|
||||
to: "",
|
||||
name: "菜单 A",
|
||||
},
|
||||
{
|
||||
to: "",
|
||||
name: "菜单 B",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-breadcrumb.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=breadcrumb)
|
||||
- [Local Example](examples/uni-ui/uni-breadcrumb.vue)
|
||||
@@ -0,0 +1,137 @@
|
||||
# uni-calendar
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-calendar
|
||||
|
||||
代码块： uCalendar
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-calendar />`（或 `<uni-calendar></uni-calendar>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| date | String | - | 自定义当前时间，默认为今天 |
|
||||
| lunar | Boolean | false | 显示农历 |
|
||||
| startDate | String | - | 日期选择范围-开始日期 |
|
||||
| endDate | String | - | 日期选择范围-结束日期 |
|
||||
| range | Boolean | false | 范围选择 |
|
||||
| insert | Boolean | true | 插入模式，可选值，ture：插入模式；false：弹窗模式；默认为插入模式 |
|
||||
| clearDate | Boolean | true | 弹窗模式是否清空上次选择内容 |
|
||||
| selected | Array | - | 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] |
|
||||
| showMonth | Boolean | true | 是否显示月份为背景 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 事件说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| @change | 仅插入模式时生效 日期改变时触发 | {"year":2024,"month":2,"date":24} |
|
||||
| @confirm | 仅弹出模式时生效 确认选择时触发 | {"year":2024,"month":2,"date":24} |
|
||||
| @monthSwitch | 切换月份时触发 | {"year":2024,"month":2} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-calendar.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<view>
|
||||
<uni-calendar
|
||||
:insert="true"
|
||||
:lunar="true"
|
||||
:start-date="'2019-3-2'"
|
||||
:end-date="'2019-5-20'"
|
||||
@change="change"
|
||||
/>
|
||||
</view>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<view>
|
||||
<uni-calendar
|
||||
:insert="true"
|
||||
:lunar="true"
|
||||
:start-date="'2019-3-2'"
|
||||
:end-date="'2019-5-20'"
|
||||
@change="change"
|
||||
/>
|
||||
</view>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<view>
|
||||
<uni-calendar
|
||||
ref="calendar"
|
||||
:insert="false"
|
||||
@confirm="confirm"
|
||||
/>
|
||||
<button @click="open">打开日历</button>
|
||||
</view>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<view>
|
||||
<uni-calendar
|
||||
ref="calendar"
|
||||
:insert="false"
|
||||
@confirm="confirm"
|
||||
/>
|
||||
<button @click="open">打开日历</button>
|
||||
</view>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
open(){
|
||||
this.$refs.calendar.open();
|
||||
},
|
||||
confirm(e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
open(){
|
||||
this.$refs.calendar.open();
|
||||
},
|
||||
confirm(e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-calendar.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=calendar)
|
||||
- [Local Example](examples/uni-ui/uni-calendar.vue)
|
||||
@@ -0,0 +1,98 @@
|
||||
# uni-card
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-card
|
||||
|
||||
代码块： uCard
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-card />`（或 `<uni-card></uni-card>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| title | String | - | 标题文字 |
|
||||
| sub-title | String | - | 副标题文字 |
|
||||
| extra | String | - | 标题额外信息 |
|
||||
| thumbnail | String | - | 标题左侧缩略图,支持网络图片，本地图片，本图片需要传入一个绝对路径，如： /static/xxx.png |
|
||||
| cover | String | - | 封面图,支持网络图片，本地图片，本图片需要传入一个绝对路径，如： /static/xxx.png |
|
||||
| is-full | Boolean | false | 卡片内容是否通栏，为true时将去除padding值 |
|
||||
| is-shadow | Boolean | false | 卡片内容是否开启阴影 |
|
||||
| shadow | String | 0px 0px 3px 1px rgba(0, 0, 0, 0.08) | 卡片阴影,需符合 css 值 |
|
||||
| margin | String | 10px | 卡片外边距 |
|
||||
| spacing | String | 10px | 卡片内边距 |
|
||||
| padding | String | 10px | 卡片内容内边距 |
|
||||
| border | Boolean | true | 卡片边框 |
|
||||
| mode[弃用] | String | basic | 卡片模式 ，可选值， basic：基础卡片 ；style ：图文卡片 ； title ：标题卡片 |
|
||||
| note[弃用] | String | - | 底部信息 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 事件说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| @click | 点击 Card 触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-card.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-card>
|
||||
<text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
|
||||
</uni-card>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-card>
|
||||
<text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
|
||||
</uni-card>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<uni-card title="基础卡片" extra="额外信息">
|
||||
<text>这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
|
||||
</uni-card>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<uni-card title="基础卡片" extra="额外信息">
|
||||
<text>这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
|
||||
</uni-card>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
|
||||
<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
|
||||
</uni-card>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
|
||||
<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
|
||||
</uni-card>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-card.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=card)
|
||||
- [Local Example](examples/uni-ui/uni-card.vue)
|
||||
@@ -0,0 +1,134 @@
|
||||
# uni-collapse
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-collapse
|
||||
|
||||
代码块： uCollapse
|
||||
|
||||
关联组件： uni-collapse-item 、 uni-icons 。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-collapse />`（或 `<uni-collapse></uni-collapse>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| value/v-model | String/Array | - | 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array) |
|
||||
| accordion | Boolean | false | 是否开启手风琴效果 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @change | 切换面板时触发 | 切换面板时触发，如果是手风琴模式，返回类型为string，否则为array |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-collapse.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-collapse.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=collapse)
|
||||
- [Local Example](examples/uni-ui/uni-collapse.vue)
|
||||
@@ -0,0 +1,151 @@
|
||||
# uni-combox
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-combox
|
||||
|
||||
代码块： uCombox
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-combox />`（或 `<uni-combox></uni-combox>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| label | String | - | 标签文字 |
|
||||
| value | String | - | combox的值 |
|
||||
| labelWidth | String | auto | 标签宽度，有单位字符串，如:'100px' |
|
||||
| placeholder | String | - | 输入框占位符 |
|
||||
| candidates | Array/String | [] | 候选字段 |
|
||||
| emptyTips | String | 无匹配项 | 无匹配项时的提示语 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @input | combox输入事件 | 返回combox值 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-combox.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-combox label="所在城市" :candidates="candidates" placeholder="请选择所在城市" v-model="city"></uni-combox>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-combox label="所在城市" :candidates="candidates" placeholder="请选择所在城市" v-model="city"></uni-combox>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">组合框一般用于可以选择也可以输入的表单项。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line">
|
||||
<view class="example-body">
|
||||
<uni-combox :candidates="candidates" placeholder="请选择所在城市" v-model="city"></uni-combox>
|
||||
<view class="result-box">
|
||||
<text>所选城市为：{{city}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="无边框" subTitle="使用 border = false 取消边框" type="line">
|
||||
<view class="example-body">
|
||||
<uni-combox :border="false" :candidates="candidates" placeholder="请选择所在城市"></uni-combox>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="设置无匹配项时的提示语" subTitle="使用 emptyTips 属性设置无匹配项时的提示语" type="line">
|
||||
<view class="example-body">
|
||||
<uni-combox emptyTips="这里啥都没有" placeholder="请选择所在城市"></uni-combox>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">组合框一般用于可以选择也可以输入的表单项。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line">
|
||||
<view class="example-body">
|
||||
<uni-combox :candidates="candidates" placeholder="请选择所在城市" v-model="city"></uni-combox>
|
||||
<view class="result-box">
|
||||
<text>所选城市为：{{city}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="无边框" subTitle="使用 border = false 取消边框" type="line">
|
||||
<view class="example-body">
|
||||
<uni-combox :border="false" :candidates="candidates" placeholder="请选择所在城市"></uni-combox>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="设置无匹配项时的提示语" subTitle="使用 emptyTips 属性设置无匹配项时的提示语" type="line">
|
||||
<view class="example-body">
|
||||
<uni-combox emptyTips="这里啥都没有" placeholder="请选择所在城市"></uni-combox>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
candidates: ['北京', '南京', '东京', '武汉', '天津', '上海', '海口'],
|
||||
city: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```vue
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
padding: 12px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.result-box {
|
||||
text-align: center;
|
||||
padding: 20px 0px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-combox.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=combox)
|
||||
- [Local Example](examples/uni-ui/uni-combox.vue)
|
||||
@@ -0,0 +1,190 @@
|
||||
# uni-countdown
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-countdown
|
||||
|
||||
代码块： uCountDown
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-countdown />`（或 `<uni-countdown></uni-countdown>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| backgroundColor | String | #FFFFFF | 背景色 |
|
||||
| color | String | #000000 | 文字颜色 |
|
||||
| splitorColor | String | #000000 | 分割符号颜色 |
|
||||
| day | Number | 0 | 天数 |
|
||||
| hour | Number | 0 | 小时 |
|
||||
| minute | Number | 0 | 分钟 |
|
||||
| second | Number | 0 | 秒 |
|
||||
| showDay | Boolean | true | 是否显示天数 |
|
||||
| showHour | Boolean | true | 是否显示小时 |
|
||||
| showMinute | Boolean | true | 是否显示分钟 |
|
||||
| showColon | Boolean | true | 是否以冒号为分隔符 |
|
||||
| start | Boolean | true | 是否初始化组件后就开始倒计时 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @timeup | 倒计时时间到触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-countdown.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 一般用法 -->
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">倒计时组件主要用于促销商品剩余时间，发送短信验证等待时间等场景</text>
|
||||
</uni-card>
|
||||
<uni-section title="一般用法" type="line" padding>
|
||||
<uni-countdown :day="1" :hour="1" :minute="12" :second="40" />
|
||||
</uni-section>
|
||||
<uni-section title="不显示天数" subTitle="设置 show-day = false 不显示天" type="line" padding>
|
||||
<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12" />
|
||||
</uni-section>
|
||||
<uni-section title="文字分隔符" subTitle="设置 show-colon 属性设置分隔符样式" type="line" padding>
|
||||
<uni-countdown :minute="30" :second="0" :show-colon="false" />
|
||||
</uni-section>
|
||||
<uni-section title="修改颜色" subTitle="设置 color \ background 属性设置组件颜色" type="line" padding>
|
||||
<uni-countdown :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" />
|
||||
</uni-section>
|
||||
<uni-section title="修改字体大小" subTitle="设置 font-size 属性设置组件大小" type="line" padding>
|
||||
<uni-countdown :font-size="30" :day="1" :hour="2" :minute="30" :second="0" />
|
||||
</uni-section>
|
||||
<uni-section title="修改颜色 + 字体大小" type="line" padding>
|
||||
<uni-countdown :font-size="30" :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" />
|
||||
</uni-section>
|
||||
<uni-section title="自由控制开始/暂停" subTitle="设置 start 属性控制是否自动开启" type="line" padding>
|
||||
<uni-countdown :start="start" :day="1" :hour="1" :minute="12" :second="40" />
|
||||
</uni-section>
|
||||
<uni-section title="倒计时回调事件" type="line" padding>
|
||||
<uni-countdown :show-day="false" :second="timeupSecond" @timeup="timeup" />
|
||||
</uni-section>
|
||||
<uni-section title="动态赋值" type="line" padding>
|
||||
<uni-countdown :show-day="false" :hour="testHour" :minute="testMinute" :second="testSecond" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">倒计时组件主要用于促销商品剩余时间，发送短信验证等待时间等场景</text>
|
||||
</uni-card>
|
||||
<uni-section title="一般用法" type="line" padding>
|
||||
<uni-countdown :day="1" :hour="1" :minute="12" :second="40" />
|
||||
</uni-section>
|
||||
<uni-section title="不显示天数" subTitle="设置 show-day = false 不显示天" type="line" padding>
|
||||
<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12" />
|
||||
</uni-section>
|
||||
<uni-section title="文字分隔符" subTitle="设置 show-colon 属性设置分隔符样式" type="line" padding>
|
||||
<uni-countdown :minute="30" :second="0" :show-colon="false" />
|
||||
</uni-section>
|
||||
<uni-section title="修改颜色" subTitle="设置 color \ background 属性设置组件颜色" type="line" padding>
|
||||
<uni-countdown :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" />
|
||||
</uni-section>
|
||||
<uni-section title="修改字体大小" subTitle="设置 font-size 属性设置组件大小" type="line" padding>
|
||||
<uni-countdown :font-size="30" :day="1" :hour="2" :minute="30" :second="0" />
|
||||
</uni-section>
|
||||
<uni-section title="修改颜色 + 字体大小" type="line" padding>
|
||||
<uni-countdown :font-size="30" :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" />
|
||||
</uni-section>
|
||||
<uni-section title="自由控制开始/暂停" subTitle="设置 start 属性控制是否自动开启" type="line" padding>
|
||||
<uni-countdown :start="start" :day="1" :hour="1" :minute="12" :second="40" />
|
||||
</uni-section>
|
||||
<uni-section title="倒计时回调事件" type="line" padding>
|
||||
<uni-countdown :show-day="false" :second="timeupSecond" @timeup="timeup" />
|
||||
</uni-section>
|
||||
<uni-section title="动态赋值" type="line" padding>
|
||||
<uni-countdown :show-day="false" :hour="testHour" :minute="testMinute" :second="testSecond" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
testHour: 1,
|
||||
testMinute: 0,
|
||||
testSecond: 0,
|
||||
start: false,
|
||||
timeupSecond: 10
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.testHour = 1
|
||||
this.testMinute = 1
|
||||
this.testSecond = 0
|
||||
this.start = true
|
||||
}, 3000)
|
||||
setTimeout(() => {
|
||||
this.start = false
|
||||
}, 10000)
|
||||
},
|
||||
methods: {
|
||||
timeup() {
|
||||
uni.showToast({
|
||||
title: '时间到'
|
||||
})
|
||||
this.timeupSecond = 29
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-countdown.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=countdown)
|
||||
- [Local Example](examples/uni-ui/uni-countdown.vue)
|
||||
@@ -0,0 +1,198 @@
|
||||
# uni-data-checkbox
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-data-checkbox
|
||||
|
||||
代码块： uDataCheckbox
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-data-checkbox />`（或 `<uni-data-checkbox></uni-data-checkbox>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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映射到数据中的其他字段 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 事件说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| @change | 选中状态改变时触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-data-checkbox.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-checkbox multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: [0,2],
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-checkbox multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: [0,2],
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-checkbox min="1" max="2" multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: [0,2],
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-checkbox min="1" max="2" multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: [0,2],
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-data-checkbox.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=data-checkbox)
|
||||
- [Local Example](examples/uni-ui/uni-data-checkbox.vue)
|
||||
@@ -0,0 +1,239 @@
|
||||
# uni-data-picker
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-data-picker
|
||||
|
||||
代码块： uDataPicker 关联组件： uni-data-pickerview 、 uni-load-more 。
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-data-picker />`（或 `<uni-data-picker></uni-data-picker>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| v-model | String/ Number | - | - | 绑定数据 |
|
||||
| spaceInfo | Object | - | - | 服务空间配置， 详情 |
|
||||
| localdata | Array | - | - | 数据， 详情 |
|
||||
| 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 | 分步查询时，点击节点请求数据 |
|
||||
| self-field | String | - | - | 分步查询时当前字段名称 |
|
||||
| parent-field | String | - | - | 分步查询时父字段名称 |
|
||||
| collection | String | - | - | 表名。支持输入多个表名，用 , 分割 |
|
||||
| field | String | - | - | 查询字段，多个字段用 , 分割 |
|
||||
| where | String | - | - | 查询条件，内容较多，另见jql文档： 详情 |
|
||||
| orderby | String | - | - | 排序字段及正序倒叙设置 |
|
||||
| popup-title | String | | | 弹出层标题 |
|
||||
| map | Object | - | {text:'text',value:'value'} | 字段映射，将text/value映射到数据中的其他字段 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| @change | EventHandle | 选择完成时触发 {detail: {value}} |
|
||||
| @nodeclick | EventHandle | 节点被点击时触发 |
|
||||
| @popupopened | EventHandle | 弹出层弹出时触发 |
|
||||
| @popupclosed | EventHandle | 弹出层关闭时触发 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-data-picker.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onchange(e) {
|
||||
const value = e.detail.value
|
||||
},
|
||||
onnodeclick(node) {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onchange(e) {
|
||||
const value = e.detail.value
|
||||
},
|
||||
onnodeclick(node) {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-picker :localdata="items" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-picker :localdata="items" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-data-picker.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=data-picker)
|
||||
- [Local Example](examples/uni-ui/uni-data-picker.vue)
|
||||
@@ -0,0 +1,175 @@
|
||||
# uni-data-select
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-data-select
|
||||
|
||||
代码块： uDataSelect
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-data-select />`（或 `<uni-data-select></uni-data-select>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 说明 | 兼容说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| value/v-model | String/Number | - | - | 已选择数据的 value 值（当其值为0时不进行初始化赋值） | |
|
||||
| localdata | Array | - | - | 本地渲染数据 | |
|
||||
| clear | Boolean | - | - | 是否可以清空已选项 | |
|
||||
| label | String | | | 左侧标题 | |
|
||||
| placeholder | String | - | 请选择 | 输入框的提示文字 | |
|
||||
| disabled | Boolean | - | false | 是否开启禁用 | |
|
||||
| emptyTips | String | - | 暂无数据 | 没有数据时显示的文字 ，本地数据无效 | |
|
||||
| placement | String | bottom,top | bottom | 弹出时位置 | |
|
||||
| page-size | Number | - | 20 | 返回的数据量（云端请求时有效，更多云端属性详见下方） | |
|
||||
| multiple | Boolean | - | false | 是否开启多选 | 1.1.0 新增 |
|
||||
| wrap | Boolean | - | false | 是否开启换行展示(默认展示 1 行) | 1.1.0 新增 |
|
||||
| align | String | left,center,right | left | 选择文字的位置 | 1.1.0 新增 |
|
||||
| hideRight | Boolean | - | false | 是否隐藏右侧按钮 | 1.1.0 新增 |
|
||||
| mode | String | default,underline,none | default | 边框样式,default(四周边框),underline(下边框),none(无边框) | 1.1.0 新增 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 事件说明 | 返回参数 | 兼容性说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @change | 选中状态改变时触发事件 | - | - |
|
||||
| @open | 选择框开启时触发 | - | 1.1.0 新增 |
|
||||
| @close | 选择框关闭时触发 | - | 1.1.0 新增 |
|
||||
| @clear | 点击清除按钮之后触发 | - | 1.1.0 新增 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-data-select.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-select
|
||||
v-model="value"
|
||||
:localdata="range"
|
||||
@change="change"
|
||||
></uni-data-select>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-select
|
||||
v-model="value"
|
||||
:localdata="range"
|
||||
@change="change"
|
||||
></uni-data-select>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 1,
|
||||
range: [
|
||||
{ value: 0, text: "篮球" },
|
||||
{ value: 1, text: "足球" },
|
||||
{ value: 2, text: "游泳" },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log("e:", e);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 1,
|
||||
range: [
|
||||
{ value: 0, text: "篮球" },
|
||||
{ value: 1, text: "足球" },
|
||||
{ value: 2, text: "游泳" },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log("e:", e);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-select multiple v-model="value" :localdata="range" @change="change"></uni-data-select>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: [0,2],
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-select multiple v-model="value" :localdata="range" @change="change"></uni-data-select>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: [0,2],
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-data-select.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=data-select)
|
||||
- [Local Example](examples/uni-ui/uni-data-select.vue)
|
||||
@@ -0,0 +1,146 @@
|
||||
# uni-dateformat
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-dateformat
|
||||
|
||||
代码块： uDateformat
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-dateformat />`（或 `<uni-dateformat></uni-dateformat>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| date | Object|String|Number | Date.now() | 要格式化的日期对象/日期字符串/时间戳 |
|
||||
| threshold | Array | [0, 0] | 转化类型阈值 |
|
||||
| format | String | 'yyyy/MM/dd hh:mm:ss' | 格式字符串 |
|
||||
| locale | String | zh | 格式化使用的语言，目前支持zh（中文）、en（英文） |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-dateformat.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-dateformat.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 一般用法 -->
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">日期格式化组件，通常用于需要展示友好的日期格式的场景。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="now - 7200000"></uni-dateformat>
|
||||
<uni-dateformat date="2020/12/12"></uni-dateformat>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="设置阈值" subTitle="阈值用于控制什么时候显示刚刚|马上，什么时候显示xx分钟前|xx分钟后" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="now - 30000" :threshold="[0,3600000]"></uni-dateformat>
|
||||
<uni-dateformat :date="now - 30000" :threshold="[0,0]"></uni-dateformat>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="使用英文" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="now - 1200000" :threshold="[60000,3600000]" locale="en"></uni-dateformat>
|
||||
<uni-dateformat :date="now - 30000" :threshold="[60000,3600000]" locale="en"></uni-dateformat>
|
||||
<uni-dateformat :date="now - 80000" :threshold="[60000,3600000]" locale="en"></uni-dateformat>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">日期格式化组件，通常用于需要展示友好的日期格式的场景。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="now - 7200000"></uni-dateformat>
|
||||
<uni-dateformat date="2020/12/12"></uni-dateformat>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="设置阈值" subTitle="阈值用于控制什么时候显示刚刚|马上，什么时候显示xx分钟前|xx分钟后" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="now - 30000" :threshold="[0,3600000]"></uni-dateformat>
|
||||
<uni-dateformat :date="now - 30000" :threshold="[0,0]"></uni-dateformat>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="使用英文" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="now - 1200000" :threshold="[60000,3600000]" locale="en"></uni-dateformat>
|
||||
<uni-dateformat :date="now - 30000" :threshold="[60000,3600000]" locale="en"></uni-dateformat>
|
||||
<uni-dateformat :date="now - 80000" :threshold="[60000,3600000]" locale="en"></uni-dateformat>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
now: Date.now()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```vue
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-dateformat.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=dateformat)
|
||||
- [Local Example](examples/uni-ui/uni-dateformat.vue)
|
||||
@@ -0,0 +1,469 @@
|
||||
# uni-datetime-picker
|
||||
|
||||
## Instructions
|
||||
|
||||
重要通知
|
||||
|
||||
组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载 非uni_modules版本 ，旧版本将不再维护
|
||||
|
||||
组件名：uni-datetime-picker
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-datetime-picker />`（或 `<uni-datetime-picker></uni-datetime-picker>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 值域 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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 | - | 是否显示秒，只显示时分 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名称 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| change | 确定日期时间时触发的事件，参数为当前选择的日期对象 | 单选返回日期字符串，如：'2010-02-3'；范围选返回日期字符串数组，如：['2020-10-1', '2021-4-1'] |
|
||||
| maskClick | 点击遮罩层触发 | - |
|
||||
| show | 弹窗弹出时触发 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-datetime-picker.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="page container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">可以同时选择日期和时间的选择器</text>
|
||||
</uni-card>
|
||||
<uni-section :title="'日期用法：' + single" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
|
||||
</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="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
|
||||
</view>
|
||||
<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
|
||||
</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 returnType="timestamp" v-model="single" @change="changeLog($event)" />
|
||||
</view>
|
||||
<uni-section :title="'date 对象用法：' + datetimesingle" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker type="datetime" returnType="date" v-model="datetimesingle" @change="changeLog" />
|
||||
</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="'隐藏清除按钮用法：' + single" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="single" :clearIcon="false" />
|
||||
</view>
|
||||
<uni-section :title="'disabled用法：' + single" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="single" disabled />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="page container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">可以同时选择日期和时间的选择器</text>
|
||||
</uni-card>
|
||||
<uni-section :title="'日期用法：' + single" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
|
||||
</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="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
|
||||
</view>
|
||||
<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
|
||||
</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 returnType="timestamp" v-model="single" @change="changeLog($event)" />
|
||||
</view>
|
||||
<uni-section :title="'date 对象用法：' + datetimesingle" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker type="datetime" returnType="date" v-model="datetimesingle" @change="changeLog" />
|
||||
</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="'隐藏清除按钮用法：' + single" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="single" :clearIcon="false" />
|
||||
</view>
|
||||
<uni-section :title="'disabled用法：' + single" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="single" disabled />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
single: '',
|
||||
datetimesingle: '',
|
||||
range: ['2021-02-1', '2021-3-28'],
|
||||
datetimerange: [],
|
||||
start: Date.now() - 1000000000,
|
||||
end: Date.now() + 1000000000
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
datetimesingle(newval) {
|
||||
console.log('单选:', this.datetimesingle);
|
||||
},
|
||||
range(newval) {
|
||||
console.log('范围选:', this.range);
|
||||
},
|
||||
datetimerange(newval) {
|
||||
console.log('范围选:', this.datetimerange);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.datetimesingle = Date.now() - 2*24*3600*1000
|
||||
this.single = '2021-2-12'
|
||||
this.datetimerange = ["2021-07-08 0:01:10", "2021-08-08 23:59:59"]
|
||||
},3000)
|
||||
},
|
||||
|
||||
methods:{
|
||||
change(e) {
|
||||
this.single = e
|
||||
console.log('change事件:', this.single = e);
|
||||
},
|
||||
changeLog(e) {
|
||||
console.log('change事件:', e);
|
||||
},
|
||||
maskClick(e){
|
||||
console.log('maskClick事件:', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-datetime-picker.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=datetime-picker)
|
||||
- [Local Example](examples/uni-ui/uni-datetime-picker.vue)
|
||||
@@ -0,0 +1,285 @@
|
||||
# uni-drawer
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-drawer
|
||||
|
||||
代码块： uDrawer
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-drawer />`（或 `<uni-drawer></uni-drawer>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| mask | Boolean | true | 是否显示遮罩 |
|
||||
| maskClick | Boolean | true | 点击遮罩是否可以关闭抽屉 |
|
||||
| mode | String | left | Drawer滑出位置，可选值：left（从左侧滑出）， right（从右侧滑出） |
|
||||
| width | Number | 220 | Drawer 宽度，仅vue页面设置生效 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @change | 抽屉状态发生变化触发事件 | true：抽屉已经打开；false：抽屉已经关闭； |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-drawer.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">这是抽屉式导航组件使用示例，可以指定菜单左侧或者右侧弹出（仅初始化生效），组件内部可以放置任何内容。点击页面按钮即可显示导航菜单。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="左侧滑出" type="line">
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="showDrawer('showLeft')"><text class="word-btn-white">显示Drawer</text>
|
||||
</button>
|
||||
<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
|
||||
<view class="close">
|
||||
<button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭Drawer</text></button>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="右侧滑出" type="line">
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">显示Drawer</text>
|
||||
</button>
|
||||
<uni-drawer ref="showRight" mode="right" :mask-click="false" @change="change($event,'showRight')">
|
||||
<view class="scroll-view">
|
||||
<scroll-view class="scroll-view-box" scroll-y="true">
|
||||
<view class="info">
|
||||
<text class="info-text">右侧遮罩只能通过按钮关闭，不能通过点击遮罩关闭</text>
|
||||
</view>
|
||||
<view class="close">
|
||||
<button @click="closeDrawer('showRight')"><text class="word-btn-white">关闭Drawer</text></button>
|
||||
</view>
|
||||
<view class="info-content" v-for="item in 100" :key="item">
|
||||
<text>可滚动内容 {{item}}</text>
|
||||
</view>
|
||||
<view class="close">
|
||||
<button @click="closeDrawer('showRight')"><text class="word-btn-white">关闭Drawer</text></button>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">这是抽屉式导航组件使用示例，可以指定菜单左侧或者右侧弹出（仅初始化生效），组件内部可以放置任何内容。点击页面按钮即可显示导航菜单。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="左侧滑出" type="line">
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="showDrawer('showLeft')"><text class="word-btn-white">显示Drawer</text>
|
||||
</button>
|
||||
<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
|
||||
<view class="close">
|
||||
<button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭Drawer</text></button>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="右侧滑出" type="line">
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">显示Drawer</text>
|
||||
</button>
|
||||
<uni-drawer ref="showRight" mode="right" :mask-click="false" @change="change($event,'showRight')">
|
||||
<view class="scroll-view">
|
||||
<scroll-view class="scroll-view-box" scroll-y="true">
|
||||
<view class="info">
|
||||
<text class="info-text">右侧遮罩只能通过按钮关闭，不能通过点击遮罩关闭</text>
|
||||
</view>
|
||||
<view class="close">
|
||||
<button @click="closeDrawer('showRight')"><text class="word-btn-white">关闭Drawer</text></button>
|
||||
</view>
|
||||
<view class="info-content" v-for="item in 100" :key="item">
|
||||
<text>可滚动内容 {{item}}</text>
|
||||
</view>
|
||||
<view class="close">
|
||||
<button @click="closeDrawer('showRight')"><text class="word-btn-white">关闭Drawer</text></button>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showRight: false,
|
||||
showLeft: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm() {},
|
||||
// 打开窗口
|
||||
showDrawer(e) {
|
||||
this.$refs[e].open()
|
||||
},
|
||||
// 关闭窗口
|
||||
closeDrawer(e) {
|
||||
this.$refs[e].close()
|
||||
},
|
||||
// 抽屉状态发生变化触发
|
||||
change(e, type) {
|
||||
console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
|
||||
this[type] = e
|
||||
}
|
||||
},
|
||||
onNavigationBarButtonTap(e) {
|
||||
if (this.showLeft) {
|
||||
this.$refs.showLeft.close()
|
||||
} else {
|
||||
this.$refs.showLeft.open()
|
||||
}
|
||||
},
|
||||
// app端拦截返回事件 ，仅app端生效
|
||||
onBackPress() {
|
||||
if (this.showRight || this.showLeft) {
|
||||
this.$refs.showLeft.close()
|
||||
this.$refs.showRight.close()
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
padding: 10px;
|
||||
}
|
||||
.scroll-view {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
flex:1
|
||||
}
|
||||
// 处理抽屉内容滚动
|
||||
.scroll-view-box {
|
||||
flex: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.info {
|
||||
padding: 15px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.info-content {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
.close {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-drawer.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=drawer)
|
||||
- [Local Example](examples/uni-ui/uni-drawer.vue)
|
||||
@@ -0,0 +1,113 @@
|
||||
# uni-easyinput
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-easyinput
|
||||
|
||||
代码块： uEasyinput
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-easyinput />`（或 `<uni-easyinput></uni-easyinput>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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 | - | 24 | 清除图标的大小，单位px |
|
||||
| prefixIcon | String | - | - | 输入框头部图标 |
|
||||
| suffixIcon | String | - | - | 输入框尾部图标 |
|
||||
| trim | Boolean/String | 见 trim Options | false | 是否自动去除空格，传入类型为 Boolean 时，自动去除前后空格 |
|
||||
| inputBorder | Boolean | - | true | 是否显示input输入框的边框 |
|
||||
| styles | Object | - | - | 样式自定义 |
|
||||
| passwordIcon | Boolean | - | true | type=password 时，是否显示小眼睛图标 |
|
||||
| adjust-position | Boolean | - | true | 弹起键盘时，是否上推页面，平台差异性与内置input组件一致 |
|
||||
| primaryColor | String | - | #2979ff | 设置清除按钮focus时的颜色 |
|
||||
| cursorSpacing | Number | - | 0 | 指定光标与键盘的距离，单位 px 。取 textarea/input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离。详见 textarea / input |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 | 兼容说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @input | 输入框内容发生变化时触发 | - | |
|
||||
| @clear | 点击右侧叉号图标时触发 | - | 1.1.0新增 |
|
||||
| @focus | 输入框获得焦点时触发 | - | |
|
||||
| @blur | 输入框失去焦点时触发 | - | |
|
||||
| @confirm | 点击完成按钮时触发 | - | |
|
||||
| @iconClick | 点击图标时触发 | prefix/suffix | |
|
||||
| @change | 仅在输入框失去焦点或用户按下回车时触发 | | 1.1.0新增 |
|
||||
| @keyboardheightchange | 键盘高度发生变化时触发 | | 1.1.6新增 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-easyinput.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<!-- 输入框头部图标 -->
|
||||
<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
|
||||
<!-- 展示输入框尾部图标 -->
|
||||
<uni-easyinput suffixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<uni-easyinput>
|
||||
<template #right>
|
||||
<view>密码</view>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<uni-easyinput>
|
||||
<template #right>
|
||||
<view>密码</view>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-easyinput.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=easyinput)
|
||||
- [Local Example](examples/uni-ui/uni-easyinput.vue)
|
||||
@@ -0,0 +1,239 @@
|
||||
# uni-fab
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-fab
|
||||
|
||||
代码块： uFab
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-fab />`（或 `<uni-fab></uni-fab>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| pattern | Object | - | 可选样式配置项 |
|
||||
| horizontal | String | 'left' | 水平对齐方式。 left :左对齐， right ：右对齐 |
|
||||
| vertical | String | 'bottom' | 垂直对齐方式。 bottom :下对齐， top ：上对齐 |
|
||||
| direction | String | 'horizontal' | 展开菜单显示方式。 horizontal :水平显示， vertical ：垂直显示 |
|
||||
| popMenu | Boolean | true | 是否使用弹出菜单 |
|
||||
| content | Array | - | 展开菜单内容配置项 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 参数 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| @trigger | Function | 展开菜单点击事件，返回点击信息 |
|
||||
| @fabClick | Function | 悬浮按钮点击事件 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-fab.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-fab
|
||||
:pattern="pattern"
|
||||
:content="content"
|
||||
:horizontal="horizontal"
|
||||
:vertical="vertical"
|
||||
:direction="direction"
|
||||
@trigger="trigger"
|
||||
></uni-fab>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-fab
|
||||
:pattern="pattern"
|
||||
:content="content"
|
||||
:horizontal="horizontal"
|
||||
:vertical="vertical"
|
||||
:direction="direction"
|
||||
@trigger="trigger"
|
||||
></uni-fab>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">uni-ui 规范颜色色板，通过内置样式快速指定元素前景和背景色。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基本功能" subTitle="点击按钮,切换 fab 不同状态" type="line">
|
||||
<view class="warp">
|
||||
<button class="button" type="primary" @click="switchBtn(0)">切换菜单方向({{ directionStr }})</button>
|
||||
<button class="button" type="primary" @click="switchBtn('left', 'bottom')">左下角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('right', 'bottom')">右下角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('left', 'top')">左上角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('left', 'top')">左上角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('right', 'top')">右上角显示</button>
|
||||
<button class="button" type="primary" @click="switchColor">修改颜色</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
|
||||
:direction="direction" @trigger="trigger" @fabClick="fabClick" />
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">uni-ui 规范颜色色板，通过内置样式快速指定元素前景和背景色。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基本功能" subTitle="点击按钮,切换 fab 不同状态" type="line">
|
||||
<view class="warp">
|
||||
<button class="button" type="primary" @click="switchBtn(0)">切换菜单方向({{ directionStr }})</button>
|
||||
<button class="button" type="primary" @click="switchBtn('left', 'bottom')">左下角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('right', 'bottom')">右下角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('left', 'top')">左上角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('left', 'top')">左上角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('right', 'top')">右上角显示</button>
|
||||
<button class="button" type="primary" @click="switchColor">修改颜色</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
|
||||
:direction="direction" @trigger="trigger" @fabClick="fabClick" />
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
title: 'uni-fab',
|
||||
directionStr: '垂直',
|
||||
horizontal: 'left',
|
||||
vertical: 'bottom',
|
||||
direction: 'horizontal',
|
||||
pattern: {
|
||||
color: '#7A7E83',
|
||||
backgroundColor: '#fff',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#007AFF',
|
||||
iconColor: '#fff'
|
||||
},
|
||||
is_color_type: false,
|
||||
content: [{
|
||||
iconPath: '/static/image.png',
|
||||
selectedIconPath: '/static/image-active.png',
|
||||
text: '相册',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
iconPath: '/static/home.png',
|
||||
selectedIconPath: '/static/home-active.png',
|
||||
text: '首页',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
iconPath: '/static/star.png',
|
||||
selectedIconPath: '/static/star-active.png',
|
||||
text: '收藏',
|
||||
active: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onBackPress() {
|
||||
if (this.$refs.fab.isShow) {
|
||||
this.$refs.fab.close()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
methods: {
|
||||
trigger(e) {
|
||||
console.log(e)
|
||||
this.content[e.index].active = !e.item.active
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定')
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
fabClick() {
|
||||
uni.showToast({
|
||||
title: '点击了悬浮按钮',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
switchBtn(hor, ver) {
|
||||
if (hor === 0) {
|
||||
this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
|
||||
this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
|
||||
} else {
|
||||
this.horizontal = hor
|
||||
this.vertical = ver
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
switchColor() {
|
||||
this.is_color_type = !this.is_color_type
|
||||
if (this.is_color_type) {
|
||||
this.pattern.iconColor = '#aaa'
|
||||
this.pattern.buttonColor = '#fff'
|
||||
} else {
|
||||
this.pattern.iconColor = '#fff'
|
||||
this.pattern.buttonColor = '#007AFF'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.warp {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-fab.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=fab)
|
||||
- [Local Example](examples/uni-ui/uni-fab.vue)
|
||||
@@ -0,0 +1,204 @@
|
||||
# uni-fav
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-fav
|
||||
|
||||
代码块： uFav
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-fav />`（或 `<uni-fav></uni-fav>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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: '已收藏'} | 收藏按钮文字 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| click | 点击 fav按钮 触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-fav.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-fav :checked="checked" @click="onClick"/>
|
||||
<uni-fav :checked="checked" class="favBtn" circle="true" bgColor="#dd524d" bgColorChecked="#007aff" @click="onClick"/>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-fav :checked="checked" @click="onClick"/>
|
||||
<uni-fav :checked="checked" class="favBtn" circle="true" bgColor="#dd524d" bgColorChecked="#007aff" @click="onClick"/>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">用于收藏功能，可点击切换选中、不选中的状态。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line">
|
||||
<view class="example-body">
|
||||
<uni-fav :checked="checkList[0]" class="favBtn" @click="favClick(0)" />
|
||||
<uni-fav :checked="checkList[1]" :star="false" class="favBtn" @click="favClick(1)" />
|
||||
<uni-fav :checked="checkList[2]" class="favBtn" :circle="true" bg-color="#dd524d"
|
||||
bg-color-checked="#007aff" fg-color="#ffffff" fg-color-checked="#ffffff" @click="favClick(2)" />
|
||||
<uni-fav :checked="checkList[3]" class="favBtn" bg-color="#f8f8f8" bg-color-checked="#eeeeee"
|
||||
fg-color="#333333" fg-color-checked="#333333" @click="favClick(3)" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义文字" type="line">
|
||||
<view class="example-body">
|
||||
<uni-fav :checked="checkList[4]" :content-text="contentText" @click="favClick(4)" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="在自定义导航栏使用" type="line">
|
||||
<uni-nav-bar style="width: 100%;" :fixed="false" left-icon="arrowleft" title="标题" color="#333333"
|
||||
background-color="#FFFFFF">
|
||||
<template v-slot:right>
|
||||
<uni-fav :checked="checkList[5]" :circle="true" @click="favClick(5)" />
|
||||
</template>
|
||||
</uni-nav-bar>
|
||||
</uni-section>
|
||||
<view class="example-body example-body-fullWidth">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">用于收藏功能，可点击切换选中、不选中的状态。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line">
|
||||
<view class="example-body">
|
||||
<uni-fav :checked="checkList[0]" class="favBtn" @click="favClick(0)" />
|
||||
<uni-fav :checked="checkList[1]" :star="false" class="favBtn" @click="favClick(1)" />
|
||||
<uni-fav :checked="checkList[2]" class="favBtn" :circle="true" bg-color="#dd524d"
|
||||
bg-color-checked="#007aff" fg-color="#ffffff" fg-color-checked="#ffffff" @click="favClick(2)" />
|
||||
<uni-fav :checked="checkList[3]" class="favBtn" bg-color="#f8f8f8" bg-color-checked="#eeeeee"
|
||||
fg-color="#333333" fg-color-checked="#333333" @click="favClick(3)" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义文字" type="line">
|
||||
<view class="example-body">
|
||||
<uni-fav :checked="checkList[4]" :content-text="contentText" @click="favClick(4)" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="在自定义导航栏使用" type="line">
|
||||
<uni-nav-bar style="width: 100%;" :fixed="false" left-icon="arrowleft" title="标题" color="#333333"
|
||||
background-color="#FFFFFF">
|
||||
<template v-slot:right>
|
||||
<uni-fav :checked="checkList[5]" :circle="true" @click="favClick(5)" />
|
||||
</template>
|
||||
</uni-nav-bar>
|
||||
</uni-section>
|
||||
<view class="example-body example-body-fullWidth">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
checkList: [false, false, false, false, false, false],
|
||||
contentText: {
|
||||
contentDefault: '追番',
|
||||
contentFav: '已追番'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
favClick(index) {
|
||||
this.checkList[index] = !this.checkList[index]
|
||||
console.log(this.checkList[index]);
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
display: flex;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
/* #ifdef MP-ALIPAY */
|
||||
.uni-fav {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
|
||||
.favBtn {
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
}
|
||||
|
||||
|
||||
.example-body-fullWidth {
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.example-body-first {
|
||||
/* #ifndef APP-PLUS-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.favBtn-nav {
|
||||
// left:-50rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-fav.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=fav)
|
||||
- [Local Example](examples/uni-ui/uni-fav.vue)
|
||||
@@ -0,0 +1,217 @@
|
||||
# uni-file-picker
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-file-picker
|
||||
|
||||
代码块： uFilePicker
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-file-picker />`（或 `<uni-file-picker></uni-file-picker>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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 | - | 是否自动上传，值为 false 则只触发@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 时的样式 |
|
||||
| sizeType | Array | ['original', 'compressed'] | 'original', 'compressed' | original 原图，compressed 压缩图，默认二者都有 |
|
||||
| sourceType | Array | ['album', 'camera'] | 'album', 'camera' | album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项 |
|
||||
| dir | String | "/" | - | 需要上传到的文件夹，默认为 "/" ,即上传到根目录 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @select | 选择文件后触发 | 见下文 |
|
||||
| @progress | 文件上传时触发 | 见下文 |
|
||||
| @success | 上传成功触发 | 见下文 |
|
||||
| @fail | 上传失败触发 | 见下文 |
|
||||
| @delete | 文件从列表移除时触发 | 见下文 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-file-picker.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-file-picker
|
||||
v-model="imageValue"
|
||||
fileMediatype="image"
|
||||
mode="grid"
|
||||
@select="select"
|
||||
@progress="progress"
|
||||
@success="success"
|
||||
@fail="fail"
|
||||
/>
|
||||
<script>
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-file-picker
|
||||
v-model="imageValue"
|
||||
fileMediatype="image"
|
||||
mode="grid"
|
||||
@select="select"
|
||||
@progress="progress"
|
||||
@success="success"
|
||||
@fail="fail"
|
||||
/>
|
||||
<script>
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<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"
|
||||
/>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```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"
|
||||
/>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-file-picker ref="files" :auto-upload="false"/>
|
||||
<button @click="upload">上传文件</button>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {},
|
||||
methods:{
|
||||
upload(){
|
||||
this.$refs.files.upload()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-file-picker ref="files" :auto-upload="false"/>
|
||||
<button @click="upload">上传文件</button>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {},
|
||||
methods:{
|
||||
upload(){
|
||||
this.$refs.files.upload()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-file-picker.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=file-picker)
|
||||
- [Local Example](examples/uni-ui/uni-file-picker.vue)
|
||||
@@ -0,0 +1,139 @@
|
||||
# uni-forms
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-forms
|
||||
|
||||
代码块： uForms 、 uni-forms-item 关联组件： uni-forms-item 、 uni-easyinput 、 uni-data-checkbox 、 uni-group 。
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-forms />`（或 `<uni-forms></uni-forms>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| required | Boolean | - | - | 是否必填，配置此参数不会显示输入框左边的必填星号，如需要，请配置 uni-forms-item 组件的的required为true |
|
||||
| range | Array | - | - | 数组至少要有一个元素，且数组内的每一个元素都是唯一的。 |
|
||||
| format | String | - | - | 内置校验规则，如这些规则无法满足需求，可以使用正则匹配或者自定义规则 |
|
||||
| pattern | RegExp | - | - | 正则表达式，注意事项见下方说明 |
|
||||
| maximum | Number | - | - | 校验最大值(大于) |
|
||||
| minimum | Number | - | - | 校验最小值(小于) |
|
||||
| maxLength | Number | - | - | 校验数据最大长度 |
|
||||
| errorMessage | String | - | - | 校验失败提示信息语，可添加属性占位符，当前表格内属性都可用作占位符 |
|
||||
| validateFunction | Function | - | - | 自定义校验规则 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 |
|
||||
| --- | --- |
|
||||
| @validate | 任意表单项被校验后触发，返回表单校验信息 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="">
|
||||
<uni-forms :modelValue="formData">
|
||||
<uni-forms-item label="姓名" name="name">
|
||||
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="年龄" name="age">
|
||||
<input type="text" v-model="formData.age" placeholder="请输入年龄" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item required name="hobby" label="兴趣爱好">
|
||||
<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby"/>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<button @click="submitForm">Submit</button>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="">
|
||||
<uni-forms :modelValue="formData">
|
||||
<uni-forms-item label="姓名" name="name">
|
||||
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="年龄" name="age">
|
||||
<input type="text" v-model="formData.age" placeholder="请输入年龄" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item required name="hobby" label="兴趣爱好">
|
||||
<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby"/>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<button @click="submitForm">Submit</button>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="">
|
||||
<uni-forms :modelValue="formData" label-position="top">
|
||||
<uni-forms-item label="姓名" name="name">
|
||||
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item required name="hobby" label="兴趣爱好">
|
||||
<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby"/>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="">
|
||||
<uni-forms :modelValue="formData" label-position="top">
|
||||
<uni-forms-item label="姓名" name="name">
|
||||
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item required name="hobby" label="兴趣爱好">
|
||||
<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby"/>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<!-- rules 内容详见下方完整示例 -->
|
||||
<uni-forms ref="form" :rules="rules">
|
||||
...
|
||||
</uni-forms>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<!-- rules 内容详见下方完整示例 -->
|
||||
<uni-forms ref="form" :rules="rules">
|
||||
...
|
||||
</uni-forms>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=forms)
|
||||
- [Local Example](examples/uni-ui/uni-forms.vue)
|
||||
@@ -0,0 +1,296 @@
|
||||
# uni-goods-nav
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-goods-nav
|
||||
|
||||
代码块： uGoodsNav
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-goods-nav />`（或 `<uni-goods-nav></uni-goods-nav>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| options | Array | - | 组件参数 |
|
||||
| buttonGroup | Array | - | 组件按钮组参数 |
|
||||
| fill | Boolean | false | 按钮是否平铺 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @click | 左侧点击事件 | e = {index,content} |
|
||||
| @buttonClick | 右侧按钮组点击事件 | e = {index,content} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-goods-nav.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
|
||||
</template>
|
||||
<script>
|
||||
|
||||
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++
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
|
||||
</template>
|
||||
<script>
|
||||
|
||||
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++
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="uni-container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6"> uni-goods-nav 组件主要用于电商类应用底部导航，可自定义加入购物车，购买等操作</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line">
|
||||
<uni-goods-nav @click="onClick" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义用法" type="line">
|
||||
<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
|
||||
@buttonClick="buttonClick" />
|
||||
<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup1" @click="onClick"
|
||||
@buttonClick="buttonClick" style="margin-top: 20px;" />
|
||||
</uni-section>
|
||||
<view class="goods-carts">
|
||||
<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
|
||||
@buttonClick="buttonClick" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="uni-container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6"> uni-goods-nav 组件主要用于电商类应用底部导航，可自定义加入购物车，购买等操作</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line">
|
||||
<uni-goods-nav @click="onClick" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义用法" type="line">
|
||||
<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
|
||||
@buttonClick="buttonClick" />
|
||||
<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup1" @click="onClick"
|
||||
@buttonClick="buttonClick" style="margin-top: 20px;" />
|
||||
</uni-section>
|
||||
<view class="goods-carts">
|
||||
<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
|
||||
@buttonClick="buttonClick" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
icon: 'chat',
|
||||
text: '客服'
|
||||
}, {
|
||||
icon: 'shop',
|
||||
text: '店铺',
|
||||
info: 2,
|
||||
infoBackgroundColor: '#007aff',
|
||||
infoColor: "#f5f5f5"
|
||||
}, {
|
||||
icon: 'cart',
|
||||
text: '购物车',
|
||||
info: 2
|
||||
}],
|
||||
buttonGroup: [{
|
||||
text: '加入购物车',
|
||||
backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
text: '立即购买',
|
||||
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
|
||||
color: '#fff'
|
||||
}
|
||||
],
|
||||
customButtonGroup: [{
|
||||
text: '加入购物车',
|
||||
backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
text: '立即购买',
|
||||
backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
|
||||
color: '#fff'
|
||||
}
|
||||
],
|
||||
customButtonGroup1: [{
|
||||
text: '立即购买',
|
||||
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
|
||||
color: '#fff'
|
||||
}]
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
uni.showToast({
|
||||
title: `点击${e.content.text}`,
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
buttonClick(e) {
|
||||
console.log(e)
|
||||
this.options[2].info++
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
padding: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.goods-carts {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* #ifdef H5 */
|
||||
left: var(--window-left);
|
||||
right: var(--window-right);
|
||||
/* #endif */
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-goods-nav.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=goods-nav)
|
||||
- [Local Example](examples/uni-ui/uni-goods-nav.vue)
|
||||
@@ -0,0 +1,383 @@
|
||||
# uni-grid
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-grid
|
||||
|
||||
代码块： uGrid
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-grid />`（或 `<uni-grid></uni-grid>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| column | Number | 3 | 每列显示个数 |
|
||||
| borderColor | String | #d0dee5 | 边框颜色 |
|
||||
| showBorder | Boolean | true | 是否显示边框 |
|
||||
| square | Boolean | true | 是否方形显示 |
|
||||
| highlight | Boolean | true | 点击背景是否高亮 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @change | 点击 grid 触发 | e={detail:{index:0}}，index 为当前点击 grid下标 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-grid.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="warp">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">宫格组件主要使用场景如：商品推荐列表、热门内容等</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础样式" type="line" padding>
|
||||
<uni-grid :column="4" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in 4" :index="index" :key="index">
|
||||
<view class="grid-item-box" style="background-color: #fff;">
|
||||
<uni-icons type="image" :size="30" color="#777" />
|
||||
<text class="text">文本信息</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
<uni-section title="自定义列数" type="line" padding>
|
||||
<uni-grid :column="4" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in 8" :index="index" :key="index">
|
||||
<view class="grid-item-box" style="background-color: #fff;">
|
||||
<uni-icons type="image" :size="30" color="#777" />
|
||||
<text class="text">文本信息</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="滑动视图" type="line" padding>
|
||||
<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
|
||||
<swiper class="swiper" :indicator-dots="true">
|
||||
<swiper-item>
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-section>
|
||||
<uni-section title="动态加载" type="line" padding>
|
||||
<view class="grid-dynamic-box">
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in dynamicList" :index="index" :key="index">
|
||||
<view class="grid-item-box" :style="{'backgroundColor':item.color}">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
<button type="primary" @click="add">点击添加一个宫格</button>
|
||||
<button v-if="dynamicList.length !== 0" type="primary" style="margin-top: 15px;"
|
||||
@click="del">点击删除一个宫格</button>
|
||||
</uni-section>
|
||||
<uni-section title="无边框带角标（3列）" type="line" padding>
|
||||
<uni-grid :column="3" :show-border="false" :square="false" @change="change">
|
||||
<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" :src="item.url" mode="aspectFill" />
|
||||
<text class="text">{{item.text}}</text>
|
||||
<view v-if="item.badge" class="grid-dot">
|
||||
<uni-badge :text="item.badge" :type="item.type" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
<uni-section title="矩形宫格（3列）" type="line" padding>
|
||||
<uni-grid :column="3" :square="false" :highlight="false" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
<uni-section title="边框颜色（4列 无文字）" type="line" padding>
|
||||
<uni-grid :column="4" border-color="#03a9f4" @change="change">
|
||||
<uni-grid-item :index="0">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c1.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item :index="1">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c2.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item :index="2">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c3.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item :index="3">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c4.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="warp">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">宫格组件主要使用场景如：商品推荐列表、热门内容等</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础样式" type="line" padding>
|
||||
<uni-grid :column="4" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in 4" :index="index" :key="index">
|
||||
<view class="grid-item-box" style="background-color: #fff;">
|
||||
<uni-icons type="image" :size="30" color="#777" />
|
||||
<text class="text">文本信息</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
<uni-section title="自定义列数" type="line" padding>
|
||||
<uni-grid :column="4" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in 8" :index="index" :key="index">
|
||||
<view class="grid-item-box" style="background-color: #fff;">
|
||||
<uni-icons type="image" :size="30" color="#777" />
|
||||
<text class="text">文本信息</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="滑动视图" type="line" padding>
|
||||
<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
|
||||
<swiper class="swiper" :indicator-dots="true">
|
||||
<swiper-item>
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-section>
|
||||
<uni-section title="动态加载" type="line" padding>
|
||||
<view class="grid-dynamic-box">
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in dynamicList" :index="index" :key="index">
|
||||
<view class="grid-item-box" :style="{'backgroundColor':item.color}">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
<button type="primary" @click="add">点击添加一个宫格</button>
|
||||
<button v-if="dynamicList.length !== 0" type="primary" style="margin-top: 15px;"
|
||||
@click="del">点击删除一个宫格</button>
|
||||
</uni-section>
|
||||
<uni-section title="无边框带角标（3列）" type="line" padding>
|
||||
<uni-grid :column="3" :show-border="false" :square="false" @change="change">
|
||||
<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" :src="item.url" mode="aspectFill" />
|
||||
<text class="text">{{item.text}}</text>
|
||||
<view v-if="item.badge" class="grid-dot">
|
||||
<uni-badge :text="item.badge" :type="item.type" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
<uni-section title="矩形宫格（3列）" type="line" padding>
|
||||
<uni-grid :column="3" :square="false" :highlight="false" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
<uni-section title="边框颜色（4列 无文字）" type="line" padding>
|
||||
<uni-grid :column="4" border-color="#03a9f4" @change="change">
|
||||
<uni-grid-item :index="0">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c1.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item :index="1">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c2.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item :index="2">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c3.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item :index="3">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c4.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-grid.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=grid)
|
||||
- [Local Example](examples/uni-ui/uni-grid.vue)
|
||||
@@ -0,0 +1,149 @@
|
||||
# uni-group
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-group
|
||||
|
||||
代码块： uGroup
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-group />`（或 `<uni-group></uni-group>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| title | String | - | 主标题 |
|
||||
| top | Number | - | 分组间隔 |
|
||||
| mode | String | '' | 模式 ，card 为卡片模式 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-group.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-group.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">分组组件可用于将组件分组，添加间隔，以产生明显的区块。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础分组" type="line">
|
||||
<uni-group>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
<uni-group title="基本模式" margin-top="20">
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
</uni-section>
|
||||
<uni-section title="卡片分组" type="line">
|
||||
<uni-group mode="card">
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
|
||||
<uni-group title="card 模式" mode="card">
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">分组组件可用于将组件分组，添加间隔，以产生明显的区块。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础分组" type="line">
|
||||
<uni-group>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
<uni-group title="基本模式" margin-top="20">
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
</uni-section>
|
||||
<uni-section title="卡片分组" type="line">
|
||||
<uni-group mode="card">
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
|
||||
<uni-group title="card 模式" mode="card">
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-group.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=group)
|
||||
- [Local Example](examples/uni-ui/uni-group.vue)
|
||||
@@ -0,0 +1,83 @@
|
||||
# uni-icons
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-icons（已支持 uni-app x）
|
||||
|
||||
代码块： uIcons
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-icons />`（或 `<uni-icons></uni-icons>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| size | Number | 24 | 图标大小 |
|
||||
| type | String | - | 图标图案，参考示例 |
|
||||
| color | String | - | 图标颜色 |
|
||||
| customPrefix [即将废弃] | String | - | 自定义图标 |
|
||||
| fontFamily | String | - | 自定义图标 2.0.0+支持 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @click | 点击 Icon 触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-icons type="contact" size="30"></uni-icons>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-icons type="contact" size="30"></uni-icons>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
@font-face {
|
||||
font-family: CustomFont;
|
||||
src: url('./iconfont.ttf');
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
@font-face {
|
||||
font-family: CustomFont;
|
||||
src: url('./iconfont.ttf');
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<uni-icons fontFamily="CustomFont" :size="26">{{'\uebc6'}}</uni-icons>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<uni-icons fontFamily="CustomFont" :size="26">{{'\uebc6'}}</uni-icons>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=icons)
|
||||
- [Local Example](examples/uni-ui/uni-icons.vue)
|
||||
@@ -0,0 +1,116 @@
|
||||
# uni-indexed-list
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-indexed-list
|
||||
|
||||
代码块： uIndexedList
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-indexed-list />`（或 `<uni-indexed-list></uni-indexed-list>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| options | Object | - | 索引列表需要的数据对象 |
|
||||
| showSelect | Boolean | false | 展示模式，true 为展示默认，false 为选择模式，默认为 false |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| click | 点击列表事件 ，返回当前选择项的事件对象 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-indexed-list.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
[{
|
||||
"letter": "A",
|
||||
"data": [
|
||||
"阿克苏机场",
|
||||
"阿拉山口机场",
|
||||
"阿勒泰机场",
|
||||
"阿里昆莎机场",
|
||||
"安庆天柱山机场",
|
||||
"澳门国际机场"
|
||||
]
|
||||
}, {
|
||||
"letter": "B",
|
||||
"data": [
|
||||
"保山机场",
|
||||
"包头机场",
|
||||
"北海福成机场",
|
||||
"北京南苑机场",
|
||||
"北京首都国际机场"
|
||||
]
|
||||
}]
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
[{
|
||||
"letter": "A",
|
||||
"data": [
|
||||
"阿克苏机场",
|
||||
"阿拉山口机场",
|
||||
"阿勒泰机场",
|
||||
"阿里昆莎机场",
|
||||
"安庆天柱山机场",
|
||||
"澳门国际机场"
|
||||
]
|
||||
}, {
|
||||
"letter": "B",
|
||||
"data": [
|
||||
"保山机场",
|
||||
"包头机场",
|
||||
"北海福成机场",
|
||||
"北京南苑机场",
|
||||
"北京首都国际机场"
|
||||
]
|
||||
}]
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<uni-indexed-list :options="list" :show-select="true" @click="bindClick" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<uni-indexed-list :options="list" :show-select="true" @click="bindClick" />
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-indexed-list.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=indexed-list)
|
||||
- [Local Example](examples/uni-ui/uni-indexed-list.vue)
|
||||
@@ -0,0 +1,113 @@
|
||||
# uni-link
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-link
|
||||
|
||||
代码块： uLink
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-link />`（或 `<uni-link></uni-link>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| href | String | - | 链接地址 |
|
||||
| text | String | - | 显示文字 |
|
||||
| download | String | - | H5平台下载文件名 |
|
||||
| showUnderLine | Boolean | true | 是否显示下划线 |
|
||||
| copyTips | String | 已自动复制网址，请在手机浏览器里粘贴该网址 | 在小程序端复制链接时的提示语 |
|
||||
| color | String | #999999 | 链接文字颜色 |
|
||||
| fontSize | String | 14 | 链接文字大小，单位px |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-link.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-link.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本示例" subTitle="打开外部连接" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义颜色" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" color="#007BFF"></uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义下划线" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false">
|
||||
</uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义字体大小" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false"
|
||||
font-size="20"></uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义插槽" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false"
|
||||
color="red">点击跳转</uni-link>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本示例" subTitle="打开外部连接" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义颜色" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" color="#007BFF"></uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义下划线" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false">
|
||||
</uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义字体大小" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false"
|
||||
font-size="20"></uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义插槽" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false"
|
||||
color="red">点击跳转</uni-link>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-link.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=link)
|
||||
- [Local Example](examples/uni-ui/uni-link.vue)
|
||||
@@ -0,0 +1,92 @@
|
||||
# uni-list
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-list
|
||||
|
||||
代码块： uList 、 uListItem 关联组件： uni-list-item 、 uni-badge 、 uni-icons 、 uni-list-chat
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-list />`（或 `<uni-list></uni-list>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| border | Boolean | true | 是否显示边框 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| click | 点击 uniListItem 触发事件，需开启点击反馈 | - |
|
||||
| switchChange | 点击切换 Switch 时触发，需显示 switch | e={value:checked} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-list.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-list>
|
||||
<uni-list-item title="列表文字" ></uni-list-item>
|
||||
<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
|
||||
</uni-list>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-list>
|
||||
<uni-list-item title="列表文字" ></uni-list-item>
|
||||
<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
|
||||
</uni-list>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<uni-list>
|
||||
<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
|
||||
<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
|
||||
</uni-list>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<uni-list>
|
||||
<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
|
||||
<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
|
||||
</uni-list>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-list.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=list)
|
||||
- [Local Example](examples/uni-ui/uni-list.vue)
|
||||
@@ -0,0 +1,217 @@
|
||||
# uni-load-more
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-load-more
|
||||
|
||||
代码块： uLoadMore
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-load-more />`（或 `<uni-load-more></uni-load-more>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| iconSize | Number | - | 24 | 指定图标大小 |
|
||||
| status | String | more/loading/noMore | more | loading 的状态 |
|
||||
| showIcon | Boolean | - | true | 是否显示 loading 图标 |
|
||||
| showText | Boolean | - | true | **[1.3.3新增]**是否显示文本 |
|
||||
| iconType | String | snow/circle/auto | auto | 指定图标样式 |
|
||||
| color | String | - | #777777 | 图标和文字颜色 |
|
||||
| contentText | Object | - | {contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"} | 各状态文字说明 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| clickLoadMore | 点击加载更多时触发 | e.detail={status:'loading'} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-load-more.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-load-more status="more"></uni-load-more>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-load-more status="more"></uni-load-more>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">加载更多组件用于页面加载更多数据时，页面底部显示内容等场景</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line">
|
||||
<uni-load-more :status="status" />
|
||||
</uni-section>
|
||||
<uni-section title="修改默认文字" type="line">
|
||||
<uni-load-more :status="status" :content-text="contentText" />
|
||||
</uni-section>
|
||||
<uni-section title="改变颜色" type="line">
|
||||
<uni-load-more color="#007AFF" :status="status" />
|
||||
</uni-section>
|
||||
<uni-section title="指定加载图标样式 - 按平台自动选择样式" type="line">
|
||||
<uni-load-more iconType="auto" :status="status" />
|
||||
</uni-section>
|
||||
<uni-section title="指定加载图标样式 - 环形" type="line">
|
||||
<uni-load-more iconType="circle" :status="status" />
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="改变组件状态" type="line">
|
||||
<radio-group class="uni-list" @change="onChange">
|
||||
<view v-for="(item, index) in statusTypes" :key="index" class="uni-list-item">
|
||||
<view class="uni-list-item__container">
|
||||
<view class="uni-list-item__content">
|
||||
<text class="uni-list-item__content-title">{{ item.text }}</text>
|
||||
</view>
|
||||
<view class="uni-list-item__extra">
|
||||
<radio :value="item.value" :checked="item.checked" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">加载更多组件用于页面加载更多数据时，页面底部显示内容等场景</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line">
|
||||
<uni-load-more :status="status" />
|
||||
</uni-section>
|
||||
<uni-section title="修改默认文字" type="line">
|
||||
<uni-load-more :status="status" :content-text="contentText" />
|
||||
</uni-section>
|
||||
<uni-section title="改变颜色" type="line">
|
||||
<uni-load-more color="#007AFF" :status="status" />
|
||||
</uni-section>
|
||||
<uni-section title="指定加载图标样式 - 按平台自动选择样式" type="line">
|
||||
<uni-load-more iconType="auto" :status="status" />
|
||||
</uni-section>
|
||||
<uni-section title="指定加载图标样式 - 环形" type="line">
|
||||
<uni-load-more iconType="circle" :status="status" />
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="改变组件状态" type="line">
|
||||
<radio-group class="uni-list" @change="onChange">
|
||||
<view v-for="(item, index) in statusTypes" :key="index" class="uni-list-item">
|
||||
<view class="uni-list-item__container">
|
||||
<view class="uni-list-item__content">
|
||||
<text class="uni-list-item__content-title">{{ item.text }}</text>
|
||||
</view>
|
||||
<view class="uni-list-item__extra">
|
||||
<radio :value="item.value" :checked="item.checked" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
status: 'more',
|
||||
statusTypes: [{
|
||||
value: 'more',
|
||||
text: '加载前',
|
||||
checked: true
|
||||
}, {
|
||||
value: 'loading',
|
||||
text: '加载中',
|
||||
checked: false
|
||||
}, {
|
||||
value: 'noMore',
|
||||
text: '没有更多',
|
||||
checked: false
|
||||
}],
|
||||
contentText: {
|
||||
contentdown: '查看更多',
|
||||
contentrefresh: '加载中',
|
||||
contentnomore: '没有更多'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
this.status = e.detail.value
|
||||
},
|
||||
clickLoadMore(e) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: "当前状态：" + e.detail.status
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.uni-list-item {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #eee;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.uni-list-item__container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
padding: 12px 15px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-list-item__content-title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-load-more.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=load-more)
|
||||
- [Local Example](examples/uni-ui/uni-load-more.vue)
|
||||
@@ -0,0 +1,90 @@
|
||||
# uni-nav-bar
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-nav-bar
|
||||
|
||||
代码块： uNavBar
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-nav-bar />`（或 `<uni-nav-bar></uni-nav-bar>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| title | String | - | 标题文字 |
|
||||
| leftText | String | - | 左侧按钮文本 |
|
||||
| rightText | String | - | 右侧按钮文本 |
|
||||
| leftIcon | String | - | 左侧按钮图标（图标类型参考 Icon 图标 type 属性） |
|
||||
| rightIcon | String | - | 右侧按钮图标（图标类型参考 Icon 图标 type 属性） |
|
||||
| color | String | #000000 | 图标和文字颜色 |
|
||||
| backgroundColor | String | #FFFFFF | 导航栏背景颜色 |
|
||||
| fixed | Boolean | false | 是否固定顶部 |
|
||||
| statusBar | Boolean | false | 是否包含状态栏 |
|
||||
| shadow | Boolean | false | 导航栏下是否有阴影 |
|
||||
| border | Boolean | true | 导航栏下是否有边框 |
|
||||
| height | Number/String | 44 | 导航栏高度 |
|
||||
| dark | Boolean | false | 导航栏开启暗黑模式 |
|
||||
| leftWidth | Number/String | 120rpx | 导航栏左侧插槽宽度 |
|
||||
| rightWidth | Number/String | 120rpx | 导航栏右侧插槽宽度 |
|
||||
| stat | Boolean | | 是否开启统计标题功能。 注意：只有使用 title 属性 ，且开启了统计功能才生效 |
|
||||
| showMenuButtonWidth | Boolean | false | 微信小程序是否开启胶囊避让功能，fixed:true 下生效。 注意：开启后会导致标题不在页面水平居中，如需使用右插槽请开启，不开启下，右侧插槽或者内容会被胶囊按钮覆盖 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @clickLeft | 左侧按钮点击时触发 | - |
|
||||
| @clickRight | 右侧按钮点击时触发 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-nav-bar title="导航栏组件"></uni-nav-bar>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-nav-bar title="导航栏组件"></uni-nav-bar>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<uni-nav-bar shadow title="导航栏组件"></uni-nav-bar>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<uni-nav-bar shadow title="导航栏组件"></uni-nav-bar>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<uni-nav-bar dark title="导航栏组件"></uni-nav-bar>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<uni-nav-bar dark title="导航栏组件"></uni-nav-bar>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=nav-bar)
|
||||
- [Local Example](examples/uni-ui/uni-nav-bar.vue)
|
||||
@@ -0,0 +1,87 @@
|
||||
# uni-notice-bar
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-notice-bar
|
||||
|
||||
代码块： uNoticeBar
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-notice-bar />`（或 `<uni-notice-bar></uni-notice-bar>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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为单行 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名称 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @click | 点击 NoticeBar 触发事件 | - |
|
||||
| @close | 关闭 NoticeBar 触发事件 | - |
|
||||
| @getmore | 点击”查看更多“时触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-notice-bar.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-notice-bar single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
<uni-notice-bar text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-notice-bar single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
<uni-notice-bar text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<uni-notice-bar scrollable single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<uni-notice-bar scrollable single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<uni-notice-bar showIcon text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<uni-notice-bar showIcon text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-notice-bar.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=notice-bar)
|
||||
- [Local Example](examples/uni-ui/uni-notice-bar.vue)
|
||||
@@ -0,0 +1,159 @@
|
||||
# uni-number-box
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-number-box
|
||||
|
||||
代码块： uNumberBox
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-number-box />`（或 `<uni-number-box></uni-number-box>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| value/v-model | Number | 0 | 输入框当前值 |
|
||||
| min | Number | 0 | 最小值 |
|
||||
| max | Number | 100 | 最大值 |
|
||||
| step | Number | 1 | 每次点击改变的间隔大小 |
|
||||
| disabled | Boolean | false | 是否为禁用状态 |
|
||||
| width | Number | 40 | 宽度（单位：px） |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名称 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| change | 输入框值改变时触发的事件，参数为输入框当前的 value | - |
|
||||
| focus | 输入框聚焦时触发的事件，参数为 event 对象 | - |
|
||||
| blur | 输入框失焦时触发的事件，参数为 event 对象 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-number-box.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="page">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">数字输入框组件多用于购物车加减商品等场景</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line" padding>
|
||||
<uni-number-box @change="changeValue" />
|
||||
</uni-section>
|
||||
<uni-section :title="'使用v-model : '+ vModelValue" subTitle="使用 v-model 显示默认值" type="line" padding>
|
||||
<uni-number-box v-model="vModelValue" @blur="blur" @focus="focus" @change="changeValue" />
|
||||
</uni-section>
|
||||
<uni-section title="设置最小值和最大值" subTitle="使用 min \ max 属性设置最大最小值" type="line" padding>
|
||||
<uni-number-box :min="2" :max="9" :value="555" />
|
||||
</uni-section>
|
||||
<uni-section title="设置步长（步长0.1)" subTitle="使用 step 属性设置步长" type="line" padding>
|
||||
<uni-number-box :value="1.1" :step="0.1" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义背景" type="line" subTitle="使用 background 属性设置自定义背景色" padding>
|
||||
<uni-number-box :value="50" background="#2979FF" color="#fff" />
|
||||
</uni-section>
|
||||
<uni-section title="禁用状态" subTitle="使用 disabled 属性设置组件禁用" type="line" padding>
|
||||
<uni-number-box :disabled="true" />
|
||||
</uni-section>
|
||||
<uni-section :title="'获取输入的值 : '+ numberValue" type="line" padding>
|
||||
<uni-number-box :value="numberValue" @change="change" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="page">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">数字输入框组件多用于购物车加减商品等场景</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line" padding>
|
||||
<uni-number-box @change="changeValue" />
|
||||
</uni-section>
|
||||
<uni-section :title="'使用v-model : '+ vModelValue" subTitle="使用 v-model 显示默认值" type="line" padding>
|
||||
<uni-number-box v-model="vModelValue" @blur="blur" @focus="focus" @change="changeValue" />
|
||||
</uni-section>
|
||||
<uni-section title="设置最小值和最大值" subTitle="使用 min \ max 属性设置最大最小值" type="line" padding>
|
||||
<uni-number-box :min="2" :max="9" :value="555" />
|
||||
</uni-section>
|
||||
<uni-section title="设置步长（步长0.1)" subTitle="使用 step 属性设置步长" type="line" padding>
|
||||
<uni-number-box :value="1.1" :step="0.1" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义背景" type="line" subTitle="使用 background 属性设置自定义背景色" padding>
|
||||
<uni-number-box :value="50" background="#2979FF" color="#fff" />
|
||||
</uni-section>
|
||||
<uni-section title="禁用状态" subTitle="使用 disabled 属性设置组件禁用" type="line" padding>
|
||||
<uni-number-box :disabled="true" />
|
||||
</uni-section>
|
||||
<uni-section :title="'获取输入的值 : '+ numberValue" type="line" padding>
|
||||
<uni-number-box :value="numberValue" @change="change" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
numberValue: 0,
|
||||
vModelValue: 3
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(value) {
|
||||
this.numberValue = value
|
||||
},
|
||||
changeValue(value) {
|
||||
console.log('返回数值：', value);
|
||||
},
|
||||
blur(e) {
|
||||
console.log('blur:', e);
|
||||
},
|
||||
focus(e) {
|
||||
console.log('focus:', e);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-number-box.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=number-box)
|
||||
- [Local Example](examples/uni-ui/uni-number-box.vue)
|
||||
@@ -0,0 +1,198 @@
|
||||
# uni-pagination
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-pagination
|
||||
|
||||
代码块： uPagination
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-pagination />`（或 `<uni-pagination></uni-pagination>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| prevText | String | 上一页 | 左侧按钮文字 |
|
||||
| nextText | String | 下一页 | 右侧按钮文字 |
|
||||
| value/v-model | Number | 1 | 当前页 |
|
||||
| current | Number | 1 | 当前页, 优先级高于 value |
|
||||
| total | Number | 0 | 数据总量 |
|
||||
| pageSize | Number | 10 | 每页数据量 |
|
||||
| showIcon | Boolean | false | 是否以 icon 形式展示按钮 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @change | 点击页码按钮时触发 | e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-pagination.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-pagination title="标题文字" total="20"></uni-pagination>
|
||||
<uni-pagination title="标题文字" show-icon="true" total="50" current="2"></uni-pagination>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-pagination title="标题文字" total="20"></uni-pagination>
|
||||
<uni-pagination title="标题文字" show-icon="true" total="50" current="2"></uni-pagination>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">分页器组件，用于展示页码、请求数据等</text>
|
||||
</uni-card>
|
||||
<uni-section title="默认样式" type="line" padding>
|
||||
<uni-pagination :total="50" title="标题文字" />
|
||||
</uni-section>
|
||||
<uni-section title="修改按钮文字" subTitle="使用 prev-text / next-text 属性修改按钮文字" type="line" padding>
|
||||
<uni-pagination :total="50" title="标题文字" prev-text="前一页" next-text="后一页" />
|
||||
</uni-section>
|
||||
<uni-section title="图标样式" subTitle="使用 show-icon 属性显示图标按钮" type="line" padding>
|
||||
<uni-pagination :show-icon="true" :total="50" title="标题文字" />
|
||||
</uni-section>
|
||||
<uni-section title="修改数据长度" type="line" padding>
|
||||
<uni-pagination :current="current" :total="total" title="标题文字" :show-icon="true" @change="change" />
|
||||
<view class="btn-view">
|
||||
<view>
|
||||
<text class="example-info">当前页：{{ current }}，数据总量：{{ total }}条，每页数据：{{ pageSize }}</text>
|
||||
</view>
|
||||
<view class="btn-flex">
|
||||
<button class="button word-btn" hover-class="word-btn--hover" :hover-start-time="20"
|
||||
:hover-stay-time="70" @click="add"><text class="word-btn-white">增加10条数据</text></button>
|
||||
<button class="button" type="default" @click="reset">重置数据</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">分页器组件，用于展示页码、请求数据等</text>
|
||||
</uni-card>
|
||||
<uni-section title="默认样式" type="line" padding>
|
||||
<uni-pagination :total="50" title="标题文字" />
|
||||
</uni-section>
|
||||
<uni-section title="修改按钮文字" subTitle="使用 prev-text / next-text 属性修改按钮文字" type="line" padding>
|
||||
<uni-pagination :total="50" title="标题文字" prev-text="前一页" next-text="后一页" />
|
||||
</uni-section>
|
||||
<uni-section title="图标样式" subTitle="使用 show-icon 属性显示图标按钮" type="line" padding>
|
||||
<uni-pagination :show-icon="true" :total="50" title="标题文字" />
|
||||
</uni-section>
|
||||
<uni-section title="修改数据长度" type="line" padding>
|
||||
<uni-pagination :current="current" :total="total" title="标题文字" :show-icon="true" @change="change" />
|
||||
<view class="btn-view">
|
||||
<view>
|
||||
<text class="example-info">当前页：{{ current }}，数据总量：{{ total }}条，每页数据：{{ pageSize }}</text>
|
||||
</view>
|
||||
<view class="btn-flex">
|
||||
<button class="button word-btn" hover-class="word-btn--hover" :hover-start-time="20"
|
||||
:hover-stay-time="70" @click="add"><text class="word-btn-white">增加10条数据</text></button>
|
||||
<button class="button" type="default" @click="reset">重置数据</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
current: 3,
|
||||
total: 10,
|
||||
pageSize: 10
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.current = 5
|
||||
}, 3000)
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.total += 10
|
||||
},
|
||||
reset() {
|
||||
this.total = 0
|
||||
this.current = 1
|
||||
},
|
||||
change(e) {
|
||||
console.log(e)
|
||||
this.current = e.current
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* #endif */
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 20px;
|
||||
width: 150px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-pagination.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=pagination)
|
||||
- [Local Example](examples/uni-ui/uni-pagination.vue)
|
||||
@@ -0,0 +1,115 @@
|
||||
# uni-popup
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-popup
|
||||
|
||||
代码块： uPopup 关联组件： uni-popup-dialog , uni-popup-message , uni-popup-share , uni-transition
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-popup />`（或 `<uni-popup></uni-popup>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| animation | Boolean | true | 是否开启动画 |
|
||||
| type | String | 'center' | 弹出方式 |
|
||||
| mask-click [即将废弃] | Boolean | true | 蒙版点击是否关闭弹窗 |
|
||||
| is-mask-click [1.7.4新增] | Boolean | true | 蒙版点击是否关闭弹窗 |
|
||||
| mask-background-color [1.7.4新增] | rgba | rgba(0,0,0,0.4) | 蒙版颜色，建议使用 rgba 颜色值 |
|
||||
| background-color | String | 'none' | 主窗口背景色 |
|
||||
| borderRadius | String | - | 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px" |
|
||||
| safe-area | Boolean | true | 是否适配底部安全区 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| change | 组件状态发生变化触发 | e={show: true｜false,type:当前模式} |
|
||||
| maskClick | 点击遮罩层触发 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods:{
|
||||
open(){
|
||||
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||||
this.$refs.popup.open('top')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods:{
|
||||
open(){
|
||||
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||||
this.$refs.popup.open('top')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=popup)
|
||||
- [Local Example](examples/uni-ui/uni-popup.vue)
|
||||
@@ -0,0 +1,236 @@
|
||||
# uni-rate
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-rate
|
||||
|
||||
代码块： uRate 关联组件： uni-icons
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-rate />`（或 `<uni-rate></uni-rate>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| value/v-model | Number | 0 | 当前评分 |
|
||||
| color | String | #ececec | 未选中状态的星星颜色 |
|
||||
| activeColor | String | #ffca3e | 选中状态的星星颜色 |
|
||||
| disabledColor | String | #c0c0c0 | 禁用状态的星星颜色 |
|
||||
| size | Number | 24 | 星星的大小 |
|
||||
| max | Number | 5 | 最大评分评分数量，目前一分一颗星 |
|
||||
| margin | Number | 0 | 星星的间距，单位 px |
|
||||
| isFill | Boolean | true | 星星的类型，是否为实心类型 |
|
||||
| disabled | Boolean | false | 是否为禁用状态 (之前版本为已读状态，现更正为禁用状态) |
|
||||
| readonly | Boolean | false | 是否为只读状态 |
|
||||
| allowHalf | Boolean | false | 是否展示半星 |
|
||||
| touchable | Boolean | true | 是否支持滑动手势 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| @change | 改变 value 的值返回 | e = { value:number } |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-rate.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 基本用法 -->
|
||||
<!-- 需要在 script 中绑定 value 变量 -->
|
||||
<uni-rate v-model="value" @change="onChange"/>
|
||||
|
||||
<!-- 不支持滑动手势选择评分 -->
|
||||
<uni-rate :touchable="false" :value="5"/>
|
||||
<!-- 设置尺寸大小 -->
|
||||
<uni-rate :size="18" :value="5"/>
|
||||
|
||||
<!-- 设置评分数 -->
|
||||
<uni-rate :max="10" :value="5" />
|
||||
|
||||
<!-- 设置星星间隔 -->
|
||||
<uni-rate :value="4" :margin="20" />
|
||||
|
||||
<!-- 设置颜色 -->
|
||||
<uni-rate :value="3" color="#bbb" active-color="red" />
|
||||
|
||||
<!-- 选择半星 -->
|
||||
<uni-rate allow-half :value="3.5" />
|
||||
|
||||
<!-- 只读状态 -->
|
||||
<uni-rate :readonly="true" :value="2" />
|
||||
|
||||
<!-- 禁用状态 -->
|
||||
<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />
|
||||
|
||||
<!-- 未选中的星星为镂空状态 -->
|
||||
<uni-rate :value="3" :is-fill="false" />
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<!-- 基本用法 -->
|
||||
<!-- 需要在 script 中绑定 value 变量 -->
|
||||
<uni-rate v-model="value" @change="onChange"/>
|
||||
|
||||
<!-- 不支持滑动手势选择评分 -->
|
||||
<uni-rate :touchable="false" :value="5"/>
|
||||
<!-- 设置尺寸大小 -->
|
||||
<uni-rate :size="18" :value="5"/>
|
||||
|
||||
<!-- 设置评分数 -->
|
||||
<uni-rate :max="10" :value="5" />
|
||||
|
||||
<!-- 设置星星间隔 -->
|
||||
<uni-rate :value="4" :margin="20" />
|
||||
|
||||
<!-- 设置颜色 -->
|
||||
<uni-rate :value="3" color="#bbb" active-color="red" />
|
||||
|
||||
<!-- 选择半星 -->
|
||||
<uni-rate allow-half :value="3.5" />
|
||||
|
||||
<!-- 只读状态 -->
|
||||
<uni-rate :readonly="true" :value="2" />
|
||||
|
||||
<!-- 禁用状态 -->
|
||||
<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />
|
||||
|
||||
<!-- 未选中的星星为镂空状态 -->
|
||||
<uni-rate :value="3" :is-fill="false" />
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
value: 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
console.log('rate发生改变:' + JSON.stringify(e))
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
value: 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
console.log('rate发生改变:' + JSON.stringify(e))
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">评分组件多用于商品评价打分、服务态度评价、用户满意度等场景。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line" padding>
|
||||
<uni-rate v-model="rateValue" @change="onChange" />
|
||||
</uni-section>
|
||||
<uni-section title="不支持滑动手势选择评分" subTitle="设置 touchable 属性控制是否开启手势选择" type="line" padding>
|
||||
<uni-rate :touchable="false" :value="5" @change="onChange" />
|
||||
</uni-section>
|
||||
<uni-section title="设置尺寸大小" subTitle="设置 size 属性控制组件大小" type="line" padding>
|
||||
<uni-rate size="18" :value="5" />
|
||||
</uni-section>
|
||||
<uni-section title="设置评分数" subTitle="设置 max 属性控制组件最大星星数量" type="line" padding>
|
||||
<uni-rate :max="10" :value="5" />
|
||||
</uni-section>
|
||||
<uni-section title="设置星星间隔" subTitle="设置 margin 属性控制星星间隔" type="line" padding>
|
||||
<uni-rate :value="4" margin="20" />
|
||||
</uni-section>
|
||||
<uni-section title="设置颜色" subTitle="使用 color 属性设置星星颜色" type="line" padding>
|
||||
<uni-rate :value="3" color="#bbb" active-color="red" />
|
||||
</uni-section>
|
||||
<uni-section title="半星" subTitle="使用 allow-half 属性设置是否显示半星" type="line" padding>
|
||||
<uni-rate allow-half :value="3.5" />
|
||||
</uni-section>
|
||||
<uni-section title="只读状态" subTitle="使用 readonly 属性设置组件只读" type="line" padding>
|
||||
<uni-rate :readonly="true" :value="2" />
|
||||
</uni-section>
|
||||
<uni-section title="禁用状态" subTitle="使用 disabled 属性设置组件禁用" type="line" padding>
|
||||
<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />
|
||||
</uni-section>
|
||||
<uni-section title="未选中的星星为镂空状态" subTitle="使用 is-fill 属性设置星星镂空" type="line" padding>
|
||||
<uni-rate :value="3" :is-fill="false" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">评分组件多用于商品评价打分、服务态度评价、用户满意度等场景。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line" padding>
|
||||
<uni-rate v-model="rateValue" @change="onChange" />
|
||||
</uni-section>
|
||||
<uni-section title="不支持滑动手势选择评分" subTitle="设置 touchable 属性控制是否开启手势选择" type="line" padding>
|
||||
<uni-rate :touchable="false" :value="5" @change="onChange" />
|
||||
</uni-section>
|
||||
<uni-section title="设置尺寸大小" subTitle="设置 size 属性控制组件大小" type="line" padding>
|
||||
<uni-rate size="18" :value="5" />
|
||||
</uni-section>
|
||||
<uni-section title="设置评分数" subTitle="设置 max 属性控制组件最大星星数量" type="line" padding>
|
||||
<uni-rate :max="10" :value="5" />
|
||||
</uni-section>
|
||||
<uni-section title="设置星星间隔" subTitle="设置 margin 属性控制星星间隔" type="line" padding>
|
||||
<uni-rate :value="4" margin="20" />
|
||||
</uni-section>
|
||||
<uni-section title="设置颜色" subTitle="使用 color 属性设置星星颜色" type="line" padding>
|
||||
<uni-rate :value="3" color="#bbb" active-color="red" />
|
||||
</uni-section>
|
||||
<uni-section title="半星" subTitle="使用 allow-half 属性设置是否显示半星" type="line" padding>
|
||||
<uni-rate allow-half :value="3.5" />
|
||||
</uni-section>
|
||||
<uni-section title="只读状态" subTitle="使用 readonly 属性设置组件只读" type="line" padding>
|
||||
<uni-rate :readonly="true" :value="2" />
|
||||
</uni-section>
|
||||
<uni-section title="禁用状态" subTitle="使用 disabled 属性设置组件禁用" type="line" padding>
|
||||
<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />
|
||||
</uni-section>
|
||||
<uni-section title="未选中的星星为镂空状态" subTitle="使用 is-fill 属性设置星星镂空" type="line" padding>
|
||||
<uni-rate :value="3" :is-fill="false" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-rate.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=rate)
|
||||
- [Local Example](examples/uni-ui/uni-rate.vue)
|
||||
@@ -0,0 +1,161 @@
|
||||
# uni-row
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名 uni-row、uni-col
|
||||
|
||||
代码块： uRow 、 uCol
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-row />`（或 `<uni-row></uni-row>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 必填 | 说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| gutter | Number | - | 0 | 否 | 栅格间隔 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-row.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-row.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-row class="demo-uni-row">
|
||||
<uni-col>
|
||||
<view class="demo-uni-col dark_deep"></view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
|
||||
<uni-row class="demo-uni-row">
|
||||
<uni-col :span="12">
|
||||
<view class="demo-uni-col dark"></view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="demo-uni-col light"></view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-row class="demo-uni-row">
|
||||
<uni-col>
|
||||
<view class="demo-uni-col dark_deep"></view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
|
||||
<uni-row class="demo-uni-row">
|
||||
<uni-col :span="12">
|
||||
<view class="demo-uni-col dark"></view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="demo-uni-col light"></view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<uni-row class="demo-uni-row">
|
||||
<uni-col :span="8">
|
||||
<view class="demo-uni-col dark"></view>
|
||||
</uni-col>
|
||||
<uni-col :span="8" :offset="6">
|
||||
<view class="demo-uni-col dark"></view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
|
||||
<uni-row class="demo-uni-row">
|
||||
<uni-col :span="12" :pull="6">
|
||||
<view class="demo-uni-col dark"></view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
|
||||
<uni-row class="demo-uni-row">
|
||||
<uni-col :span="12" :push="6">
|
||||
<view class="demo-uni-col dark"></view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<uni-row class="demo-uni-row">
|
||||
<uni-col :span="8">
|
||||
<view class="demo-uni-col dark"></view>
|
||||
</uni-col>
|
||||
<uni-col :span="8" :offset="6">
|
||||
<view class="demo-uni-col dark"></view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
|
||||
<uni-row class="demo-uni-row">
|
||||
<uni-col :span="12" :pull="6">
|
||||
<view class="demo-uni-col dark"></view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
|
||||
<uni-row class="demo-uni-row">
|
||||
<uni-col :span="12" :push="6">
|
||||
<view class="demo-uni-col dark"></view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<uni-row class="demo-uni-row">
|
||||
<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
|
||||
<view class="demo-uni-col dark"></view>
|
||||
</uni-col>
|
||||
<uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
|
||||
<view class="demo-uni-col light"></view>
|
||||
</uni-col>
|
||||
<uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
|
||||
<view class="demo-uni-col dark"></view>
|
||||
</uni-col>
|
||||
<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
|
||||
<view class="demo-uni-col light"></view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<uni-row class="demo-uni-row">
|
||||
<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
|
||||
<view class="demo-uni-col dark"></view>
|
||||
</uni-col>
|
||||
<uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
|
||||
<view class="demo-uni-col light"></view>
|
||||
</uni-col>
|
||||
<uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
|
||||
<view class="demo-uni-col dark"></view>
|
||||
</uni-col>
|
||||
<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
|
||||
<view class="demo-uni-col light"></view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-row.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=row)
|
||||
- [Local Example](examples/uni-ui/uni-row.vue)
|
||||
@@ -0,0 +1,195 @@
|
||||
# uni-search-bar
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-search-bar
|
||||
|
||||
代码块： uSearchBar
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-search-bar />`（或 `<uni-search-bar></uni-search-bar>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| value/v-model | StringNumber | | 搜索栏绑定值 |
|
||||
| placeholder | String | 搜索 | 搜索栏Placeholder |
|
||||
| radius | Number | 10 | 搜索栏圆角，单位px |
|
||||
| clearButton | String | auto | 是否显示清除按钮，可选值 always -一直显示、 auto -输入框不为空时显示、 none -一直不显示 |
|
||||
| cancelButton | String | auto | 是否显示取消按钮，可选值 always -一直显示、 auto -输入框不为空时显示、 none -一直不显示 |
|
||||
| cancelText | String | 取消 | 取消按钮的文字 |
|
||||
| bgColor | String | #F8F8F8 | 输入框背景颜色 |
|
||||
| textColor | String | #F8F8F8 | 输入时文字颜色 |
|
||||
| maxlength | Number | 100 | 输入最大长度 |
|
||||
| focus | Boolean | false | |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| @confirm | uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value | e={value:Number} |
|
||||
| @input | uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value | e=value |
|
||||
| @cancel | 点击取消按钮时触发事件，返回参数为uniSearchBar的value | e={value:Number} |
|
||||
| @clear | 点击清除按钮时触发事件，返回参数为uniSearchBar的value | e={value:Number} |
|
||||
| @focus | input 获取焦点时触发事件，返回参数为uniSearchBar的value | e={value:Number} |
|
||||
| @blur | input 失去焦点时触发事件，返回参数为uniSearchBar的value | e={value:Number} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-search-bar.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 基本用法 -->
|
||||
<uni-search-bar @confirm="search" @input="input" ></uni-search-bar>
|
||||
|
||||
<!-- v-model 用法 -->
|
||||
<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input" @cancel="cancel" @change="change" @clear="clear"></uni-search-bar>
|
||||
|
||||
<!-- 自定义Placeholder -->
|
||||
<uni-search-bar placeholder="自定placeholder" @confirm="search"></uni-search-bar>
|
||||
|
||||
<!-- 设置圆角 -->
|
||||
<uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<!-- 基本用法 -->
|
||||
<uni-search-bar @confirm="search" @input="input" ></uni-search-bar>
|
||||
|
||||
<!-- v-model 用法 -->
|
||||
<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input" @cancel="cancel" @change="change" @clear="clear"></uni-search-bar>
|
||||
|
||||
<!-- 自定义Placeholder -->
|
||||
<uni-search-bar placeholder="自定placeholder" @confirm="search"></uni-search-bar>
|
||||
|
||||
<!-- 设置圆角 -->
|
||||
<uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<!-- 替换组件的搜索图标 -->
|
||||
<uni-search-bar placeholder="自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
|
||||
<template v-slot:searchIcon>
|
||||
<uni-icons color="#999999" size="18" type="home" />
|
||||
</template>
|
||||
</uni-search-bar>
|
||||
|
||||
<!-- 替换组件的清除图标 -->
|
||||
<uni-search-bar placeholder="自定义clearIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
|
||||
|
||||
<template v-slot:clearIcon>
|
||||
<view style="color: #999999" >X</view>
|
||||
</template>
|
||||
</uni-search-bar>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<!-- 替换组件的搜索图标 -->
|
||||
<uni-search-bar placeholder="自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
|
||||
<template v-slot:searchIcon>
|
||||
<uni-icons color="#999999" size="18" type="home" />
|
||||
</template>
|
||||
</uni-search-bar>
|
||||
|
||||
<!-- 替换组件的清除图标 -->
|
||||
<uni-search-bar placeholder="自定义clearIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
|
||||
|
||||
<template v-slot:clearIcon>
|
||||
<view style="color: #999999" >X</view>
|
||||
</template>
|
||||
</uni-search-bar>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">搜索栏组件，通常用于搜索商品、文章等。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基本用法" type="line">
|
||||
<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
|
||||
@cancel="cancel" @clear="clear">
|
||||
</uni-search-bar>
|
||||
<view class="search-result">
|
||||
<text class="search-result-text">当前输入为：{{ searchValue }}</text>
|
||||
</view>
|
||||
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" subTitle="使用 bgColor 属性自定义背景色" type="line">
|
||||
<uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE" @confirm="search" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义icon" type="line">
|
||||
<uni-search-bar placeholder="自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
|
||||
<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
|
||||
</uni-search-bar>
|
||||
</uni-section>
|
||||
<uni-section title="控制清除/取消按钮" subTitle="使用 clearButton 属性设置清除按钮" type="line">
|
||||
<uni-search-bar radius="5" placeholder="一直显示" clearButton="always" cancelButton="always" @confirm="search"
|
||||
@cancel="cancel" />
|
||||
<uni-search-bar class="uni-mt-10" radius="5" placeholder="自动显示隐藏" clearButton="auto" cancelButton="none" @confirm="search" />
|
||||
<uni-search-bar class="uni-mt-10" radius="100" placeholder="一直不显示" clearButton="none" cancelButton="none" @confirm="search" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">搜索栏组件，通常用于搜索商品、文章等。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基本用法" type="line">
|
||||
<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
|
||||
@cancel="cancel" @clear="clear">
|
||||
</uni-search-bar>
|
||||
<view class="search-result">
|
||||
<text class="search-result-text">当前输入为：{{ searchValue }}</text>
|
||||
</view>
|
||||
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" subTitle="使用 bgColor 属性自定义背景色" type="line">
|
||||
<uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE" @confirm="search" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义icon" type="line">
|
||||
<uni-search-bar placeholder="自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
|
||||
<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
|
||||
</uni-search-bar>
|
||||
</uni-section>
|
||||
<uni-section title="控制清除/取消按钮" subTitle="使用 clearButton 属性设置清除按钮" type="line">
|
||||
<uni-search-bar radius="5" placeholder="一直显示" clearButton="always" cancelButton="always" @confirm="search"
|
||||
@cancel="cancel" />
|
||||
<uni-search-bar class="uni-mt-10" radius="5" placeholder="自动显示隐藏" clearButton="auto" cancelButton="none" @confirm="search" />
|
||||
<uni-search-bar class="uni-mt-10" radius="100" placeholder="一直不显示" clearButton="none" cancelButton="none" @confirm="search" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-search-bar.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=search-bar)
|
||||
- [Local Example](examples/uni-ui/uni-search-bar.vue)
|
||||
@@ -0,0 +1,220 @@
|
||||
# uni-section
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-section
|
||||
|
||||
代码块： uSection
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-section />`（或 `<uni-section></uni-section>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | String | - | 装饰类型，可选值：line（竖线）、circle（圆形）、square（方形） |
|
||||
| title | String | - | 主标题 |
|
||||
| titleFontSize | String | 14px | 主标题字体大小 |
|
||||
| titleColor | String | #333 | 主标题字体颜色 |
|
||||
| subTitle | String | - | 副标题 |
|
||||
| subTitleFontSize | String | 12px | 副标题字体大小 |
|
||||
| subTitleColor | String | #999 | 副标题字体颜色 |
|
||||
| padding | Boolean/String | false | 默认插槽容器的 padding 值，传入类型为 Boolean 时，设置为 10px 或 0 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 事件说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| @click | 点击 Section 触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-section.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-section class="mb-10" title="基础用法" sub-title="副标题"></uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="竖线装饰" sub-title="副标题" type="line"></uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="装饰器插槽" sub-title="副标题">
|
||||
<template v-slot:decoration>
|
||||
<view class="decoration"></view>
|
||||
</template>
|
||||
</uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="默认插槽" sub-title="副标题">默认插槽内容</uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="主标题">
|
||||
<template v-slot:right>
|
||||
right slot
|
||||
</template>
|
||||
</uni-section>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-section class="mb-10" title="基础用法" sub-title="副标题"></uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="竖线装饰" sub-title="副标题" type="line"></uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="装饰器插槽" sub-title="副标题">
|
||||
<template v-slot:decoration>
|
||||
<view class="decoration"></view>
|
||||
</template>
|
||||
</uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="默认插槽" sub-title="副标题">默认插槽内容</uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="主标题">
|
||||
<template v-slot:right>
|
||||
right slot
|
||||
</template>
|
||||
</uni-section>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="uni-wrap">
|
||||
<view class="example-info">
|
||||
<text class="example-info-text"> uni-section 组件主要用于文章、列表详情等标题展示 </text>
|
||||
</view>
|
||||
<uni-section class="mb-10" title="基础用法" sub-title="副标题"></uni-section>
|
||||
<uni-section class="mb-10" title="竖线装饰" sub-title="副标题" type="line"></uni-section>
|
||||
<uni-section class="mb-10" title="装饰器插槽" sub-title="副标题">
|
||||
<template v-slot:decoration>
|
||||
<view class="decoration"></view>
|
||||
</template>
|
||||
</uni-section>
|
||||
<uni-section class="mb-10" title="默认插槽" sub-title="副标题" padding="0 0 5px 10px">默认插槽内容</uni-section>
|
||||
<uni-section class="mb-10" title="主标题">
|
||||
<template v-slot:right>
|
||||
right slot
|
||||
</template>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onReady() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-success: #18bc37 !default;
|
||||
|
||||
.uni-wrap {
|
||||
flex-direction: column;
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - 44px);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
height: 100vh;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.decoration {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: $uni-success;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="uni-wrap">
|
||||
<view class="example-info">
|
||||
<text class="example-info-text"> uni-section 组件主要用于文章、列表详情等标题展示 </text>
|
||||
</view>
|
||||
<uni-section class="mb-10" title="基础用法" sub-title="副标题"></uni-section>
|
||||
<uni-section class="mb-10" title="竖线装饰" sub-title="副标题" type="line"></uni-section>
|
||||
<uni-section class="mb-10" title="装饰器插槽" sub-title="副标题">
|
||||
<template v-slot:decoration>
|
||||
<view class="decoration"></view>
|
||||
</template>
|
||||
</uni-section>
|
||||
<uni-section class="mb-10" title="默认插槽" sub-title="副标题" padding="0 0 5px 10px">默认插槽内容</uni-section>
|
||||
<uni-section class="mb-10" title="主标题">
|
||||
<template v-slot:right>
|
||||
right slot
|
||||
</template>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onReady() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-success: #18bc37 !default;
|
||||
|
||||
.uni-wrap {
|
||||
flex-direction: column;
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - 44px);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
height: 100vh;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.decoration {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: $uni-success;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-section.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=section)
|
||||
- [Local Example](examples/uni-ui/uni-section.vue)
|
||||
@@ -0,0 +1,359 @@
|
||||
# uni-segmented-control
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-segmented-control
|
||||
|
||||
代码块： uSegmentedControl
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-segmented-control />`（或 `<uni-segmented-control></uni-segmented-control>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| current | Number | 0 | 当前选中的tab索引值，从0计数 |
|
||||
| styleType | String | button | 分段器样式类型，可选值：button（按钮类型），text（文字类型） |
|
||||
| activeColor | String | #007aff | 选中的标签背景色与边框颜色 |
|
||||
| inActiveColor | String | transparent | 未激活时的颜色 |
|
||||
| values | Array | - | 选项数组 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @clickItem | 组件触发点击事件时触发 | e={currentIndex} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-segmented-control.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
...
|
||||
items: ['选项1', '选项2', '选项3'],
|
||||
current: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
...
|
||||
onClickItem(e) {
|
||||
if (this.current != e.currentIndex) {
|
||||
this.current = e.currentIndex;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
...
|
||||
items: ['选项1', '选项2', '选项3'],
|
||||
current: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
...
|
||||
onClickItem(e) {
|
||||
if (this.current != e.currentIndex) {
|
||||
this.current = e.currentIndex;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="实心标签" type="line">
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<uni-segmented-control :current="current" :values="items" :style-type="styleType"
|
||||
:active-color="activeColor" @clickItem="onClickItem" />
|
||||
</view>
|
||||
<view class="content">
|
||||
<view v-if="current === 0"><text class="content-text">选项卡1的内容</text></view>
|
||||
<view v-if="current === 1"><text class="content-text">选项卡2的内容</text></view>
|
||||
<view v-if="current === 2"><text class="content-text">选项卡3的内容</text></view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="Style" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<radio-group class="uni-list" @change="styleChange">
|
||||
<view v-for="(item, index) in styles" :key="index" class="uni-list-item">
|
||||
<view class="uni-list-item__container">
|
||||
<view class="uni-list-item__content">
|
||||
<text class="uni-list-item__content-title">{{ item.text }}</text>
|
||||
</view>
|
||||
<view class="uni-list-item__extra">
|
||||
<radio :value="item.value" :checked="item.checked" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
<uni-section title="Color" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<radio-group class="uni-list" @change="colorChange">
|
||||
<view v-for="(item, index) in colors" :key="index" class="uni-list-item">
|
||||
<view class="uni-list-item__container">
|
||||
<view class="uni-list-item__content">
|
||||
<view :style="{ backgroundColor: item }" class="color-tag" />
|
||||
</view>
|
||||
<view class="uni-list-item__extra">
|
||||
<radio :value="item" :checked="index === colorIndex" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="实心标签" type="line">
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<uni-segmented-control :current="current" :values="items" :style-type="styleType"
|
||||
:active-color="activeColor" @clickItem="onClickItem" />
|
||||
</view>
|
||||
<view class="content">
|
||||
<view v-if="current === 0"><text class="content-text">选项卡1的内容</text></view>
|
||||
<view v-if="current === 1"><text class="content-text">选项卡2的内容</text></view>
|
||||
<view v-if="current === 2"><text class="content-text">选项卡3的内容</text></view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="Style" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<radio-group class="uni-list" @change="styleChange">
|
||||
<view v-for="(item, index) in styles" :key="index" class="uni-list-item">
|
||||
<view class="uni-list-item__container">
|
||||
<view class="uni-list-item__content">
|
||||
<text class="uni-list-item__content-title">{{ item.text }}</text>
|
||||
</view>
|
||||
<view class="uni-list-item__extra">
|
||||
<radio :value="item.value" :checked="item.checked" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
<uni-section title="Color" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<radio-group class="uni-list" @change="colorChange">
|
||||
<view v-for="(item, index) in colors" :key="index" class="uni-list-item">
|
||||
<view class="uni-list-item__container">
|
||||
<view class="uni-list-item__content">
|
||||
<view :style="{ backgroundColor: item }" class="color-tag" />
|
||||
</view>
|
||||
<view class="uni-list-item__extra">
|
||||
<radio :value="item" :checked="index === colorIndex" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
items: ['选项卡1', '选项卡2', '选项卡3'],
|
||||
styles: [{
|
||||
value: 'button',
|
||||
text: '按钮',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
value: 'text',
|
||||
text: '文字'
|
||||
}
|
||||
],
|
||||
colors: ['#007aff', '#4cd964', '#dd524d'],
|
||||
current: 0,
|
||||
colorIndex: 0,
|
||||
activeColor: '#007aff',
|
||||
styleType: 'button'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickItem(e) {
|
||||
if (this.current !== e.currentIndex) {
|
||||
this.current = e.currentIndex
|
||||
}
|
||||
},
|
||||
styleChange(e) {
|
||||
if (this.styleType !== e.detail.value) {
|
||||
this.styleType = e.detail.value
|
||||
}
|
||||
},
|
||||
colorChange(e) {
|
||||
if (this.styleType !== e.detail.value) {
|
||||
console.log(e.detail.value);
|
||||
this.activeColor = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.uni-common-mt {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.uni-padding-wrap {
|
||||
// width: 750rpx;
|
||||
padding: 0px 30px;
|
||||
}
|
||||
|
||||
.content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.color-tag {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.uni-list {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-list-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
.uni-list-item__container {
|
||||
padding: 12px 15px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #eee;
|
||||
}
|
||||
|
||||
.uni-list-item__content-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-segmented-control.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=segmented-control)
|
||||
- [Local Example](examples/uni-ui/uni-segmented-control.vue)
|
||||
@@ -0,0 +1,174 @@
|
||||
# uni-steps
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-steps
|
||||
|
||||
代码块： uSteps
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-steps />`（或 `<uni-steps></uni-steps>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| active | Number | - | 0 | 当前步骤 |
|
||||
| direction | String | row/column | row | 排列方向 |
|
||||
| active-color | String | - | #1aad19 | 选中状态的颜色 |
|
||||
| options | Array | - | - | 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}] |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-steps.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-steps.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 基本用法 -->
|
||||
<uni-steps :options="[{title: '事件一'}, {title: '事件二'}, {title: '事件三'}, {title: '事件四'}]" :active="1"></uni-steps>
|
||||
|
||||
<!-- 纵向排列 -->
|
||||
<uni-steps :options="[{title:'买家下单',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易完成',desc:'2018-11-14'}]" direction="column" :active="2"></uni-steps>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<!-- 基本用法 -->
|
||||
<uni-steps :options="[{title: '事件一'}, {title: '事件二'}, {title: '事件三'}, {title: '事件四'}]" :active="1"></uni-steps>
|
||||
|
||||
<!-- 纵向排列 -->
|
||||
<uni-steps :options="[{title:'买家下单',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易完成',desc:'2018-11-14'}]" direction="column" :active="2"></uni-steps>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-section title="基本用法" type="line" padding>
|
||||
<uni-steps :options="list1" :active="active" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义图标" type="line" padding>
|
||||
<uni-steps :options="list1" active-icon="checkbox" :active="active" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义图标" type="line" padding>
|
||||
<uni-steps :options="list1" active-icon="medal" :active="active" />
|
||||
</uni-section>
|
||||
<uni-section title="纵向排列" type="line" padding>
|
||||
<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
|
||||
</uni-section>
|
||||
<button type="primary" size="mini" style="margin: 30px 10px; width: 100px;" @click="change">改变状态</button>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-section title="基本用法" type="line" padding>
|
||||
<uni-steps :options="list1" :active="active" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义图标" type="line" padding>
|
||||
<uni-steps :options="list1" active-icon="checkbox" :active="active" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义图标" type="line" padding>
|
||||
<uni-steps :options="list1" active-icon="medal" :active="active" />
|
||||
</uni-section>
|
||||
<uni-section title="纵向排列" type="line" padding>
|
||||
<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
|
||||
</uni-section>
|
||||
<button type="primary" size="mini" style="margin: 30px 10px; width: 100px;" @click="change">改变状态</button>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
active: 1,
|
||||
list1: [{
|
||||
title: '事件一'
|
||||
}, {
|
||||
title: '事件二'
|
||||
}, {
|
||||
title: '事件三'
|
||||
}, {
|
||||
title: '事件四'
|
||||
}],
|
||||
list2: [{
|
||||
title: '买家下单',
|
||||
desc: '2018-11-11'
|
||||
}, {
|
||||
title: '卖家发货',
|
||||
desc: '2018-11-12'
|
||||
}, {
|
||||
title: '买家签收',
|
||||
desc: '2018-11-13'
|
||||
}, {
|
||||
title: '交易完成',
|
||||
desc: '2018-11-14'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
if (this.active < this.list1.length - 1) {
|
||||
this.active += 1
|
||||
} else {
|
||||
this.active = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.status-btn {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 92rpx;
|
||||
margin: 30rpx;
|
||||
background-color: #007AFF;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
padding: 15px;
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-steps.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=steps)
|
||||
- [Local Example](examples/uni-ui/uni-steps.vue)
|
||||
@@ -0,0 +1,239 @@
|
||||
# uni-swipe-action
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-swipe-action
|
||||
|
||||
代码块： uSwipeAction 、 uSwipeActionItem
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-swipe-action />`（或 `<uni-swipe-action></uni-swipe-action>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 是否必填 | 说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| show | String | left/right/none | none | 否 | 开启关闭组件，auto-close = false 时生效 |
|
||||
| threshold | Number | - | 20 | 否 | 滑动阈值 |
|
||||
| disabled | Boolean | - | false | 否 | 是否禁止滑动 |
|
||||
| autoClose | Boolean | - | true | 否 | 其他组件开启的时候，当前组件是否自动关闭， 注意：长列表使用会有性能问题 |
|
||||
| left-options | Array/Object | - | - | 否 | 左侧选项内容及样式 |
|
||||
| right-options | Array/Object | - | - | 否 | 右侧选项内容及样式 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @click | 点击选项按钮时触发事件 | e = {content,index} ，content（点击内容）、index（下标）、position (位置信息) |
|
||||
| @change | 组件打开或关闭时触发 | left:左侧 ，right：右侧，none：关闭 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-swipe-action.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-swipe-action>
|
||||
<!-- 基础用法 -->
|
||||
<uni-swipe-action-item :right-options="options" :left-options="options" @click="onClick" @change="change">
|
||||
<view>SwipeAction 基础使用场景</view>
|
||||
</uni-swipe-action-item>
|
||||
<!-- 使用插槽 （请自行给定插槽内容宽度）-->
|
||||
<uni-swipe-action-item>
|
||||
<template v-slot:left>
|
||||
<view><text>置顶</text></view>
|
||||
</template>
|
||||
<view>
|
||||
<text>使用插槽</text>
|
||||
</view>
|
||||
<template v-slot:right>
|
||||
<view><text>删除</text></view>
|
||||
</template>
|
||||
</uni-swipe-action-item>
|
||||
<!-- 混合用法 -->
|
||||
<uni-swipe-action-item :right-options="options">
|
||||
<template v-slot:left>
|
||||
<view><text>置顶</text></view>
|
||||
</template>
|
||||
<view><text>混合使用</text></view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
|
||||
<!-- 禁止滑动 -->
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item :disabled="true" :right-options="options">
|
||||
<view>SwipeAction 基础使用场景</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
|
||||
<!-- 按组使用 -->
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item :right-options="options" @click="onClick" @change="swipeChange($event, 0)">
|
||||
<view>item1</view>
|
||||
</uni-swipe-action-item>
|
||||
<uni-swipe-action-item :right-options="options" @click="onClick" @change="swipeChange($event, 1)">
|
||||
<view>item2</view>
|
||||
</uni-swipe-action-item>
|
||||
<uni-swipe-action-item :right-options="options" @click="onClick" @change="swipeChange($event, 2)">
|
||||
<view>item3</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-swipe-action>
|
||||
<!-- 基础用法 -->
|
||||
<uni-swipe-action-item :right-options="options" :left-options="options" @click="onClick" @change="change">
|
||||
<view>SwipeAction 基础使用场景</view>
|
||||
</uni-swipe-action-item>
|
||||
<!-- 使用插槽 （请自行给定插槽内容宽度）-->
|
||||
<uni-swipe-action-item>
|
||||
<template v-slot:left>
|
||||
<view><text>置顶</text></view>
|
||||
</template>
|
||||
<view>
|
||||
<text>使用插槽</text>
|
||||
</view>
|
||||
<template v-slot:right>
|
||||
<view><text>删除</text></view>
|
||||
</template>
|
||||
</uni-swipe-action-item>
|
||||
<!-- 混合用法 -->
|
||||
<uni-swipe-action-item :right-options="options">
|
||||
<template v-slot:left>
|
||||
<view><text>置顶</text></view>
|
||||
</template>
|
||||
<view><text>混合使用</text></view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
|
||||
<!-- 禁止滑动 -->
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item :disabled="true" :right-options="options">
|
||||
<view>SwipeAction 基础使用场景</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
|
||||
<!-- 按组使用 -->
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item :right-options="options" @click="onClick" @change="swipeChange($event, 0)">
|
||||
<view>item1</view>
|
||||
</uni-swipe-action-item>
|
||||
<uni-swipe-action-item :right-options="options" @click="onClick" @change="swipeChange($event, 1)">
|
||||
<view>item2</view>
|
||||
</uni-swipe-action-item>
|
||||
<uni-swipe-action-item :right-options="options" @click="onClick" @change="swipeChange($event, 2)">
|
||||
<view>item3</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
text: '取消',
|
||||
style: {
|
||||
backgroundColor: '#007aff'
|
||||
}
|
||||
}, {
|
||||
text: '确认',
|
||||
style: {
|
||||
backgroundColor: '#dd524d'
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
|
||||
},
|
||||
change(event) {
|
||||
console.log('改变事件', event);
|
||||
},
|
||||
swipeChange(e, index) {
|
||||
console.log('当前状态：' + e + '，下标：' + index)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
text: '取消',
|
||||
style: {
|
||||
backgroundColor: '#007aff'
|
||||
}
|
||||
}, {
|
||||
text: '确认',
|
||||
style: {
|
||||
backgroundColor: '#dd524d'
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
|
||||
},
|
||||
change(event) {
|
||||
console.log('改变事件', event);
|
||||
},
|
||||
swipeChange(e, index) {
|
||||
console.log('当前状态：' + e + '，下标：' + index)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
{
|
||||
"path": "swipe-action/swipe-action",
|
||||
"style": {
|
||||
"navigationBarTitleText": "SwipeAction 滑动操作",
|
||||
"disableScroll":true,
|
||||
"app-plus":{
|
||||
"bounce":"none"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```javascript
|
||||
{
|
||||
"path": "swipe-action/swipe-action",
|
||||
"style": {
|
||||
"navigationBarTitleText": "SwipeAction 滑动操作",
|
||||
"disableScroll":true,
|
||||
"app-plus":{
|
||||
"bounce":"none"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-swipe-action.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=swipe-action)
|
||||
- [Local Example](examples/uni-ui/uni-swipe-action.vue)
|
||||
@@ -0,0 +1,231 @@
|
||||
# uni-swiper-dot
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-swiper-dot
|
||||
|
||||
代码块： uSwiperDot
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-swiper-dot />`（或 `<uni-swiper-dot></uni-swiper-dot>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| current | Number | 0 | 当前指示点索引，必须是通过 swiper 的 change 事件获取到的 e.detail.current |
|
||||
| mode | String | default | 指示点的类型，可选值：default 、round 、nav 、 indexes |
|
||||
| field | String | - | mode 为 nav 时，显示的内容字段（mode = nav 时必填） |
|
||||
| info | Array | - | 轮播图的数据，通过数组长度决定指示点个数 |
|
||||
| dotsStyles | Object | - | 指示点样式 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-swiper-dot.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-swiper-dot.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
|
||||
<swiper class="swiper-box" @change="change">
|
||||
<swiper-item v-for="(item ,index) in info" :key="index">
|
||||
<view class="swiper-item">
|
||||
{{item.content}}
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
|
||||
<swiper class="swiper-box" @change="change">
|
||||
<swiper-item v-for="(item ,index) in info" :key="index">
|
||||
<view class="swiper-item">
|
||||
{{item.content}}
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
info: [{
|
||||
content: '内容 A'
|
||||
}, {
|
||||
content: '内容 B'
|
||||
}, {
|
||||
content: '内容 C'
|
||||
}],
|
||||
current: 0,
|
||||
mode: 'round',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.current = e.detail.current;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
info: [{
|
||||
content: '内容 A'
|
||||
}, {
|
||||
content: '内容 B'
|
||||
}, {
|
||||
content: '内容 C'
|
||||
}],
|
||||
current: 0,
|
||||
mode: 'round',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.current = e.detail.current;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
|
||||
:dots-styles="dotsStyles" field="content">
|
||||
<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
|
||||
<swiper-item v-for="(item, index) in 3" :key="index">
|
||||
<view class="swiper-item" :class="'swiper-item' + index">
|
||||
<text style="color: #fff; font-size: 32px;">{{index+1}}</text>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
<uni-section title="模式选择" type="line">
|
||||
<view class="example-body">
|
||||
<view :class="{ active: modeIndex === 0 }" class="example-body-item" @click="selectMode('default', 0)">
|
||||
<text class="example-body-item-text">default</text></view>
|
||||
<view :class="{ active: modeIndex === 1 }" class="example-body-item" @click="selectMode('dot', 1)"><text
|
||||
class="example-body-item-text">dot</text></view>
|
||||
<view :class="{ active: modeIndex === 2 }" class="example-body-item" @click="selectMode('round', 2)">
|
||||
<text class="example-body-item-text">round</text></view>
|
||||
<view :class="{ active: modeIndex === 3 }" class="example-body-item" @click="selectMode('nav', 3)"><text
|
||||
class="example-body-item-text">nav</text></view>
|
||||
<view :class="{ active: modeIndex === 4 }" class="example-body-item" @click="selectMode('indexes', 4)">
|
||||
<text class="example-body-item-text">indexes</text></view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="颜色样式选择" type="line">
|
||||
<view class="example-body">
|
||||
<template v-if="mode !== 'nav'">
|
||||
<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index"
|
||||
class="example-body-item" @click="selectStyle(index)">
|
||||
<view :style="{ 'background-color': item.selectedBackgroundColor, border: item.selectedBorder }"
|
||||
class="example-body-dots" />
|
||||
<view :style="{ 'background-color': item.backgroundColor, border: item.border }"
|
||||
class="example-body-dots" />
|
||||
<view :style="{ 'background-color': item.backgroundColor, border: item.border }"
|
||||
class="example-body-dots" />
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="mode === 'nav'">
|
||||
<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index"
|
||||
:style="{ 'background-color': item.selectedBackgroundColor }" class="example-body-item"
|
||||
@click="selectStyle(index)">
|
||||
<text class="example-body-item-text" :style="{ color: item.color }">内容</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
|
||||
:dots-styles="dotsStyles" field="content">
|
||||
<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
|
||||
<swiper-item v-for="(item, index) in 3" :key="index">
|
||||
<view class="swiper-item" :class="'swiper-item' + index">
|
||||
<text style="color: #fff; font-size: 32px;">{{index+1}}</text>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
<uni-section title="模式选择" type="line">
|
||||
<view class="example-body">
|
||||
<view :class="{ active: modeIndex === 0 }" class="example-body-item" @click="selectMode('default', 0)">
|
||||
<text class="example-body-item-text">default</text></view>
|
||||
<view :class="{ active: modeIndex === 1 }" class="example-body-item" @click="selectMode('dot', 1)"><text
|
||||
class="example-body-item-text">dot</text></view>
|
||||
<view :class="{ active: modeIndex === 2 }" class="example-body-item" @click="selectMode('round', 2)">
|
||||
<text class="example-body-item-text">round</text></view>
|
||||
<view :class="{ active: modeIndex === 3 }" class="example-body-item" @click="selectMode('nav', 3)"><text
|
||||
class="example-body-item-text">nav</text></view>
|
||||
<view :class="{ active: modeIndex === 4 }" class="example-body-item" @click="selectMode('indexes', 4)">
|
||||
<text class="example-body-item-text">indexes</text></view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="颜色样式选择" type="line">
|
||||
<view class="example-body">
|
||||
<template v-if="mode !== 'nav'">
|
||||
<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index"
|
||||
class="example-body-item" @click="selectStyle(index)">
|
||||
<view :style="{ 'background-color': item.selectedBackgroundColor, border: item.selectedBorder }"
|
||||
class="example-body-dots" />
|
||||
<view :style="{ 'background-color': item.backgroundColor, border: item.border }"
|
||||
class="example-body-dots" />
|
||||
<view :style="{ 'background-color': item.backgroundColor, border: item.border }"
|
||||
class="example-body-dots" />
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="mode === 'nav'">
|
||||
<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index"
|
||||
:style="{ 'background-color': item.selectedBackgroundColor }" class="example-body-item"
|
||||
@click="selectStyle(index)">
|
||||
<text class="example-body-item-text" :style="{ color: item.color }">内容</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-swiper-dot.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=swiper-dot)
|
||||
- [Local Example](examples/uni-ui/uni-swiper-dot.vue)
|
||||
@@ -0,0 +1,195 @@
|
||||
# uni-table
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-table
|
||||
|
||||
代码块： uTable
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-table />`（或 `<uni-table></uni-table>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| border | Boolean | false | - | 是否带有纵向边框 |
|
||||
| stripe | Boolean | false | - | 是否显示斑马线样式 |
|
||||
| type | String | '' | - | 值为type="selection" 时开启多选 |
|
||||
| emptyText | String | 没有更多数据 | - | 空数据时显示的文本内容 |
|
||||
| loading | Boolean | false | - | 显示加载中 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| selection-change | 开启多选时，当选择项发生变化时会触发该事件 | Function(Object) |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-table.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-table border stripe emptyText="暂无更多数据" >
|
||||
<!-- 表头行 -->
|
||||
<uni-tr>
|
||||
<uni-th align="center">日期</uni-th>
|
||||
<uni-th align="center">姓名</uni-th>
|
||||
<uni-th align="left">地址</uni-th>
|
||||
</uni-tr>
|
||||
<!-- 表格数据行 -->
|
||||
<uni-tr>
|
||||
<uni-td>2020-10-20</uni-td>
|
||||
<uni-td>Jeson</uni-td>
|
||||
<uni-td>北京市海淀区</uni-td>
|
||||
</uni-tr>
|
||||
<uni-tr>
|
||||
<uni-td>2020-10-21</uni-td>
|
||||
<uni-td>HanMeiMei</uni-td>
|
||||
<uni-td>北京市海淀区</uni-td>
|
||||
</uni-tr>
|
||||
<uni-tr>
|
||||
<uni-td>2020-10-22</uni-td>
|
||||
<uni-td>LiLei</uni-td>
|
||||
<uni-td>北京市海淀区</uni-td>
|
||||
</uni-tr>
|
||||
<uni-tr>
|
||||
<uni-td>2020-10-23</uni-td>
|
||||
<uni-td>Danner</uni-td>
|
||||
<uni-td>北京市海淀区</uni-td>
|
||||
</uni-tr>
|
||||
|
||||
</uni-table>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-table border stripe emptyText="暂无更多数据" >
|
||||
<!-- 表头行 -->
|
||||
<uni-tr>
|
||||
<uni-th align="center">日期</uni-th>
|
||||
<uni-th align="center">姓名</uni-th>
|
||||
<uni-th align="left">地址</uni-th>
|
||||
</uni-tr>
|
||||
<!-- 表格数据行 -->
|
||||
<uni-tr>
|
||||
<uni-td>2020-10-20</uni-td>
|
||||
<uni-td>Jeson</uni-td>
|
||||
<uni-td>北京市海淀区</uni-td>
|
||||
</uni-tr>
|
||||
<uni-tr>
|
||||
<uni-td>2020-10-21</uni-td>
|
||||
<uni-td>HanMeiMei</uni-td>
|
||||
<uni-td>北京市海淀区</uni-td>
|
||||
</uni-tr>
|
||||
<uni-tr>
|
||||
<uni-td>2020-10-22</uni-td>
|
||||
<uni-td>LiLei</uni-td>
|
||||
<uni-td>北京市海淀区</uni-td>
|
||||
</uni-tr>
|
||||
<uni-tr>
|
||||
<uni-td>2020-10-23</uni-td>
|
||||
<uni-td>Danner</uni-td>
|
||||
<uni-td>北京市海淀区</uni-td>
|
||||
</uni-tr>
|
||||
|
||||
</uni-table>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
e = {
|
||||
filterType: "", //筛选类型 search/select/range 和传入的相同
|
||||
filter: "" // 值, filterType=search字符串类型，filterType=select数组类型，filterType=range数组类型，[0]开始值， [1]结束值
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
e = {
|
||||
filterType: "", //筛选类型 search/select/range 和传入的相同
|
||||
filter: "" // 值, filterType=search字符串类型，filterType=select数组类型，filterType=range数组类型，[0]开始值， [1]结束值
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-container">
|
||||
<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
|
||||
<uni-tr>
|
||||
<uni-th width="150" align="center">日期</uni-th>
|
||||
<uni-th width="150" align="center">姓名</uni-th>
|
||||
<uni-th align="center">地址</uni-th>
|
||||
<uni-th width="204" align="center">设置</uni-th>
|
||||
</uni-tr>
|
||||
<uni-tr v-for="(item, index) in tableData" :key="index">
|
||||
<uni-td>{{ item.date }}</uni-td>
|
||||
<uni-td>
|
||||
<view class="name">{{ item.name }}</view>
|
||||
</uni-td>
|
||||
<uni-td align="center">{{ item.address }}</uni-td>
|
||||
<uni-td>
|
||||
<view class="uni-group">
|
||||
<button class="uni-button" size="mini" type="primary">修改</button>
|
||||
<button class="uni-button" size="mini" type="warn">删除</button>
|
||||
</view>
|
||||
</uni-td>
|
||||
</uni-tr>
|
||||
</uni-table>
|
||||
<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-container">
|
||||
<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
|
||||
<uni-tr>
|
||||
<uni-th width="150" align="center">日期</uni-th>
|
||||
<uni-th width="150" align="center">姓名</uni-th>
|
||||
<uni-th align="center">地址</uni-th>
|
||||
<uni-th width="204" align="center">设置</uni-th>
|
||||
</uni-tr>
|
||||
<uni-tr v-for="(item, index) in tableData" :key="index">
|
||||
<uni-td>{{ item.date }}</uni-td>
|
||||
<uni-td>
|
||||
<view class="name">{{ item.name }}</view>
|
||||
</uni-td>
|
||||
<uni-td align="center">{{ item.address }}</uni-td>
|
||||
<uni-td>
|
||||
<view class="uni-group">
|
||||
<button class="uni-button" size="mini" type="primary">修改</button>
|
||||
<button class="uni-button" size="mini" type="warn">删除</button>
|
||||
</view>
|
||||
</uni-td>
|
||||
</uni-tr>
|
||||
</uni-table>
|
||||
<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-table.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=table)
|
||||
- [Local Example](examples/uni-ui/uni-table.vue)
|
||||
@@ -0,0 +1,331 @@
|
||||
# uni-tag
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-tag
|
||||
|
||||
代码块： uTag
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-tag />`（或 `<uni-tag></uni-tag>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| text | String | - | 标签内容 |
|
||||
| size | String | normal | 大小尺寸，可选值：normal、small |
|
||||
| type | String | default | 颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色) |
|
||||
| disabled | Boolean | false | 是否为禁用状态 |
|
||||
| inverted | Boolean | false | 是否无需背景颜色（空心标签） |
|
||||
| customStyle | Boolean | false | 自定义颜色 ，同元素的 style 属性 |
|
||||
| circle | Boolean | false | 是否为圆角 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @click | 点击 Tag 触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-tag.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-tag text="标签"></uni-tag>
|
||||
<uni-tag text="标签" type="error" :circle="true"></uni-tag>
|
||||
<uni-tag text="标签" @click="bindClick"></uni-tag>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-tag text="标签"></uni-tag>
|
||||
<uni-tag text="标签" type="error" :circle="true"></uni-tag>
|
||||
<uni-tag text="标签" @click="bindClick"></uni-tag>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="实心标签" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="success" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="warning" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="error" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="空心标签" subTitle="使用 inverted 属性显示空心表签" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="primary" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="success" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="warning" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="error" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="标签尺寸" subTitle="使用 size 属性控制标签大小" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" size="normal" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" size="small" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" size="mini" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="圆角样式" subTitle="使用 circle 属性控制标签圆角" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" text="标签" type="primary" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" text="标签" type="primary" size="small" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" text="标签" type="primary" size="mini" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="标记样式" subTitle="使用 mark 属性显示标记样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :mark="true" text="标签" type="primary" size="default" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :mark="true" text="标签" type="primary" size="small" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :mark="true" text="标签" type="primary" size="mini" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="不可点击状态" subTitle="使用 disabled 属性 显示禁用样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag disabled text="标签" type="primary" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" subTitle="使用 custom-style 属性自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag text="自定义标签样式"
|
||||
custom-style="background-color: #4335d6; border-color: #4335d6; color: #fff;">
|
||||
</uni-tag>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击事件" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :type="type" text="标签" @click="setType" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" :inverted="inverted" text="标签" type="primary" @click="setInverted" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="实心标签" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="success" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="warning" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="error" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="空心标签" subTitle="使用 inverted 属性显示空心表签" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="primary" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="success" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="warning" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="error" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="标签尺寸" subTitle="使用 size 属性控制标签大小" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" size="normal" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" size="small" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" size="mini" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="圆角样式" subTitle="使用 circle 属性控制标签圆角" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" text="标签" type="primary" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" text="标签" type="primary" size="small" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" text="标签" type="primary" size="mini" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="标记样式" subTitle="使用 mark 属性显示标记样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :mark="true" text="标签" type="primary" size="default" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :mark="true" text="标签" type="primary" size="small" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :mark="true" text="标签" type="primary" size="mini" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="不可点击状态" subTitle="使用 disabled 属性 显示禁用样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag disabled text="标签" type="primary" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" subTitle="使用 custom-style 属性自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag text="自定义标签样式"
|
||||
custom-style="background-color: #4335d6; border-color: #4335d6; color: #fff;">
|
||||
</uni-tag>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击事件" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :type="type" text="标签" @click="setType" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" :inverted="inverted" text="标签" type="primary" @click="setInverted" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
type: "default",
|
||||
inverted: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setType() {
|
||||
let types = ["default", "primary", "success", "warning", "error"];
|
||||
let index = types.indexOf(this.type);
|
||||
types.splice(index, 1);
|
||||
let randomIndex = Math.floor(Math.random() * 4);
|
||||
this.type = types[randomIndex];
|
||||
},
|
||||
setInverted() {
|
||||
this.inverted = !this.inverted;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-tag.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=tag)
|
||||
- [Local Example](examples/uni-ui/uni-tag.vue)
|
||||
@@ -0,0 +1,235 @@
|
||||
# uni-title
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-title
|
||||
|
||||
代码块： uTitle
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-title />`（或 `<uni-title></uni-title>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | String | - | 标题类型，可选值 h1、h2、h3、h4、h5 ，章节标题字体会比正常字长字体粗，不指定 type 值，默认为上报统计数据 |
|
||||
| title | String | - | 章节标题内容 |
|
||||
| align | String | - | 对齐方式，可选值 left:左对齐；center:居中；right:右对齐； |
|
||||
| color | String | - | 字体颜色 |
|
||||
| stat | Boolean | - | 是否开启统计功能呢，如不填写type值，默认为开启，填写 type 属性，默认为关闭 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-title.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-title.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-title title="上报统计数据"></uni-title>
|
||||
<uni-title type="h1" title="h1 一级标题 "></uni-title>
|
||||
<uni-title type="h1" title="h1 一级标题" color="#027fff"></uni-title>
|
||||
<uni-title type="h2" title="h2 居中" align="center"></uni-title>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-title title="上报统计数据"></uni-title>
|
||||
<uni-title type="h1" title="h1 一级标题 "></uni-title>
|
||||
<uni-title type="h1" title="h1 一级标题" color="#027fff"></uni-title>
|
||||
<uni-title type="h2" title="h2 居中" align="center"></uni-title>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="box">
|
||||
<uni-title type="h1" title="h1 一级标题 "></uni-title>
|
||||
</view>
|
||||
</template>
|
||||
<style>
|
||||
.box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="box">
|
||||
<uni-title type="h1" title="h1 一级标题 "></uni-title>
|
||||
</view>
|
||||
</template>
|
||||
<style>
|
||||
.box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="uni-content">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6"> 章节标题，通常用于记录页面标题，使用当前组件在 uni-app 开启统计的情况下，将会自动统计页面标题.</text>
|
||||
</uni-card>
|
||||
<uni-section title="不同类型" type="line">
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="h1 一级标题"></uni-title>
|
||||
<uni-title type="h2" title="h2 二级标题"></uni-title>
|
||||
<uni-title type="h3" title="h3 三级标题"></uni-title>
|
||||
<uni-title type="h4" title="h4 四级标题"></uni-title>
|
||||
<uni-title type="h5" title="h5 五级标题"></uni-title>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="改变颜色" type="line">
|
||||
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="h1 一级标题" color="#027fff"></uni-title>
|
||||
<uni-title type="h2" title="h2 二级标题" color="#2490ff"></uni-title>
|
||||
<uni-title type="h3" title="h3 三级标题" color="#439ffc"></uni-title>
|
||||
<uni-title type="h4" title="h4 四级标题" color="#60adfb"></uni-title>
|
||||
<uni-title type="h5" title="h5 五级标题" color="#7db9f7"></uni-title>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="对齐方式" type="line">
|
||||
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="h1 左对齐" align="left"></uni-title>
|
||||
<uni-title type="h2" title="h2 居中" align="center"></uni-title>
|
||||
<uni-title type="h3" title="h3 右对齐" align="right"></uni-title>
|
||||
<uni-title type="h4" title="h4 居中" align="center"></uni-title>
|
||||
<uni-title type="h5" title="h5 左对齐" align="left"></uni-title>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="组合示例" type="line">
|
||||
|
||||
<view class="example-body">
|
||||
<view class="uni-box-head">
|
||||
<uni-title type="h1" align="center" title="uni-app介绍"></uni-title>
|
||||
</view>
|
||||
<view class="uni-box">
|
||||
<uni-title class="h3" type="h3" title="1 框架介绍"></uni-title>
|
||||
</view>
|
||||
<view class="uni-box">
|
||||
<uni-title class="h4" type="h4" title="1.1 什么是uni-app"></uni-title>
|
||||
</view>
|
||||
<view>
|
||||
<text
|
||||
class="uni-text">uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。DCloud公司拥有370万开发者用户，旗下uni-app有5万+案例、900款插件、50+微信/qq群，并且被阿里小程序工具内置，开发者可以放心选择。</text>
|
||||
</view>
|
||||
<view class="uni-box">
|
||||
<uni-title class="h4" type="h4" title="1.2 开发规范"></uni-title>
|
||||
</view>
|
||||
<view class="">
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 页面文件遵循 Vue 单文件组件 (SFC) 规范"></uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 组件标签靠近小程序规范，详见uni-app 组件规范"></uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666"
|
||||
title="- 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范"></uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期">
|
||||
</uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 为兼容多端运行，建议使用flex布局进行开发"></uni-title>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="uni-content">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6"> 章节标题，通常用于记录页面标题，使用当前组件在 uni-app 开启统计的情况下，将会自动统计页面标题.</text>
|
||||
</uni-card>
|
||||
<uni-section title="不同类型" type="line">
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="h1 一级标题"></uni-title>
|
||||
<uni-title type="h2" title="h2 二级标题"></uni-title>
|
||||
<uni-title type="h3" title="h3 三级标题"></uni-title>
|
||||
<uni-title type="h4" title="h4 四级标题"></uni-title>
|
||||
<uni-title type="h5" title="h5 五级标题"></uni-title>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="改变颜色" type="line">
|
||||
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="h1 一级标题" color="#027fff"></uni-title>
|
||||
<uni-title type="h2" title="h2 二级标题" color="#2490ff"></uni-title>
|
||||
<uni-title type="h3" title="h3 三级标题" color="#439ffc"></uni-title>
|
||||
<uni-title type="h4" title="h4 四级标题" color="#60adfb"></uni-title>
|
||||
<uni-title type="h5" title="h5 五级标题" color="#7db9f7"></uni-title>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="对齐方式" type="line">
|
||||
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="h1 左对齐" align="left"></uni-title>
|
||||
<uni-title type="h2" title="h2 居中" align="center"></uni-title>
|
||||
<uni-title type="h3" title="h3 右对齐" align="right"></uni-title>
|
||||
<uni-title type="h4" title="h4 居中" align="center"></uni-title>
|
||||
<uni-title type="h5" title="h5 左对齐" align="left"></uni-title>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="组合示例" type="line">
|
||||
|
||||
<view class="example-body">
|
||||
<view class="uni-box-head">
|
||||
<uni-title type="h1" align="center" title="uni-app介绍"></uni-title>
|
||||
</view>
|
||||
<view class="uni-box">
|
||||
<uni-title class="h3" type="h3" title="1 框架介绍"></uni-title>
|
||||
</view>
|
||||
<view class="uni-box">
|
||||
<uni-title class="h4" type="h4" title="1.1 什么是uni-app"></uni-title>
|
||||
</view>
|
||||
<view>
|
||||
<text
|
||||
class="uni-text">uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。DCloud公司拥有370万开发者用户，旗下uni-app有5万+案例、900款插件、50+微信/qq群，并且被阿里小程序工具内置，开发者可以放心选择。</text>
|
||||
</view>
|
||||
<view class="uni-box">
|
||||
<uni-title class="h4" type="h4" title="1.2 开发规范"></uni-title>
|
||||
</view>
|
||||
<view class="">
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 页面文件遵循 Vue 单文件组件 (SFC) 规范"></uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 组件标签靠近小程序规范，详见uni-app 组件规范"></uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666"
|
||||
title="- 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范"></uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期">
|
||||
</uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 为兼容多端运行，建议使用flex布局进行开发"></uni-title>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-title.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=title)
|
||||
- [Local Example](examples/uni-ui/uni-title.vue)
|
||||
@@ -0,0 +1,172 @@
|
||||
# uni-tooltip
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-tooltip
|
||||
|
||||
代码块： utooltip
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-tooltip />`（或 `<uni-tooltip></uni-tooltip>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| content | String | | 弹出层显示的内容 |
|
||||
| placement | String | left | Tooltip 的出现位置, 支持 left,right,top,bottom |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-tooltip.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-tooltip.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-tooltip :content="tooltip显示的内容" placement="left">
|
||||
<button>被包裹的组件</button>
|
||||
</uni-tooltip>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-tooltip :content="tooltip显示的内容" placement="left">
|
||||
<button>被包裹的组件</button>
|
||||
</uni-tooltip>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">常用于展示鼠标 hover 时的提示信息，注意：无法覆盖原生组件</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<uni-tooltip content="提示文字" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义弹出层方向" type="line" padding>
|
||||
<view class="direction-container">
|
||||
<uni-tooltip content="示例文字" placement="top">
|
||||
<view class="item">上</view>
|
||||
</uni-tooltip>
|
||||
<uni-tooltip class="item" content="示例文字" placement="bottom">
|
||||
<view class="item">下</view>
|
||||
</uni-tooltip>
|
||||
<uni-tooltip class="item" content="示例文字" placement="left">
|
||||
<view class="item">左</view>
|
||||
</uni-tooltip>
|
||||
<uni-tooltip class="item" content="示例文字" placement="right">
|
||||
<view class="item">右</view>
|
||||
</uni-tooltip>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.direction-container {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
margin: 0 auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #ebebeb;
|
||||
border-radius: 10px;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">常用于展示鼠标 hover 时的提示信息，注意：无法覆盖原生组件</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<uni-tooltip content="提示文字" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义弹出层方向" type="line" padding>
|
||||
<view class="direction-container">
|
||||
<uni-tooltip content="示例文字" placement="top">
|
||||
<view class="item">上</view>
|
||||
</uni-tooltip>
|
||||
<uni-tooltip class="item" content="示例文字" placement="bottom">
|
||||
<view class="item">下</view>
|
||||
</uni-tooltip>
|
||||
<uni-tooltip class="item" content="示例文字" placement="left">
|
||||
<view class="item">左</view>
|
||||
</uni-tooltip>
|
||||
<uni-tooltip class="item" content="示例文字" placement="right">
|
||||
<view class="item">右</view>
|
||||
</uni-tooltip>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.direction-container {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
margin: 0 auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #ebebeb;
|
||||
border-radius: 10px;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-tooltip.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=tooltip)
|
||||
- [Local Example](examples/uni-ui/uni-tooltip.vue)
|
||||
@@ -0,0 +1,210 @@
|
||||
# uni-transition
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-transition
|
||||
|
||||
代码块： uTransition
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-transition />`（或 `<uni-transition></uni-transition>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| show | Boolean | false | 控制组件显示或隐藏 |
|
||||
| mode-class | Array/String | - | 内置过渡动画类型 |
|
||||
| custom-class | String | - | 自定义类名 |
|
||||
| duration | Number | 300 | 过渡动画持续时间 |
|
||||
| styles | Object | - | 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如： backgroundColor:red |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| click | 点击组件触发 | - |
|
||||
| change | 过渡动画结束时触发 | e = {detail:true} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
| 值 | 说明 | 平台差异 |
|
||||
| --- | --- | --- |
|
||||
| linear | 动画从头到尾的速度是相同的 | - |
|
||||
| ease | 动画以低速开始，然后加快，在结束前变慢 | - |
|
||||
| ease-in | 动画以低速开始 | - |
|
||||
| ease-in-out | 动画以低速开始和结束 | - |
|
||||
| ease-out | 动画以低速结束 | - |
|
||||
| step-start | 动画第一帧就跳至结束状态直到结束 | nvue不支持 |
|
||||
| step-end | 动画一直保持开始状态，最后一帧跳到结束状态 | nvue不支持 |
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<button type="primary" @click="open">fade</button>
|
||||
<uni-transition mode-class="fade" :styles="{'width':'100px','height':'100px','backgroundColor':'red'}" :show="show" @change="change" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
open(mode) {
|
||||
this.show = !this.show
|
||||
},
|
||||
change() {
|
||||
console.log('触发动画')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<button type="primary" @click="open">fade</button>
|
||||
<uni-transition mode-class="fade" :styles="{'width':'100px','height':'100px','backgroundColor':'red'}" :show="show" @change="change" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
open(mode) {
|
||||
this.show = !this.show
|
||||
},
|
||||
change() {
|
||||
console.log('触发动画')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-transition custom-class="custom-transition" mode-class="fade" :duration="0" :show="true" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* 常规样式覆盖 */
|
||||
.content >>> .custom-transition {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-color:red;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
/* 如果使用 scss 需要使用 /deep/ */
|
||||
.content /deep/ .custom-transition {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-color:red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-transition custom-class="custom-transition" mode-class="fade" :duration="0" :show="true" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* 常规样式覆盖 */
|
||||
.content >>> .custom-transition {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-color:red;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
/* 如果使用 scss 需要使用 /deep/ */
|
||||
.content /deep/ .custom-transition {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-color:red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-transition :styles="styles" mode-class="fade" :duration="0" :show="true" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
styles:{
|
||||
'width':'100px',
|
||||
'height':'100px',
|
||||
'backgroundColor':'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-transition :styles="styles" mode-class="fade" :duration="0" :show="true" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
styles:{
|
||||
'width':'100px',
|
||||
'height':'100px',
|
||||
'backgroundColor':'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-transition.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=transition)
|
||||
- [Local Example](examples/uni-ui/uni-transition.vue)
|
||||
Reference in New Issue
Block a user