Skip to content

unidocs-zh
unidocs-zh

DCloud / unidocs-zh

通知 3216
Star 106
Fork 815
unidocs-zh
unidocs-zh
提交 ce3c6c4a 编写于 作者: 辛宝Otto's avatar 辛宝Otto 🥊
浏览文件
操作

Merge branch 'docs/merge-docs'

上级 3787f359 a2dd025b
隐藏空白更改
内联 并排
Showing with 932 addition and 845 deletion
docs/api/base64ToArrayBuffer.md
浏览文件 @ ce3c6c4a
......@@ -6,7 +6,7 @@
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|x|x|x|√|√|
|√|√|√|x|x|√|√|√|
**参数说明**
......@@ -19,4 +19,4 @@
```javascript
const base64 = 'test'
const arrayBuffer = uni.base64ToArrayBuffer(base64)
```
\ No newline at end of file
```
docs/api/location/location-change.md
浏览文件 @ ce3c6c4a
......@@ -45,7 +45,7 @@ uni.onLocationChange(function (res) {
```
### uni.offLocationChange(FUNCTION CALLBACK)
关闭监听实时位置变化，前后台都停止消息接收。
移除实时地理位置变化事件的监听函数。
**平台差异说明**
......
docs/api/media/image.md
浏览文件 @ ce3c6c4a
......@@ -78,6 +78,7 @@ uni.chooseImage({
|参数名|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|current|String/Number|详见下方说明|详见下方说明||
|showmenu|Boolean|否|是否显示长按菜单，默认值为 true|微信小程序2.13.0|
|urls|Array<String>|是|需要预览的图片链接列表||
|indicator|String|否|图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。|App|
|loop|Boolean|否|是否可循环预览，默认值为 false|App|
......
docs/component/editor.md
浏览文件 @ ce3c6c4a
......@@ -60,6 +60,47 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
| 块级样式 | `text-align` `direction` `margin` `margin-top` `margin-left` `margin-right` `margin-bottom` `padding` `padding-top` `padding-left` `padding-right` `padding-bottom` `line-height` `text-indent` |百度小程序仅支持`text-align、direction`|
| 行内样式 | `font` `font-size` `font-style` `font-variant` `font-weight` `font-family` `letter-spacing` `text-decoration` `color` `background-color` |百度小程序仅支持`color、background-color`|
## H5 使用最佳实践
近期部分用户反馈访问 `unpkg` 失败，导致 `editor` 组件初始化异常。这里提供代码块，方便用户修改。
### 方案一：自行托管 CDN 资源
分别下载[quill.min.js](https://unpkg.com/quill@1.3.7/dist/quill.min.js)、[image-resize.min.js](https://unpkg.com/quill-image-resize-mp@3.0.1/image-resize.min.js)，放入 `static` 目录中。
在 `index.html`(Vue 3)，或者 `public/index.html`(Vue2) 中在 `head` 之间添加 js
```html
<head>
<script src="/static/quill-1.3.7.min.js"></script>
<script src="/static/image-resize-3.0.1.min.js"></script>
</head>
```
这样 `editor` 组件就可以正常使用了，代码逻辑中检测到有相关 `window.Quill` 变量，就不会从远程获取资源。
### 方案二：从 npm 中处理资源
方案一的解决思路是在 `window` 上进行挂载，同样，我们可以在项目入口 `main.js` 或者 `App.vue`中引用相关依赖即可。
在项目中添加相关依赖：
```bash
npm i quill@1.3.7
```
在组件页面或者 `main.ts` 入口逻辑中，使用下面方案，注入依赖：
```js
// #ifdef H5
import quill from "quill";
window.Quill = quill;
// #endif
```
相比方案一，方案二好处是依赖清晰，引用透明。如果你熟悉 `npm` 生态和构建流程，推荐方案二。
## 注意事项
* 插入的 html 中事件绑定会被移除
......
docs/component/input.md
浏览文件 @ ce3c6c4a
......@@ -18,7 +18,7 @@ html规范中input不仅是输入框，还有radio、checkbox、时间、日期
|disabled|Boolean|false|是否禁用||
|maxlength|Number|140|最大输入长度，设置为 -1 的时候不限制最大长度||
|cursor-spacing|Number|0|指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|App、微信小程序、百度小程序、QQ小程序、京东小程序|
|focus|Boolean|false|获取焦点。|在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点|
|focus|Boolean|false|获取焦点。|H5、App需要点击按钮获取焦点的，必须使用@touchend.prevent="onTap"阻止键盘收起默认事件才能获取焦点[关于软键盘弹出的逻辑说明](/component/input.html#关于软键盘弹出的逻辑说明)，小程序、nvue需使用组件的 focus()、blur() 方法控制焦点|
|confirm-type|String|done|设置键盘右下角按钮的文字，仅在 type="text" 时生效。[有效值](#confirm-type)|微信小程序、App、H5、快手小程序、京东小程序|
|confirm-hold|Boolean|false|点击键盘右下角按钮时是否保持键盘不收起|App(3.3.7+)、H5 (3.3.7+)、微信小程序、支付宝小程序、百度小程序、QQ小程序、京东小程序|
|cursor|Number||指定focus时的光标位置||
......
docs/component/picker.md
浏览文件 @ ce3c6c4a
#### picker
从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。
#### 普通选择器
``mode = selector``
**属性说明**
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|range|Array / Array&lt;Object&gt;|[]|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|是否禁用|快手小程序不支持|
|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: value}||
|@cancel|EventHandle||取消选择或点遮罩层收起 picker 时触发|快手小程序不支持|
- picker在各平台的实现是有UI差异的，有的平台如百度、支付宝小程序的Android端是从中间弹出的；有的平台支持循环滚动如百度小程序；有的平台没有取消按钮如App-iOS端。但均不影响功能使用。
#### 多列选择器
``mode = multiSelector``
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|vue支持，nvue自2.4起支持|√|√|x|√|√|√|√|√|
支付宝小程序 picker 组件不支持多列选择，可以使用 picker-view 组件替代。
**属性说明**
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
|range|二维 Array / 二维 Array＜Object＞|[]|mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]|
|range-key|String||当 range 是一个二维 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容|
|value|Array|[]|value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）|
|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: value}|
|@columnchange|EventHandle||某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标|
|@cancel|EventHandle||取消选择时触发（快手小程序不支持）|
|disabled|Boolean|false|是否禁用（快手小程序不支持）|
**bug & tips**
- 由于 JavaScript 的限制 vue 不能观测如下方式设置 value：``this.value[0] = 0`` （[vue 注意事项](/tutorial/vue-basics.md#listrendering)），解决方式参考：[hello-uniapp 示例](https://github.com/dcloudio/hello-uniapp/commit/59264474172a591c865431d02a2a1e3583978827)
- 微信开发工具的pc模拟器有可能出现拖动数据错乱，使用真机正常
#### 时间选择器
``mode = time``
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|x|√|
- 时间选择在App端调用的是os的原生时间选择控件，在不同平台有不同的ui表现
**属性说明**
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|value|String||表示选中的时间，格式为"hh:mm"||
|start|String||表示有效时间范围的开始，字符串格式为"hh:mm"|App 不支持|
|end|String||表示有效时间范围的结束，字符串格式为"hh:mm"|App 不支持|
|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: value}||
|@cancel|EventHandle||取消选择时触发||
|disabled|Boolean|false|是否禁用|&nbsp;|
#### 日期选择器
``mode = date``
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|x|√|
日期选择默认在App端和H5端（PC版Chrome以及PC版FireFox）调用的是os的原生日期选择控件，在不同平台有不同的ui表现，当配置fields参数后使用统一的展示方式。
**属性说明**
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|value|String|0|表示选中的日期，格式为"YYYY-MM-DD"||
|start|String||表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"||
|end|String||表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"||
|fields|String|day|有效值 year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统 UI|H5、App 2.6.3+、微信小程序、百度小程序、抖音小程序、飞书小程序|
|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: value}||
|@cancel|EventHandle||取消选择时触发||
|disabled|Boolean|false|是否禁用|&nbsp;|
**fields 有效值**
|值|说明|
|:-|:-|
|year|选择器粒度为年|
|month|选择器粒度为月份|
|day|选择器粒度为天|
#### 省市区选择器
``mode = region``
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√|√|x|√|
- 小程序平台在引擎层面内置了省市区数据。但省市区包含大量数据，占用体积，并非所有应用都需要，且很多城市数据有自维护需求，所以在App和H5平台没有在前端内置这些数据。可以基于多列picker或picker-view，自行填充城市数据。插件市场有较多类似插件，[详见](https://ext.dcloud.net.cn/search?q=%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9)。注意基于多列picker方式的地区选择不能运行在支付宝小程序上，只有基于picker-view的可以全端运行。尤其推荐插件[uni-data-picker](https://ext.dcloud.net.cn/plugin?id=3796)，自带省市区的联网数据，自带懒加载。
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
|value|Array|[]|表示选中的省市区，默认选中每一列的第一个值|
|custom-item|String||可为每一列的顶部添加一个自定义的项|
|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: value}|
|@cancel|EventHandle||取消选择时触发（快手小程序不支持）|
|disabled|Boolean|false|是否禁用（快手小程序不支持）|
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/picker/picker)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
::: preview https://hellouniapp.dcloud.net.cn/pages/component/picker/picker
> Template
```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>
```
> Script
```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 - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
}
}
</script>
```
:::
示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中
预览H5效果：使用浏览器的手机模式访问[https://hellouniapp.dcloud.net.cn/pages/component/picker/picker](https://hellouniapp.dcloud.net.cn/pages/component/picker/picker)
**注意**
- 在picker内容还在滚动时或滚动回弹动画还未结束时，点确定关闭弹出的picker，数据无法及时更新。需等待一下，或手动触停滚动再点确定。所有平台均如此
**扩展**
- uni ui提供了增强版`<uni-data-picker>`组件，详见：[https://ext.dcloud.net.cn/plugin?id=3796](https://ext.dcloud.net.cn/plugin?id=3796)
- 该组件优势如下：
* 符合[datacom](/component/datacom)规范，只需传入data，就可以自动生成界面
* 符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)，表单校验规范
* 突破多列picker的3列限制，可以承载更多列数据
* 选择区域面积更高更大
* 支持多列数据分级加载，比如省市区选择，先选择省，然后动态联网加载该省的市。
* uniCloud自带了[opendb](https://gitee.com/dcloud/opendb)表，[opendb-city-china](https://gitee.com/dcloud/opendb/tree/master/collection/opendb-city-china)，包括全国的省市区数据。在`<uni-data-picker>`组件上可直接绑定该数据，生成全端可用的、联网懒加载的省市区选择。
* unicloud数据库提供了[DB Schema](https://uniapp.dcloud.io/uniCloud/schema)，还提供了[schema2code](https://doc.dcloud.net.cn/uniCloud/schema?id=autocode)自动生成全套表单页面，包括界面、校验逻辑、提交入库。在schema中配置字段的格式，比如在用户地址表[uni-id-address](https://gitee.com/dcloud/opendb/tree/master/collection/uni-id-address)的字段`area_code`配置值域指向[opendb-city-china](https://gitee.com/dcloud/opendb/tree/master/collection/opendb-city-china)表，即可自动生成该用户地址的生成页面
#### picker
从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。
#### 普通选择器
``mode = selector``
**属性说明**
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|range|Array / Array&lt;Object&gt;|[]|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|是否禁用|快手小程序不支持|
|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: value}||
|@cancel|EventHandle||取消选择或点遮罩层收起 picker 时触发|快手小程序不支持|
- picker在各平台的实现是有UI差异的，有的平台如百度、支付宝小程序的Android端是从中间弹出的；有的平台支持循环滚动如百度小程序；有的平台没有取消按钮如App-iOS端。但均不影响功能使用。
#### 多列选择器
``mode = multiSelector``
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|vue支持，nvue自2.4起支持|√|√|x|√|√|√|√|√|
支付宝小程序 picker 组件不支持多列选择，可以使用 picker-view 组件替代。
**属性说明**
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
|range|二维 Array / 二维 Array＜Object＞|[]|mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]|
|range-key|String||当 range 是一个二维 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容|
|value|Array|[]|value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）|
|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: value}|
|@columnchange|EventHandle||某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标|
|@cancel|EventHandle||取消选择时触发（快手小程序不支持）|
|disabled|Boolean|false|是否禁用（快手小程序不支持）|
**bug & tips**
- 由于 JavaScript 的限制 vue 不能观测如下方式设置 value：``this.value[0] = 0`` （[vue 注意事项](/tutorial/vue-basics.md#listrendering)），解决方式参考：[hello-uniapp 示例](https://github.com/dcloudio/hello-uniapp/commit/59264474172a591c865431d02a2a1e3583978827)
- 微信开发工具的pc模拟器有可能出现拖动数据错乱，使用真机正常
#### 时间选择器
``mode = time``
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|x|√|
- 时间选择在App端调用的是os的原生时间选择控件，在不同平台有不同的ui表现
**属性说明**
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|value|String||表示选中的时间，格式为"hh:mm"||
|start|String||表示有效时间范围的开始，字符串格式为"hh:mm"|App 不支持|
|end|String||表示有效时间范围的结束，字符串格式为"hh:mm"|App 不支持|
|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: value}||
|@cancel|EventHandle||取消选择时触发||
|disabled|Boolean|false|是否禁用|&nbsp;|
#### 日期选择器
``mode = date``
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|x|√|
日期选择默认在App端和H5端（PC版Chrome以及PC版FireFox）调用的是os的原生日期选择控件，在不同平台有不同的ui表现，当配置fields参数后使用统一的展示方式。
**属性说明**
|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|value|String|0|表示选中的日期，格式为"YYYY-MM-DD"||
|start|String||表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"||
|end|String||表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"||
|fields|String|day|有效值 year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统 UI|H5、App 2.6.3+、微信小程序、支付宝小程序、百度小程序、抖音小程序、飞书小程序|
|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: value}||
|@cancel|EventHandle||取消选择时触发||
|disabled|Boolean|false|是否禁用|&nbsp;|
**fields 有效值**
|值|说明|
|:-|:-|
|year|选择器粒度为年|
|month|选择器粒度为月份|
|day|选择器粒度为天|
#### 省市区选择器
``mode = region``
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|√|√|√|x|√|
- 小程序平台在引擎层面内置了省市区数据。但省市区包含大量数据，占用体积，并非所有应用都需要，且很多城市数据有自维护需求，所以在App和H5平台没有在前端内置这些数据。可以基于多列picker或picker-view，自行填充城市数据。插件市场有较多类似插件，[详见](https://ext.dcloud.net.cn/search?q=%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9)。注意基于多列picker方式的地区选择不能运行在支付宝小程序上，只有基于picker-view的可以全端运行。尤其推荐插件[uni-data-picker](https://ext.dcloud.net.cn/plugin?id=3796)，自带省市区的联网数据，自带懒加载。
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
|value|Array|[]|表示选中的省市区，默认选中每一列的第一个值|
|custom-item|String||可为每一列的顶部添加一个自定义的项|
|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: value}|
|@cancel|EventHandle||取消选择时触发（快手小程序不支持）|
|disabled|Boolean|false|是否禁用（快手小程序不支持）|
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/picker/picker)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
::: preview https://hellouniapp.dcloud.net.cn/pages/component/picker/picker
> Template
```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>
```
> Script
```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 - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
}
}
</script>
```
:::
示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中
预览H5效果：使用浏览器的手机模式访问[https://hellouniapp.dcloud.net.cn/pages/component/picker/picker](https://hellouniapp.dcloud.net.cn/pages/component/picker/picker)
**注意**
- 在picker内容还在滚动时或滚动回弹动画还未结束时，点确定关闭弹出的picker，数据无法及时更新。需等待一下，或手动触停滚动再点确定。所有平台均如此
**扩展**
- uni ui提供了增强版`<uni-data-picker>`组件，详见：[https://ext.dcloud.net.cn/plugin?id=3796](https://ext.dcloud.net.cn/plugin?id=3796)
- 该组件优势如下：
* 符合[datacom](/component/datacom)规范，只需传入data，就可以自动生成界面
* 符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)，表单校验规范
* 突破多列picker的3列限制，可以承载更多列数据
* 选择区域面积更高更大
* 支持多列数据分级加载，比如省市区选择，先选择省，然后动态联网加载该省的市。
* uniCloud自带了[opendb](https://gitee.com/dcloud/opendb)表，[opendb-city-china](https://gitee.com/dcloud/opendb/tree/master/collection/opendb-city-china)，包括全国的省市区数据。在`<uni-data-picker>`组件上可直接绑定该数据，生成全端可用的、联网懒加载的省市区选择。
* unicloud数据库提供了[DB Schema](https://uniapp.dcloud.io/uniCloud/schema)，还提供了[schema2code](https://doc.dcloud.net.cn/uniCloud/schema?id=autocode)自动生成全套表单页面，包括界面、校验逻辑、提交入库。在schema中配置字段的格式，比如在用户地址表[uni-id-address](https://gitee.com/dcloud/opendb/tree/master/collection/uni-id-address)的字段`area_code`配置值域指向[opendb-city-china](https://gitee.com/dcloud/opendb/tree/master/collection/opendb-city-china)表，即可自动生成该用户地址的生成页面
docs/component/uniui/uni-easyinput.md
浏览文件 @ ce3c6c4a
::: tip 组件名：uni-easyinput
> 代码块： `uEasyinput`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-easyinput)
:::
easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能
## 介绍
### 基本用法
输入内容后，输入框尾部会显示清除按钮，点击可清除内容，如不需要展示图标，`clearable` 属性设置为 `false` 即可
`clearable` 属性设置为 `true` ，输入框聚焦且内容不为空时，才会显示内容
```html
<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 输入框带左右图标
设置 `prefixIcon` 属性来显示输入框的头部图标
设置 `suffixIcon` 属性来显示输入框的尾部图标
注意图标当前只支持 `uni-icons` 内置的图标，当配置 `suffixIcon` 属性后，会覆盖 `:clearable="true"` 和 `type="password"` 时的原有图标
绑定 `@iconClick` 事件可以触发图标的点击 ，返回 `prefix` 表示点击左侧图标，返回 `suffix` 表示点击右侧图标
```html
<!-- 输入框头部图标 -->
<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
<!-- 展示输入框尾部图标 -->
<uni-easyinput suffixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
```
### 输入框禁用
设置 `disable` 属性可以禁用输入框，此时输入框不可编辑
```html
<uni-easyinput disabled v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 密码框
设置 `type="password"` 时，输入框内容将会不可见，由实心点代替，同时输入框尾部会显示眼睛图标，点击可切换内容显示状态
```html
<uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
```
### 输入框聚焦
设置 `focus` 属性可以使输入框聚焦
如果页面存在多个设置 `focus` 属性的输入框，只有最后一个输入框的 `focus` 属性会生效
```html
<uni-easyinput focus v-model="password" placeholder="请输入内容"></uni-easyinput>
```
### 多行文本
设置 `type="textarea"` 时可输入多行文本
```html
<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 多行文本自动高度
设置 `type="textarea"` 时且设置 `autoHeight` 属性，可使用多行文本的自动高度，会跟随内容调整输入框的显示高度
```html
<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 取消边框
设置 `:inputBorder="false"` 时可取消输入框的边框显示，同时搭配 `uni-forms` 的 `:border="true"` 有较好的效果
```html
<uni-forms border>
<uni-forms-item label="姓名">
<uni-easyinput :inputBorder="false" placeholder="请输入姓名"></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="年龄">
<uni-easyinput :inputBorder="false" placeholder="请输入年龄"></uni-easyinput>
</uni-forms-item>
</uni-forms>
```
## API
### Easyinput Props
|属性名| 类型| 可选值|默认值|说明|
|:-:|:-:|:-:|:-:|:-:|
|value|String/ Number|-|-|输入内容|
|type|String|见 type Options|text|输入框的类型（默认text）|
|clearable|Boolean|-|true| 是否显示右侧清空内容的图标控件(输入框有内容且不禁用时显示)，点击可清空输入框内容|
|autoHeight|Boolean|-|false| 是否自动增高输入区域，type为textarea时有效|
|placeholder|String |-| - | 输入框的提示文字|
|placeholderStyle|String| - | - | placeholder的样式(内联样式，字符串)，如"color: #ddd"|
|focus|Boolean|-|false|是否自动获得焦点|
|disabled|Boolean|-|false|是否不可输入|
|maxlength|Number|-|140|最大输入长度，设置为 -1 的时候不限制最大长度|
|confirmType|String|-|done|设置键盘右下角按钮的文字，仅在type="text"时生效|
|clearSize|Number|-|24|清除图标的大小，单位px|
|prefixIcon|String|-|-|输入框头部图标 |
|suffixIcon|String|-|-|输入框尾部图标|
|trim|Boolean/String|见 trim Options | false | 是否自动去除空格，传入类型为 Boolean 时，自动去除前后空格|
|inputBorder|Boolean|-|true|是否显示input输入框的边框|
|styles|Object|-|-| 样式自定义|
|passwordIcon|Boolean|-| true | type=password 时，是否显示小眼睛图标|
|cursorSpacing|Number|-| 0 | 指定光标与键盘的距离，单位 px 。取 textarea/input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离。详见[textarea](https://uniapp.dcloud.net.cn/component/textarea.html)/[input](https://uniapp.dcloud.net.cn/component/input.html)|
#### Type Options
|属性名| 说明|
|:-:| :-:|
|text|文本输入键盘|
|textarea|多行文本输入键盘|
|password|密码输入键盘|
|number|数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式 |
|idcard|身份证输入键盘，仅支持微信、支付宝、百度、QQ小程序|
|digit|带小数点的数字键盘，均支持，App平台、H5平台 vue 页面在 iOS 平台显示的键盘包含负数（原生键盘不支持负号） |
#### ConfirmType Options
平台差异与 [input](https://uniapp.dcloud.io/component/input) 相同
|属性名| 说明|
|:-:| :-:|
|send|右下角按钮为“发送”|
|search |右下角按钮为“搜索”|
|next|右下角按钮为“下一个”|
|go|右下角按钮为“前往” |
|done|右下角按钮为“完成”|
#### Styles Options
|属性名| 默认值 |说明|
|:-:| :-:| :-:|
|color| #333|输入文字颜色|
|disableColor|#eee| 输入框禁用背景色|
|borderColor|#e5e5e5 | 边框颜色|
#### Trim Options
传入类型为 `Boolean` 时，自动去除前后空格,传入类型为 `String` 时，可以单独控制，下面是可选值
|属性名|说明|
|:-:| :-:|
|both|去除两端空格|
|left|去除左侧空格|
|right|去除右侧空格|
|all|去除所有空格|
|none|不去除空格|
### Easyinput Events
|事件称名| 说明|返回值|兼容说明|
|:-:| :-:|:-:|:-:|
|@input|输入框内容发生变化时触发| -||
|@clear|点击右侧叉号图标时触发| -|1.1.0新增|
|@focus|输入框获得焦点时触发| -||
|@blur|输入框失去焦点时触发| -||
|@confirm|点击完成按钮时触发| -||
|@iconClick |点击图标时触发| prefix/suffix ||
|@change|仅在输入框失去焦点或用户按下回车时触发||1.1.0新增|
|@keyboardheightchange|键盘高度发生变化时触发||1.1.6新增|
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-easyinput) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput
> Template
``` html
<template>
<view>
<uni-card :is-shadow="false" is-full>
<text class="uni-h6">easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件 uni-forms 而设计的，easyinput 内置了边框，图标等，同时包含 input所有功能</text>
</uni-card>
<uni-section title="默认" subTitle="使用 focus 属性自动获取输入框焦点" type="line" padding>
<uni-easyinput errorMessage v-model="value" focus placeholder="请输入内容" @input="input"></uni-easyinput>
</uni-section>
<uni-section title="去除空格" subTitle="使用 trim 属性 ,可以控制返回内容的空格 " type="line" padding>
<text class="uni-subtitle">输入内容：{{ '"'+value+'"' }}</text>
<uni-easyinput class="uni-mt-5" trim="all" v-model="value" placeholder="请输入内容" @input="input"></uni-easyinput>
</uni-section>
<uni-section title="自定义样式" subTitle="使用 styles 属性 ,可以自定义输入框样式" type="line" padding>
<uni-easyinput v-model="value" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入内容"@input="input"></uni-easyinput>
</uni-section>
<uni-section title="图标" subTitle="使用 prefixIcon / suffixIcon 属性 ,可以自定义输入框左右侧图标" type="line" padding>
<uni-easyinput prefixIcon="search" v-model="value" placeholder="左侧图标" @iconClick="iconClick">
</uni-easyinput>
<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="value" placeholder="右侧图标" @iconClick="iconClick"></uni-easyinput>
</uni-section>
<uni-section title="禁用" subTitle="使用 disabled 属性禁用输入框" type="line" padding>
<uni-easyinput disabled value="已禁用" placeholder="请输入内容"></uni-easyinput>
</uni-section>
<uni-section title="密码框" subTitle="指定属性 type=password 使用密码框,右侧会显示眼睛图标" type="line" padding>
<uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
</uni-section>
<uni-section title="多行文本" subTitle="指定属性 type=textarea 使用多行文本框" type="line" padding>
<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
</uni-section>
<uni-section title="多行文本自动高度" subTitle="使用属性 autoHeight 使多行文本框自动增高" type="line" padding>
<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
</uni-section>
</view>
</template>
```
> Script
``` html
<script>
export default {
data() {
return {
value: '',
password: '',
placeholderStyle: "color:#2979FF;font-size:14px",
styles: {
color: '#2979FF',
borderColor: '#2979FF'
}
}
},
onLoad() {},
onReady() {},
methods: {
input(e) {
console.log('输入内容：', e);
},
iconClick(type) {
uni.showToast({
title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
icon: 'none'
})
}
}
}
</script>
```
> Ｓtyle
``` html
<style lang="scss">
.uni-mt-5 {
margin-top: 5px;
}
</style>
```
:::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput)
::: tip 组件名：uni-easyinput
> 代码块： `uEasyinput`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-easyinput)
:::
easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能
## 介绍
### 基本用法
输入内容后，输入框尾部会显示清除按钮，点击可清除内容，如不需要展示图标，`clearable` 属性设置为 `false` 即可
`clearable` 属性设置为 `true` ，输入框聚焦且内容不为空时，才会显示内容
```html
<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 输入框带左右图标
设置 `prefixIcon` 属性来显示输入框的头部图标
设置 `suffixIcon` 属性来显示输入框的尾部图标
注意图标当前只支持 `uni-icons` 内置的图标，当配置 `suffixIcon` 属性后，会覆盖 `:clearable="true"` 和 `type="password"` 时的原有图标
绑定 `@iconClick` 事件可以触发图标的点击 ，返回 `prefix` 表示点击左侧图标，返回 `suffix` 表示点击右侧图标
```html
<!-- 输入框头部图标 -->
<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
<!-- 展示输入框尾部图标 -->
<uni-easyinput suffixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
```
### 插槽
设置 `right` 属性来设置右侧内容 插槽。
```html
<uni-easyinput>
<template #right>
<view>密码</view>
</template>
</uni-easyinput>
```
### 输入框禁用
设置 `disable` 属性可以禁用输入框，此时输入框不可编辑
```html
<uni-easyinput disabled v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 密码框
设置 `type="password"` 时，输入框内容将会不可见，由实心点代替，同时输入框尾部会显示眼睛图标，点击可切换内容显示状态
```html
<uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
```
### 输入框聚焦
设置 `focus` 属性可以使输入框聚焦
如果页面存在多个设置 `focus` 属性的输入框，只有最后一个输入框的 `focus` 属性会生效
```html
<uni-easyinput focus v-model="password" placeholder="请输入内容"></uni-easyinput>
```
### 多行文本
设置 `type="textarea"` 时可输入多行文本
```html
<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 多行文本自动高度
设置 `type="textarea"` 时且设置 `autoHeight` 属性，可使用多行文本的自动高度，会跟随内容调整输入框的显示高度
```html
<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 取消边框
设置 `:inputBorder="false"` 时可取消输入框的边框显示，同时搭配 `uni-forms` 的 `:border="true"` 有较好的效果
```html
<uni-forms border>
<uni-forms-item label="姓名">
<uni-easyinput :inputBorder="false" placeholder="请输入姓名"></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="年龄">
<uni-easyinput :inputBorder="false" placeholder="请输入年龄"></uni-easyinput>
</uni-forms-item>
</uni-forms>
```
## API
### Easyinput Props
|属性名| 类型| 可选值|默认值|说明|
|:-:|:-:|:-:|:-:|:-:|
|value|String/ Number|-|-|输入内容|
|type|String|见 type Options|text|输入框的类型（默认text）|
|clearable|Boolean|-|true| 是否显示右侧清空内容的图标控件(输入框有内容且不禁用时显示)，点击可清空输入框内容|
|autoHeight|Boolean|-|false| 是否自动增高输入区域，type为textarea时有效|
|placeholder|String |-| - | 输入框的提示文字|
|placeholderStyle|String| - | - | placeholder的样式(内联样式，字符串)，如"color: #ddd"|
|focus|Boolean|-|false|是否自动获得焦点|
|disabled|Boolean|-|false|是否不可输入|
|maxlength|Number|-|140|最大输入长度，设置为 -1 的时候不限制最大长度|
|confirmType|String|-|done|设置键盘右下角按钮的文字，仅在type="text"时生效|
|clearSize|Number|-|24|清除图标的大小，单位px|
|prefixIcon|String|-|-|输入框头部图标 |
|suffixIcon|String|-|-|输入框尾部图标|
|trim|Boolean/String|见 trim Options | false | 是否自动去除空格，传入类型为 Boolean 时，自动去除前后空格|
|inputBorder|Boolean|-|true|是否显示input输入框的边框|
|styles|Object|-|-| 样式自定义|
|passwordIcon|Boolean|-| true | type=password 时，是否显示小眼睛图标|
|primaryColor|String|-| #2979ff | 设置清除按钮focus时的颜色
|cursorSpacing|Number|-| 0 | 指定光标与键盘的距离，单位 px 。取 textarea/input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离。详见[textarea](https://uniapp.dcloud.net.cn/component/textarea.html)/[input](https://uniapp.dcloud.net.cn/component/input.html)|
#### Type Options
|属性名| 说明|
|:-:| :-:|
|text|文本输入键盘|
|textarea|多行文本输入键盘|
|password|密码输入键盘|
|number|数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式 |
|idcard|身份证输入键盘，仅支持微信、支付宝、百度、QQ小程序|
|digit|带小数点的数字键盘，均支持，App平台、H5平台 vue 页面在 iOS 平台显示的键盘包含负数（原生键盘不支持负号） |
#### ConfirmType Options
平台差异与 [input](https://uniapp.dcloud.io/component/input) 相同
|属性名| 说明|
|:-:| :-:|
|send|右下角按钮为“发送”|
|search |右下角按钮为“搜索”|
|next|右下角按钮为“下一个”|
|go|右下角按钮为“前往” |
|done|右下角按钮为“完成”|
#### Styles Options
|属性名| 默认值 |说明|
|:-:| :-:| :-:|
|color| #333|输入文字颜色|
|disableColor|#eee| 输入框禁用背景色|
|borderColor|#e5e5e5 | 边框颜色|
#### Trim Options
传入类型为 `Boolean` 时，自动去除前后空格,传入类型为 `String` 时，可以单独控制，下面是可选值
|属性名|说明|
|:-:| :-:|
|both|去除两端空格|
|left|去除左侧空格|
|right|去除右侧空格|
|all|去除所有空格|
|none|不去除空格|
### Easyinput Events
|事件称名| 说明|返回值|兼容说明|
|:-:| :-:|:-:|:-:|
|@input|输入框内容发生变化时触发| -||
|@clear|点击右侧叉号图标时触发| -|1.1.0新增|
|@focus|输入框获得焦点时触发| -||
|@blur|输入框失去焦点时触发| -||
|@confirm|点击完成按钮时触发| -||
|@iconClick |点击图标时触发| prefix/suffix ||
|@change|仅在输入框失去焦点或用户按下回车时触发||1.1.0新增|
|@keyboardheightchange|键盘高度发生变化时触发||1.1.6新增|
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-easyinput) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput
> Template
``` html
<template>
<view>
<uni-card :is-shadow="false" is-full>
<text class="uni-h6">easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件 uni-forms 而设计的，easyinput 内置了边框，图标等，同时包含 input所有功能</text>
</uni-card>
<uni-section title="默认" subTitle="使用 focus 属性自动获取输入框焦点" type="line" padding>
<uni-easyinput errorMessage v-model="value" focus placeholder="请输入内容" @input="input"></uni-easyinput>
</uni-section>
<uni-section title="去除空格" subTitle="使用 trim 属性 ,可以控制返回内容的空格 " type="line" padding>
<text class="uni-subtitle">输入内容：{{ '"'+value+'"' }}</text>
<uni-easyinput class="uni-mt-5" trim="all" v-model="value" placeholder="请输入内容" @input="input"></uni-easyinput>
</uni-section>
<uni-section title="自定义样式" subTitle="使用 styles 属性 ,可以自定义输入框样式" type="line" padding>
<uni-easyinput v-model="value" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入内容"@input="input"></uni-easyinput>
</uni-section>
<uni-section title="图标" subTitle="使用 prefixIcon / suffixIcon 属性 ,可以自定义输入框左右侧图标" type="line" padding>
<uni-easyinput prefixIcon="search" v-model="value" placeholder="左侧图标" @iconClick="iconClick">
</uni-easyinput>
<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="value" placeholder="右侧图标" @iconClick="iconClick"></uni-easyinput>
</uni-section>
<uni-section title="禁用" subTitle="使用 disabled 属性禁用输入框" type="line" padding>
<uni-easyinput disabled value="已禁用" placeholder="请输入内容"></uni-easyinput>
</uni-section>
<uni-section title="密码框" subTitle="指定属性 type=password 使用密码框,右侧会显示眼睛图标" type="line" padding>
<uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
</uni-section>
<uni-section title="多行文本" subTitle="指定属性 type=textarea 使用多行文本框" type="line" padding>
<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
</uni-section>
<uni-section title="多行文本自动高度" subTitle="使用属性 autoHeight 使多行文本框自动增高" type="line" padding>
<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
</uni-section>
</view>
</template>
```
> Script
``` html
<script>
export default {
data() {
return {
value: '',
password: '',
placeholderStyle: "color:#2979FF;font-size:14px",
styles: {
color: '#2979FF',
borderColor: '#2979FF'
}
}
},
onLoad() {},
onReady() {},
methods: {
input(e) {
console.log('输入内容：', e);
},
iconClick(type) {
uni.showToast({
title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
icon: 'none'
})
}
}
}
</script>
```
> Ｓtyle
``` html
<style lang="scss">
.uni-mt-5 {
margin-top: 5px;
}
</style>
```
:::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput)
docs/component/uniui/uni-forms.md
浏览文件 @ ce3c6c4a
::: tip 组件名：uni-forms
> 代码块： `uForms`、`uni-forms-item`
> 关联组件：`uni-forms-item`、`uni-easyinput`、`uni-data-checkbox`、`uni-group`。
......@@ -113,7 +112,7 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
::: warning 注意
- uni-forms 1.4.0 版本后，binddata 方法不在推荐，请使用 uni-forms-item 上的 onFieldChange 方法代替
- uni-forms 1.4.0 版本后，binddata 方法不再推荐，请使用 uni-forms-item 上的 onFieldChange 方法代替
:::
**完整示例**
......
docs/component/uniui/uni-list.md
浏览文件 @ ce3c6c4a
......@@ -88,7 +88,7 @@ uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-l
```
### 开启点击反馈和右侧箭头
- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件，`click` 事件也在此绑定
- 设置 `link` 属性，会自动开启点击反馈，并给列表右侧添加一个箭头
- 设置 `to` 属性，可以跳转页面，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`
......
docs/component/uniui/uni-transition.md
浏览文件 @ ce3c6c4a
::: tip 组件名：uni-transition
> 代码块： `uTransition`
......@@ -134,12 +133,12 @@ export default {
},
methods: {
run() {
// 同时右平移到 100px,旋转 360 读
// 同时右平移到 100px,旋转 360 度
this.$refs.ani.step({
translateX: '100px',
rotate: '360'
})
// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 度
this.$refs.ani.step({
translateX: '0px',
rotate: '0'
......@@ -394,173 +393,173 @@ this.$refs.ani.step({
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition
> Template
``` 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">
<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
:show="show"><text class="text">示例元素</text></uni-transition>
</view>
</uni-section>
<uni-section title="操作" subTitle="点击按钮 ,切换动画效果" type="line">
<view class="example-body">
<button class="transition-button" type="primary" @click="handle('fade')">淡隐淡出</button>
<button class="transition-button" type="primary" @click="handle(['fade', 'slide-top'])">由上至下</button>
<button class="transition-button" type="primary" @click="handle(['fade', 'slide-right'])">由右至左过</button>
<button class="transition-button" type="primary" @click="handle(['fade', 'zoom-in'])">由小到大过</button>
<button class="transition-button" type="primary" @click="custom">自定义动画</button>
</view>
</uni-section>
</view>
</template>
<template>
<view>
<uni-card is-full :is-shadow="false">
<text class="uni-h6">过渡动画，通常用于元素的过渡效果，例如淡隐淡出效果，遮罩层的效果、放大缩小的效果等</text>
</uni-card>
<uni-section title="示例" type="line">
<view class="example">
<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
:show="show"><text class="text">示例元素</text></uni-transition>
</view>
</uni-section>
<uni-section title="操作" subTitle="点击按钮 ,切换动画效果" type="line">
<view class="example-body">
<button class="transition-button" type="primary" @click="handle('fade')">淡隐淡出</button>
<button class="transition-button" type="primary" @click="handle(['fade', 'slide-top'])">由上至下</button>
<button class="transition-button" type="primary" @click="handle(['fade', 'slide-right'])">由右至左过</button>
<button class="transition-button" type="primary" @click="handle(['fade', 'zoom-in'])">由小到大过</button>
<button class="transition-button" type="primary" @click="custom">自定义动画</button>
</view>
</uni-section>
</view>
</template>
```
> Script
```html
<script>
export default {
components: {},
data() {
return {
show: true,
modeClass: 'fade',
styles: {}
}
},
onLoad() {
// #ifdef APP-NVUE
this.styles = {
justifyContent: 'center',
alignItems: 'center',
width: '100px',
height: '100px',
borderRadius: '5px',
textAlign: 'center',
backgroundColor: '#4cd964',
boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)'
}
// #endif
},
methods: {
handle(type) {
this.show = !this.show
this.modeClass = type
},
custom() {
// TODO 下面修改宽高在百度下还有些问题待修复
// this.$refs.ani.step({
// width: '200px'
// })
// this.$refs.ani.step({
// height: '150px'
// },{
// delay:100,
// duration:200
// })
this.$refs.ani.step({
width: '100px',
height: '100px',
rotate: '180'
}, {
delay: 200,
duration: 300
})
this.$refs.ani.step({
width: '100px',
height: '100px',
rotate: '0'
}, {
transformOrigin: '50% 50%'
})
this.$refs.ani.step({
translateX: '-100px'
}, {
timingFunction: 'ease-in',
duration: 100
})
this.$refs.ani.step({
translateX: '100px'
}, {
timingFunction: 'ease',
duration: 300
})
this.$refs.ani.step({
translateX: '50px',
scale: 1.5
}, {
timingFunction: 'linear',
duration: 100
})
this.$refs.ani.step({
translateX: '0px',
scale: 1
}, {
timingFunction: 'linear',
duration: 150
})
this.$refs.ani.run()
}
}
}
</script>
```html
<script>
export default {
components: {},
data() {
return {
show: true,
modeClass: 'fade',
styles: {}
}
},
onLoad() {
// #ifdef APP-NVUE
this.styles = {
justifyContent: 'center',
alignItems: 'center',
width: '100px',
height: '100px',
borderRadius: '5px',
textAlign: 'center',
backgroundColor: '#4cd964',
boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)'
}
// #endif
},
methods: {
handle(type) {
this.show = !this.show
this.modeClass = type
},
custom() {
// TODO 下面修改宽高在百度下还有些问题待修复
// this.$refs.ani.step({
// width: '200px'
// })
// this.$refs.ani.step({
// height: '150px'
// },{
// delay:100,
// duration:200
// })
this.$refs.ani.step({
width: '100px',
height: '100px',
rotate: '180'
}, {
delay: 200,
duration: 300
})
this.$refs.ani.step({
width: '100px',
height: '100px',
rotate: '0'
}, {
transformOrigin: '50% 50%'
})
this.$refs.ani.step({
translateX: '-100px'
}, {
timingFunction: 'ease-in',
duration: 100
})
this.$refs.ani.step({
translateX: '100px'
}, {
timingFunction: 'ease',
duration: 300
})
this.$refs.ani.step({
translateX: '50px',
scale: 1.5
}, {
timingFunction: 'linear',
duration: 100
})
this.$refs.ani.step({
translateX: '0px',
scale: 1
}, {
timingFunction: 'linear',
duration: 150
})
this.$refs.ani.run()
}
}
}
</script>
```
> Style
```html
<style lang="scss">
.example {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
height: 150px;
background-color: #fff;
}
.example-body {
padding: 10px 20px;
padding-bottom: 0px;
}
.transition-button {
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
flex: 1;
margin-bottom: 10px;
}
/* #ifndef APP-NVUE */
.example ::v-deep .transition {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border-radius: 5px;
text-align: center;
background-color: #4cd964;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
}
/* #endif */
.text {
font-size: 14px;
color: #fff;
}
```html
<style lang="scss">
.example {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
height: 150px;
background-color: #fff;
}
.example-body {
padding: 10px 20px;
padding-bottom: 0px;
}
.transition-button {
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
flex: 1;
margin-bottom: 10px;
}
/* #ifndef APP-NVUE */
.example ::v-deep .transition {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border-radius: 5px;
text-align: center;
background-color: #4cd964;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
}
/* #endif */
.text {
font-size: 14px;
color: #fff;
}
</style>
```
:::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition)
\ No newline at end of file
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition)
docs/component/waterfall.md
浏览文件 @ ce3c6c4a
......@@ -64,3 +64,38 @@ app端nvue专用组件。
**注意**
- waterfall是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
- 如出现waterfall列表下边大面积空白区域（多列和单列时的整体高度相同，多列展示没有高度自适应），那么可以将waterfall放到父容器下边，给父容器高度设置为窗口高度，除瀑布流展示的列表外，其他的组件都放在<header>中即可。
示例代码如下：
```html
<template>
<waterfall column-count="2" column-width="auto" :style="{ height: windowHeight + 'px' }">
<header>
<!--轮播-->
<swiper class="swiper_banner">
......
</swiper>
<!--广告位-->
<view class="ads_List_box">
......
</view>
</header>
<!--瀑布流展示的商品列表-->
<cell v-for="num in lists" >
<text>{{num}}</text>
</cell>
</waterfall>
</template>
<script>
export default {
data () {
return {
lists: ['A', 'B', 'C', 'D', 'E'],
windowHeight: uni.getSystemInfoSync().windowHeight
}
}
}
</script>
<style></style>
```
<img src="https://ask.dcloud.net.cn/uploads/answer/20231103/7eca97560500b11a95f2014fdaea1281.png" />
docs/tutorial/app-payment-stripe.md
浏览文件 @ ce3c6c4a
### 开通
- [登录Stripe](https://dashboard.stripe.com/login)注册账号
* 注册账号后可获取开发测试的API密钥（公钥、私钥），注意：需[激活账户](https://dashboard.stripe.com/account/onboarding)获取正式的API密钥
* 设置[支付方式](https://dashboard.stripe.com/settings/payment_methods)
更多信息详见[申请开通Stripe操作指南](https://uniapp.dcloud.io/app-payment-stripe-open)
**注意**
- iOS系统仅支持iOS13.0及以上版本
### 配置
在manifest.json文件“App模块配置”项的“Payment(支付)”下，勾选“paypal支付”项并配置相关参数
![](https://native-res.dcloud.net.cn/images/uniapp/payment/stripe_setup_manifest_info.png)
**参数说明**
- returnURL
格式为"your-app://stripe"(示例 io.dcloud.test://stripe)，'your-app'为应用的scheme，参考:[配置一个自定义页面内跳转协议 (URL Scheme)](https://ask.dcloud.net.cn/article/64)
### 服务器生成订单
在 App 端调用支付前，需在业务服务器生成[PaymentIntent](https://stripe.com/docs/api/payment_intents)，详情可参考Stripe官方文档：[Add an endpoint](https://stripe.com/docs/payments/accept-a-payment?platform=android&ui=payment-sheet#add-server-endpoint)
激活账户前可通过POST请求Stripe官方沙盒服务器[https://stripe.com/docs/payments/accept-a-payment](https://stripe.com/docs/payments/accept-a-payment)，生成测试PaymentIntent，示例如下：
``` js
uni.request({
url: 'https://stripe-mobile-payment-sheet.glitch.me/checkout',//仅为示例
method: "POST",
success:(res) => {
console.log("订单信息" + res.data);
var publishKey = res.data.publishableKey;
var paymentIntent = res.data.paymentIntent;
var customer = res.data.customer;
### 开通
- [登录Stripe](https://dashboard.stripe.com/login)注册账号
* 注册账号后可获取开发测试的API密钥（公钥、私钥），注意：需[激活账户](https://dashboard.stripe.com/account/onboarding)获取正式的API密钥
* 设置[支付方式](https://dashboard.stripe.com/settings/payment_methods)
更多信息详见[申请开通Stripe操作指南](https://uniapp.dcloud.io/app-payment-stripe-open)
**注意**
- iOS系统仅支持iOS13.0及以上版本
### 配置
在manifest.json文件“App模块配置”项的“Payment(支付)”下，勾选“paypal支付”项并配置相关参数
![](https://native-res.dcloud.net.cn/images/uniapp/payment/stripe_setup_manifest_info.png)
**参数说明**
- returnURL
格式为"your-app://stripe"(示例 io.dcloud.test://stripe)，'your-app'为应用的scheme，参考:[配置一个自定义页面内跳转协议 (URL Scheme)](https://ask.dcloud.net.cn/article/64)
### 服务器生成订单
在 App 端调用支付前，需在业务服务器生成[PaymentIntent](https://stripe.com/docs/api/payment_intents)，详情可参考Stripe官方文档：[Add an endpoint](https://stripe.com/docs/payments/accept-a-payment?platform=android&ui=payment-sheet#add-server-endpoint)
激活账户前可通过POST请求Stripe官方沙盒服务器[https://stripe.com/docs/payments/accept-a-payment](https://stripe.com/docs/payments/accept-a-payment)，生成测试PaymentIntent，示例如下：
``` js
uni.request({
url: 'https://stripe-mobile-payment-sheet.glitch.me/checkout',//仅为示例
method: "POST",
success:(res) => {
console.log("订单信息" + res.data);
var publishKey = res.data.publishableKey;
var paymentIntent = res.data.paymentIntent;
var customer = res.data.customer;
var ephemeralKey = res.data.ephemeralKey;
var billingDetails = res.data.billingDetails,
}
});
```
### 应用内发起支付
- uni-app项目
调用 [uni.requestPayment(OBJECT)](https://uniapp.dcloud.io/api/plugins/payment?id=requestpayment) 发起支付，OBJECT参数中provider属性值固定为`stripe`、orderInfo属性值为订单对象
- 5+ App项目
调用 [plus.payment.request(channel, orderInfo, successCB, errorCB)](https://www.html5plus.org/doc/zh_cn/payment.html#plus.payment.request) 发起支付, channel参数为stripe支付对象，orderInfo参数为订单对象
#### 订单对象参数说明
Object对象类型
| 属性 | 类型 | 必填 | 说明 |
| :--- | :--- | :--- | :--- |
| customer | String | 否 | Stripe的[Customer](https://stripe.com/docs/api/customers)对象，如为同一用户执行定期重复性收款，并跟踪多笔收款 |
| ephemeralKey | String | 否 | Stripe的Customer Ephemeral Key，用于临时访问Customer |
| isAllowDelay | String | 否 | 是否支持延迟支付,默认不支持(将 isAllowDelay 设置为 true 后可使用一些较慢的支付方式，例如 SEPA 借记和 Sofort 对于这些支付方式，只有当 PaymentSheet 完成后才能知道最终的付款状态是成功还是失败。如果您允许这样，则通知客户您已确认他们的订单，但收到付款后才能履行（例如，发货）订单。) |
| merchantName | String | 是 | 商户名称 |
| paymentIntent | String | 是 | Stripe的[PaymentIntent](https://stripe.com/docs/api/payment_intents)对象，对应服务器生成的支付订单 |
var billingDetails = res.data.billingDetails,
}
});
```
### 应用内发起支付
- uni-app项目
调用 [uni.requestPayment(OBJECT)](https://uniapp.dcloud.io/api/plugins/payment?id=requestpayment) 发起支付，OBJECT参数中provider属性值固定为`stripe`、orderInfo属性值为订单对象
- 5+ App项目
调用 [plus.payment.request(channel, orderInfo, successCB, errorCB)](https://www.html5plus.org/doc/zh_cn/payment.html#plus.payment.request) 发起支付, channel参数为stripe支付对象，orderInfo参数为订单对象
#### 订单对象参数说明
Object对象类型
| 属性 | 类型 | 必填 | 说明 |
| :--- | :--- | :--- | :--- |
| customer | String | 否 | Stripe的[Customer](https://stripe.com/docs/api/customers)对象，如为同一用户执行定期重复性收款，并跟踪多笔收款 |
| ephemeralKey | String | 否 | Stripe的Customer Ephemeral Key，用于临时访问Customer |
| isAllowDelay | String | 否 | 是否支持延迟支付,默认不支持(将 isAllowDelay 设置为 true 后可使用一些较慢的支付方式，例如 SEPA 借记和 Sofort 对于这些支付方式，只有当 PaymentSheet 完成后才能知道最终的付款状态是成功还是失败。如果您允许这样，则通知客户您已确认他们的订单，但收到付款后才能履行（例如，发货）订单。) |
| merchantName | String | 是 | 商户名称 |
| paymentIntent | String | 是 | 对应Stripe中[PaymentIntent](https://stripe.com/docs/api/payment_intents)对象的client_secret，对应服务器生成的支付订单 |
| publishKey | String | 是 | 公钥，在Stripe注册账号后可获取 |
| billingDetails | Object | 否 | 银行卡账单信息(包含姓名、手机号码、邮箱地址、账单地址等)|
> 注意：customer与ephemeralKey必须成对出现，只传其一无效
#### 示例代码
- uni-app项目
``` js
//订单对象
var orderInfo = {
"customer": "Stripe的Customer", //Customer
"ephemeralKey": "Stripe的Customer Ephemeral Key", //临时访问Customer的Key
"isAllowDelay": true, //是否支持延迟支付 默认false
"merchantName": "DCloud", //商户名
"paymentIntent": "Stripe的PaymentIntent", //订单信息
| billingDetails | Object | 否 | 银行卡账单信息(包含姓名、手机号码、邮箱地址、账单地址等)|
> 注意：customer与ephemeralKey必须成对出现，只传其一无效
#### 示例代码
- uni-app项目
``` js
//订单对象
var orderInfo = {
"customer": "Stripe的Customer", //Customer
"ephemeralKey": "Stripe的Customer Ephemeral Key", //临时访问Customer的Key
"isAllowDelay": true, //是否支持延迟支付 默认false
"merchantName": "DCloud", //商户名
"paymentIntent": "Stripe的PaymentIntent", //订单信息
"publishKey": "Public Key", //公钥
"billingDetails":{ //账单信息(可选)
"name":"",
......@@ -85,54 +85,54 @@ var orderInfo = {
"postalCode":"",
"state":""
}
}
};
// 从Stripe测试服务器获取订单数据
uni.request({
url: 'https://stripe-mobile-payment-sheet.glitch.me/checkout',
method: "POST",
success: (res) => {
orderInfo = {
"customer": res.data.customer,
"ephemeralKey": res.data.ephemeralKey,
"isAllowDelay": true,
"merchantName": "DCloud",
"paymentIntent": res.data.paymentIntent,
}
};
// 从Stripe测试服务器获取订单数据
uni.request({
url: 'https://stripe-mobile-payment-sheet.glitch.me/checkout',
method: "POST",
success: (res) => {
orderInfo = {
"customer": res.data.customer,
"ephemeralKey": res.data.ephemeralKey,
"isAllowDelay": true,
"merchantName": "DCloud",
"paymentIntent": res.data.paymentIntent,
"publishKey": res.data.publishableKey,
"billingDetails": res.data.billingDetails
};
}
});
//...
//发起支付
uni.getProvider({
service: 'payment',
success: function(res) {
if (~res.provider.indexOf('stripe')) {
uni.requestPayment({
"provider": "stripe",
"orderInfo": orderInfo,
success(res) {
console.log("requestPayment Success: "+JSON.stringify(res));
},
fail(e) {
console.log("requestPayment failed: "+JSON.stringify(e));
}
});
}
}
});
```
- 5+ App项目
``` js
//订单对象，从服务器获取
var orderInfo = {
"customer": "Stripe的Customer", //Customer
"ephemeralKey": "Stripe的Customer Ephemeral Key", //临时访问Customer的Key
"isAllowDelay": true, //是否支持延迟支付 默认false
"merchantName": "DCloud", //商户名
"paymentIntent": "Stripe的PaymentIntent", //订单信息
"billingDetails": res.data.billingDetails
};
}
});
//...
//发起支付
uni.getProvider({
service: 'payment',
success: function(res) {
if (~res.provider.indexOf('stripe')) {
uni.requestPayment({
"provider": "stripe",
"orderInfo": orderInfo,
success(res) {
console.log("requestPayment Success: "+JSON.stringify(res));
},
fail(e) {
console.log("requestPayment failed: "+JSON.stringify(e));
}
});
}
}
});
```
- 5+ App项目
``` js
//订单对象，从服务器获取
var orderInfo = {
"customer": "Stripe的Customer", //Customer
"ephemeralKey": "Stripe的Customer Ephemeral Key", //临时访问Customer的Key
"isAllowDelay": true, //是否支持延迟支付 默认false
"merchantName": "DCloud", //商户名
"paymentIntent": "Stripe的PaymentIntent", //订单信息
"publishKey": "Public Key", //公钥
"billingDetails":{ //账单信息(可选)
"name":"",
......@@ -146,26 +146,26 @@ var orderInfo = {
"postalCode":"",
"state":""
}
}
};
//获取支付渠道
var stripeSev = null;
plus.payment.getChannels(function(channels){
for (var i in channels) {
var channel = channels[i];
if (channel.id === 'stripe') {
stripeSev = channel;
}
}
//发起支付
plus.payment.request(stripeSev, orderInfo, function(result) {
var rawdata = JSON.parse(result.rawdata);
console.log("支付成功");
}, function(e) {
console.log("支付失败：" + JSON.stringify(e));
});
}, function(e){
console.log("获取支付渠道失败：" + JSON.stringify(e));
});
```
}
};
//获取支付渠道
var stripeSev = null;
plus.payment.getChannels(function(channels){
for (var i in channels) {
var channel = channels[i];
if (channel.id === 'stripe') {
stripeSev = channel;
}
}
//发起支付
plus.payment.request(stripeSev, orderInfo, function(result) {
var rawdata = JSON.parse(result.rawdata);
console.log("支付成功");
}, function(e) {
console.log("支付失败：" + JSON.stringify(e));
});
}, function(e){
console.log("获取支付渠道失败：" + JSON.stringify(e));
});
```
docs/tutorial/vue3-basics.md
浏览文件 @ ce3c6c4a
......@@ -1402,7 +1402,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
> v-model 会忽略所有表单元素的 `value`、`checked`、`selected` attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
在下面的示例中，输入框通过`v-model`绑定了`message`，用户在输入框里输入内容时，这个内容会实施赋值给`message`。当然在代码里为`message`赋值也会实时同步到界面上input里。这就是双向绑定。
在下面的示例中，输入框通过`v-model`绑定了`message`，用户在输入框里输入内容时，这个内容会实时赋值给`message`。当然在代码里为`message`赋值也会实时同步到界面上input里。这就是双向绑定。
```html
<template>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或