@tarojs/components 3.4.0 → 3.4.3

package/types/Map.d.ts

@@ -499,14 +499,14 @@ declare namespace MapProps {
       end
     }
 
-    interface causedByBegin {
+    interface CausedByBegin {
       /** 手势触发 */
       gesture
       /** 接口触发 */
       update
     }
 
-    interface causedByEnd {
+    interface CausedByEnd {
       /** 拖动导致 */
       drag
       /** 缩放导致 */
@@ -523,7 +523,7 @@ declare namespace MapProps {
     /** 导致视野变化的原因
      * @remarks 有效值为 gesture（手势触发）、update（接口触发或调用更新接口导致）、drag（拖动导致）、scale（缩放导致）
      */
-    causedBy: keyof (T extends 'begin' ? RegionChangeDetail.causedByBegin : RegionChangeDetail.causedByEnd)
+    causedBy: keyof (T extends 'begin' ? RegionChangeDetail.CausedByBegin : RegionChangeDetail.CausedByEnd)
     /** 视野改变详情 */
     detail: regionChangeDetail<RegionChangeDetail.type>
   }
@@ -532,7 +532,7 @@ declare namespace MapProps {
     rotate: number
     /** 倾斜角度 */
     skew: number
-    causedBy: keyof (T extends 'begin' ? RegionChangeDetail.causedByBegin : RegionChangeDetail.causedByEnd)
+    causedBy: keyof (T extends 'begin' ? RegionChangeDetail.CausedByBegin : RegionChangeDetail.CausedByEnd)
     type: T | string
     scale: number
     centerLocation: point
@@ -551,7 +551,7 @@ declare namespace MapProps {
 /** 地图。相关api Taro.createMapContext。
  * @classification maps
  * @supported weapp, alipay, swan
- * @example
+ * @example_react
  * ```tsx
  * class App extends Component {
  *   onTap () {}
@@ -562,6 +562,60 @@ declare namespace MapProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <map
+ *     id="map"
+ *     style="width: 100%; height: 300px;"
+ *     longitude="113.324520"
+ *     latitude="23.099994"
+ *     scale="14"
+ *     :markers="markers"
+ *     :polyline="polyline"
+ *     :show-location="true"
+ *     `@regionchange="regionchange"
+ *     `@markertap="markertap"
+ *   />
+ * </template>
+ *
+ * <script>
+ * export default {
+ *   data() {
+ *     return {
+ *       markers: [{
+ *         iconPath: "https://avatars2.githubusercontent.com/u/1782542?s=460&u=d20514a52100ed1f82282bcfca6f49052793c889&v=4",
+ *         id: 0,
+ *         latitude: 23.099994,
+ *         longitude: 113.324520,
+ *         width: 50,
+ *         height: 50
+ *       }],
+ *       polyline: [{
+ *         points: [{
+ *           longitude: 113.3245211,
+ *           latitude: 23.10229
+ *         }, {
+ *           longitude: 113.324520,
+ *           latitude: 23.21229
+ *         }],
+ *         color:"#FF0000DD",
+ *         width: 2,
+ *         dottedLine: true
+ *       }]
+ *     }
+ *   },
+ *   methods: {
+ *     regionchange(e) {
+ *       console.log(e.type)
+ *     },
+ *     markertap(e) {
+ *       console.log("markertap:", e.detail.markerId)
+ *     }
+ *   }
+ * }
+ * </script>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map
  */
 declare const Map: ComponentType<MapProps>

package/types/MatchMedia.d.ts

@@ -40,20 +40,39 @@ interface MatchMediaProps extends StandardProps {
 
 /** media query 匹配检测节点。可以指定一组 media query 规则，满足时，这个节点才会被展示。
  * 通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。
- * 基础库 2.11.1 开始支持。
  * @supported weapp
- * @example
+ * @classification viewContainer
+ * @example_react
  * ```tsx
  * class App extends Components {
  *   render () {
  *     return (
- *        <MatchMedia minWidth='400'>
-            <View>title</View>
-          </MatchMedia>
+ *       <View>
+ *         <MatchMedia minWidth="300" maxWidth="600">
+ *           <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
+ *         </MatchMedia>
+ *         <MatchMedia minHeight="400" orientation="landscape">
+ *           <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
+ *         </MatchMedia>
+ *       </View>
  *     )
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <match-media min-width="300" max-width="500">
+ *       <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
+ *     </match-media>
+ *     <match-media min-height="400" orientation="landscape">
+ *       <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
+ *     </match-media>
+ *   </view>
+ * </template>
+ * ```
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html
  */
 declare const MatchMedia: ComponentType<MatchMediaProps>
 

package/types/MovableArea.d.ts

@@ -11,19 +11,25 @@ interface MovableAreaProps extends StandardProps {
 
 /** movable-view 的可移动区域
  * @classification viewContainer
- * @supported weapp
- * @example
+ * @supported weapp, rn
+ * @example_react
  * ```tsx
  * class App extends Components {
  *   render () {
  *     return (
  *       <MovableArea style='height: 200px; width: 200px; background: red;'>
- *         <MovableView style='height: 50px; width: 50px; background: blue;' direction='all'></MovableView>
+ *         <MovableView style='height: 50px; width: 50px; background: blue;' direction='all'>旅行的意义</MovableView>
  *       </MovableArea>
  *     )
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ *   <movable-area style='height: 200px; width: 200px; background: red;'>
+ *     <movable-view style='height: 50px; width: 50px; background: blue;' direction='all'>在路上</movable-view>
+ *   </movable-area>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html
  */
 declare const MovableArea: ComponentType<MovableAreaProps>

package/types/MovableView.d.ts

@@ -4,7 +4,7 @@ import { StandardProps, CommonEventFunction, TouchEventFunction } from './common
 interface MovableViewProps extends Omit<StandardProps, 'animation'> {
   /** movable-view 的移动方向，属性值有`all`、`vertical`、`horizontal`、`none`
    * @default none
-   * @supported weapp
+   * @supported weapp, rn
    */
   direction?: 'all' | 'vertical' | 'horizontal' | 'none'
 
@@ -21,12 +21,12 @@ interface MovableViewProps extends Omit<StandardProps, 'animation'> {
   outOfBounds?: boolean
 
   /** 定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画
-   * @supported weapp
+   * @supported weapp, rn
    */
   x?: number | string
 
   /** 定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画
-   * @supported weapp
+   * @supported weapp, rn
    */
   y?: number | string
 
@@ -44,7 +44,7 @@ interface MovableViewProps extends Omit<StandardProps, 'animation'> {
 
   /** 是否禁用
    * @default false
-   * @supported weapp
+   * @supported weapp, rn
    */
   disabled?: boolean
 
@@ -97,6 +97,14 @@ interface MovableViewProps extends Omit<StandardProps, 'animation'> {
    * @supported weapp
    */
   onVTouchMove?: TouchEventFunction
+  /** 开始拖动时触发
+   * @supported rn
+   */
+  onDragStart?: CommonEventFunction
+  /** 拖动结束时触发
+   * @supported rn
+   */
+  onDragEnd?: CommonEventFunction
 }
 
 declare namespace MovableViewProps {
@@ -135,8 +143,8 @@ declare namespace MovableViewProps {
 
 /** 可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。
  * @classification viewContainer
- * @supported weapp, swan, alipay
- * @example
+ * @supported weapp, swan, alipay, rn
+ * @example_react
  * ```tsx
  * class App extends Components {
  *   render () {
@@ -148,6 +156,12 @@ declare namespace MovableViewProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ *   <movable-area style='height: 200px; width: 200px; background: red;'>
+ *     <movable-view style='height: 50px; width: 50px; background: blue;' direction='all'>带我走</movable-view>
+ *   </movable-area>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html
  */
 declare const MovableView: ComponentType<MovableViewProps>

package/types/Navigator.d.ts

@@ -6,7 +6,7 @@ interface NavigatorProps extends StandardProps {
    * @default "self"
    * @supported weapp, swan
    */
-  target?: keyof NavigatorProps.target
+  target?: keyof NavigatorProps.Target
 
   /** 当前小程序内的跳转链接
    * @supported weapp, swan, alipay, tt
@@ -17,7 +17,7 @@ interface NavigatorProps extends StandardProps {
    * @default "navigate"
    * @supported weapp, swan, alipay, tt
    */
-  openType?: keyof NavigatorProps.openType
+  openType?: keyof NavigatorProps.OpenType
 
   /** 当 open-type 为 'navigateBack' 时有效，表示回退的层数
    * @supported weapp, swan, tt
@@ -42,7 +42,7 @@ interface NavigatorProps extends StandardProps {
   /** 当 `target="miniProgram"` 时有效，要打开的小程序版本
    * @supported weapp, swan
    */
-  version?: keyof NavigatorProps.version
+  version?: keyof NavigatorProps.Version
 
   /** 指定按下去的样式类。当 `hover-class="none"` 时，没有点击态效果
    * @default "navigator-hover"
@@ -86,17 +86,17 @@ interface NavigatorProps extends StandardProps {
 
 declare namespace NavigatorProps {
   /** target 的合法值 */
-  interface target {
+  interface Target {
     /** 当前小程序 */
     self
     /** 其它小程序 */
     miniProgram
   }
   /** open-type 的合法值 */
-  interface openType {
+  interface OpenType {
     /** 对应 Taro.navigateTo 或 Taro.navigateToMiniProgram 的功能 */
     navigate
-    /** 对应 Taro.redirectTo 的功能 */	
+    /** 对应 Taro.redirectTo 的功能 */
     redirect
     /** 对应 Taro.switchTab 的功能 */
     switchTab
@@ -108,7 +108,7 @@ declare namespace NavigatorProps {
     exit
   }
   /** version 的合法值 */
-  interface version {
+  interface Version {
     /** 开发版 */
     develop
     /** 体验版 */

package/types/OfficialAccount.d.ts

@@ -5,24 +5,24 @@ interface OfficialAccountProps extends StandardProps {
   /** 组件加载成功时触发
    * @supported weapp
    */
-  onLoad?: CommonEventFunction<OfficialAccountProps.detail>
+  onLoad?: CommonEventFunction<OfficialAccountProps.Detail>
 
   /** 组件加载失败时触发
    * @supported weapp
    */
-  onError?: CommonEventFunction<OfficialAccountProps.detail>
+  onError?: CommonEventFunction<OfficialAccountProps.Detail>
 }
 
 declare namespace OfficialAccountProps {
   /** detail 对象 */
-  interface detail {
+  interface Detail {
     /** 状态码 */
     status: number
     /** 错误信息 */
     errMsg: string
   }
   /** status 有效值 */
-  interface status {
+  interface Status {
     /** 网络错误 */
     '-2'
     /** 数据解析错误 */
@@ -54,12 +54,6 @@ declare namespace OfficialAccountProps {
  * 当小程序从扫小程序码场景（场景值1047，场景值1124）打开时
  * 当小程序从聊天顶部场景（场景值1089）中的「最近使用」内打开时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态
  * 当从其他小程序返回小程序（场景值1038）时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态
- * 为便于开发者调试，基础库 2.7.3 版本起开发版小程序增加以下场景展示公众号组件：
- * 
- * 开发版小程序从扫二维码（场景值 1011）打开 — 体验版小程序打开
- * 组件限定最小宽度为 300px，高度为定值 84px。
- * 
- * 每个页面只能配置一个该组件。
  * @classification open
  * @supported weapp
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/official-account.html

package/types/OpenData.d.ts

@@ -5,7 +5,7 @@ interface OpenDataProps extends StandardProps {
   /** 开放数据类型
    * @supported weapp
    */
-  type: keyof OpenDataProps.type
+  type: keyof OpenDataProps.Type
   /** 当 type="groupName" 时生效, 群id
    * @supported weapp
    */
@@ -14,7 +14,7 @@ interface OpenDataProps extends StandardProps {
    * @default "en"
    * @supported weapp
    */
-  lang?: keyof OpenDataProps.lang
+  lang?: keyof OpenDataProps.Lang
 
   /** 数据为空时的默认文案
    * @supported weapp
@@ -34,7 +34,7 @@ interface OpenDataProps extends StandardProps {
 
 declare namespace OpenDataProps {
   /** type 的合法值 */
-  interface type {
+  interface Type {
     /** 拉取群名称 */
     groupName
     /** 用户昵称 */
@@ -53,7 +53,7 @@ declare namespace OpenDataProps {
     userLanguage
   }
   /** lang 的合法值 */
-  interface lang {
+  interface Lang {
     /** 英文 */
     en
     /** 简体中文 */
@@ -66,7 +66,7 @@ declare namespace OpenDataProps {
 /** 用于展示微信开放的数据
  * @classification open
  * @supported weapp
- * @example
+ * @example_react
  * ```tsx
  * class App extends Component {
  *   render () {
@@ -76,6 +76,12 @@ declare namespace OpenDataProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <open-data type="userAvatarUrl" />
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html
  */
 declare const OpenData: ComponentType<OpenDataProps>

package/types/PageContainer.d.ts

@@ -30,7 +30,7 @@ interface PageContainerProps extends StandardProps {
    * @default bottom
    * @supported weapp
    */
-  position?: keyof PageContainerProps.position
+  position?: keyof PageContainerProps.Position
 
   /** 是否显示圆角
    * @default false
@@ -38,21 +38,21 @@ interface PageContainerProps extends StandardProps {
    */
   round?: boolean
 
-  /** 自定义遮罩层样式
+  /** 是否在下滑一段距离后关闭
    * @default false
    * @supported weapp
    */
   closeOnSlideDown?: boolean
 
-  /** 是否在下滑一段距离后关闭
+  /** 自定义遮罩层样式
    * @supported weapp
    */
-  overlayStyle?: boolean
+  overlayStyle?: string
 
   /** 自定义弹出层样式
    * @supported weapp
    */
-  customStyle?: boolean
+  customStyle?: string
 
   /** 进入前触发
    * @supported weapp
@@ -91,10 +91,15 @@ interface PageContainerProps extends StandardProps {
 }
 
 declare namespace PageContainerProps {
-  interface position {
+  /** 弹出位置 */
+  interface Position {
+    /** 上方弹出 */
     top
+    /** 下方弹出 */
     bottom
+    /** 左边弹出 */
     left
+    /** 右边弹出 */
     right
   }
 }
@@ -108,6 +113,7 @@ declare namespace PageContainerProps {
  *   1. tip: 当前页面最多只有 1 个容器，若已存在容器的情况下，无法增加新的容器
  *   2. tip: wx.navigateBack 无法在页面栈顶调用，此时没有上一级页面
  * @classification viewContainer
+ * @supported weapp
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html
  */
 declare const PageContainer: ComponentType<PageContainerProps>

package/types/Picker.d.ts

@@ -103,7 +103,7 @@ interface PickerMultiSelectorProps extends PickerStandardProps {
    * 列改变时触发
    * @supported weapp, h5, rn
    */
-  onColumnChange?: CommonEventFunction<PickerMultiSelectorProps.ColumnChangeEvnetDetail>
+  onColumnChange?: CommonEventFunction<PickerMultiSelectorProps.ColumnChangeEventDetail>
 }
 
 declare namespace PickerMultiSelectorProps {
@@ -111,7 +111,7 @@ declare namespace PickerMultiSelectorProps {
     /** 表示变更值的下标 */
     value: number[]
   }
-  interface ColumnChangeEvnetDetail {
+  interface ColumnChangeEventDetail {
     /** 表示改变了第几列（下标从0开始） */
     column: number
     /** 表示变更值的下标 */
@@ -247,7 +247,7 @@ declare namespace PickerRegionProps {
  * 从底部弹起的滚动选择器
  * @classification forms
  * @supported weapp, h5, rn, swan, alipay, tt
- * @example
+ * @example_react
  * ```tsx
  * export default class PagePicker extends Component {
  *   state = {
@@ -314,6 +314,69 @@ declare namespace PickerRegionProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="page-body">
+ *     <view class="page-section">
+ *       <text>地区选择器</text>
+ *       <view>
+ *         <picker mode="selector" :range="selector" `@change="onChange">
+ *           <view class="picker">
+ *             当前选择：{{selectorChecked}}
+ *           </view>
+ *         </picker>
+ *       </view>
+ *     </view>
+ *     <view class="page-section">
+ *       <text>时间选择器</text>
+ *       <view>
+ *         <picker mode="time" `@change="onTimeChange">
+ *           <view class="picker">
+ *             当前选择：{{timeSel}}
+ *           </view>
+ *         </picker>
+ *       </view>
+ *     </view>
+ *     <view class="page-section">
+ *       <text>日期选择器</text>
+ *       <view>
+ *         <picker mode="date" `@change="onDateChange">
+ *           <view class="picker">
+ *             当前选择：{{dateSel}}
+ *           </view>
+ *         </picker>
+ *       </view>
+ *     </view>
+ *   </view>
+ * </template>
+ * 
+ * <script>
+ *   export default {
+ *     data() {
+ *       return {
+ *         selector: ['美国', '中国', '巴西', '日本'],
+ *         selectorChecked: '美国',
+ *         timeSel: '12:01',
+ *         dateSel: '2018-04-22'
+ *       }
+ *     },
+ *     methods: {
+ *       onChange: function(e) {
+ *         this.selectorChecked = this.selector[e.detail.value]
+ *       },
+ * 
+ *       onTimeChange: function(e) {
+ *         this.timeSel = e.detail.value
+ *       },
+ * 
+ *       onDateChange: function(e) {
+ *         this.dateSel = e.detail.value
+ *       }
+ *     }
+ *   }
+ * </script>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
  */
 declare const Picker: ComponentType<PickerMultiSelectorProps | PickerTimeProps | PickerDateProps | PickerRegionProps | PickerSelectorProps>

package/types/PickerView.d.ts

@@ -28,6 +28,12 @@ interface PickerViewProps extends StandardProps {
    */
   maskClass?: string
 
+  /** 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。
+   * @supported weapp
+   * @default false
+   */
+  immediateChange?: boolean
+
   /** 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
    * @supported weapp, swan, alipay, tt, rn
    */
@@ -53,8 +59,8 @@ declare namespace PickerViewProps {
 /** 嵌入页面的滚动选择器
  * 其中只可放置 picker-view-column 组件，其它节点不会显示
  * @classification forms
- * @supported weapp, swan, alipay, tt
- * @example
+ * @supported weapp, swan, alipay, tt, h5, rn
+ * @example_react
  * ```tsx
  * export default class Picks extends Component {
  *
@@ -125,7 +131,65 @@ declare namespace PickerViewProps {
  *     )
  *   }
  * }
+ * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="taro-example">
+ *   <view>{{year}}年{{month}}月{{day}}日</view>
+ *   <picker-view indicator-style="height: 30px;" style="width: 100%; height: 300px;" :value="value" `@change="onChange">
+ *     <picker-view-column>
+ *       <view v-for="(item, index) in years" :key="index">{{item}}年</view>
+ *     </picker-view-column>
+ *     <picker-view-column>
+ *       <view v-for="(item, index) in months" :key="index">{{item}}月</view>
+ *     </picker-view-column>
+ *     <picker-view-column>
+ *       <view v-for="(item, index) in days" :key="index">{{item}}日</view>
+ *     </picker-view-column>
+ *   </picker-view>
+ * </view>
+ * </template>
  *
+ * <script>
+ *   export default {
+ *     name: "Index",
+ *     data() {
+ *       const date = new Date()
+ *       const years = []
+ *       const months = []
+ *       const days = []
+ *       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 {
+ *         years: years,
+ *         year: date.getFullYear(),
+ *         months: months,
+ *         month: 2,
+ *         days: days,
+ *         day: 2,
+ *         value: [3, 1, 1]
+ *       }
+ *     },
+ *
+ *     methods: {
+ *       onChange: function(e) {
+ *         const val = e.detail.value
+ *         console.log(val)
+ *         this.year = this.years[val[0]]
+ *         this.month = this.months[val[1]]
+ *         this.day = this.days[val[2]]
+ *       }
+ *     }
+ *   }
+ * </script>
  * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html
  */

package/types/PickerViewColumn.d.ts

@@ -4,7 +4,7 @@ import { StandardProps, CommonEventFunction } from './common'
 /** 滚动选择器子项
  * 仅可放置于 `<PickerView />` 中，其孩子节点的高度会自动设置成与 picker-view 的选中框的高度一致
  * @classification forms
- * @supported weapp, swan, alipay, tt
+ * @supported weapp, swan, alipay, tt, rn
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/picker-view-column.html
  */
 declare const PickerViewColumn: ComponentType<StandardProps>

package/types/Progress.d.ts

@@ -78,7 +78,7 @@ interface ProgressProps extends StandardProps {
 /** 进度条。组件属性的长度单位默认为 px
  * @classification base
  * @supported weapp, swan, alipay, tt, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
@@ -97,6 +97,17 @@ interface ProgressProps extends StandardProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <progress percent="20" stroke-width="2" :show-info="true" />
+ *     <progress percent="40" stroke-width="2" :active="true" />
+ *     <progress percent="60" stroke-width="2" :active="true" />
+ *     <progress percent="80" stroke-width="2" :active="true" active-color="blue" />
+ *   </view>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/progress.html
  */
 declare const Progress: ComponentType<ProgressProps>