@tarojs/components 3.4.0-beta.2 → 3.4.2

package/types/LivePlayer.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react'
-import { StandardProps, CommonEventFunction, netStatus } from './common'
+import { StandardProps, CommonEventFunction, NetStatus } from './common'
 
 interface LivePlayerProps extends StandardProps {
   /** 音视频地址。目前仅支持 flv, rtmp 格式
@@ -11,7 +11,7 @@ interface LivePlayerProps extends StandardProps {
    * @default "live"
    * @supported weapp
    */
-  mode?: keyof LivePlayerProps.mode
+  mode?: keyof LivePlayerProps.Mode
 
   /** 自动播放
    * @default false
@@ -29,7 +29,7 @@ interface LivePlayerProps extends StandardProps {
    * @default "vertical"
    * @supported weapp
    */
-  orientation?: keyof LivePlayerProps.orientation
+  orientation?: keyof LivePlayerProps.Orientation
 
   /** 填充模式
    * @default "contain"
@@ -112,14 +112,14 @@ interface LivePlayerProps extends StandardProps {
 
 declare namespace LivePlayerProps {
   /** mode 的合法值 */
-  interface mode {
+  interface Mode {
     /** 直播 */
     live
     /** 实时通话，该模式时延更低 */
     RTC
   }
   /** orientation 的合法值 */
-  interface orientation {
+  interface Orientation {
     /** 竖直 */
     vertical
     /** 水平 */
@@ -151,10 +151,10 @@ declare namespace LivePlayerProps {
     fullScreen: number | boolean
   }
   interface onNetStatusEventDetail {
-    info: netStatus
+    info: NetStatus
   }
   /** 状态码 */
-  interface status {
+  interface Status {
     /** 已经连接服务器 */
     2001
     /** 已经连接 RTMP 服务器,开始拉流 */
@@ -205,11 +205,11 @@ declare namespace LivePlayerProps {
 }
 
 /** 实时音视频播放。相关api：Taro.createLivePlayerContext
- * 
+ *
  * 需要先通过类目审核，再在小程序管理后台，“设置”-“接口设置”中自助开通该组件权限。
  * @classification media
  * @supported weapp
- * @example
+ * @example_react
  * ```tsx
  * class App extends Components {
  *   render () {
@@ -219,6 +219,12 @@ declare namespace LivePlayerProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <live-player src="url" mode="live" :autoplay="true"  />
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
  */
 declare const LivePlayer: ComponentType<LivePlayerProps>

package/types/LivePusher.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react'
-import { StandardProps, CommonEventFunction, netStatus } from './common'
+import { StandardProps, CommonEventFunction, NetStatus } from './common'
 
 /** 实时音视频录制。
  * 需要用户授权 scope.camera、scope.record
@@ -46,7 +46,7 @@ interface LivePusherProps extends StandardProps {
    * @default "vertical"
    * @supported weapp
    */
-  orientation?: keyof LivePusherProps.orientation
+  orientation?: keyof LivePusherProps.Orientation
 
   /** 美颜，取值范围 0-9 ，0 表示关闭
    * @default 0
@@ -131,13 +131,13 @@ interface LivePusherProps extends StandardProps {
    * @default "auto"
    * @supported weapp
    */
-  localMirror?: keyof LivePusherProps.localMirror
+  localMirror?: keyof LivePusherProps.LocalMirror
 
   /** 音频混响类型
    * @default 0
    * @supported weapp
    */
-  audioReverbType?: keyof LivePusherProps.audioReverbType
+  audioReverbType?: keyof LivePusherProps.AudioReverbType
 
   /** 开启或关闭麦克风
    * @default true
@@ -161,7 +161,7 @@ interface LivePusherProps extends StandardProps {
    * @default "voicecall"
    * @supported weapp
    */
-  audioVolumeType?: keyof LivePusherProps.audioVolumeType
+  audioVolumeType?: keyof LivePusherProps.AudioVolumeType
 
   /** 上推的视频流的分辨率宽度
    * @default 360
@@ -179,13 +179,13 @@ interface LivePusherProps extends StandardProps {
    * @default smooth
    * @supported weapp
    */
-  beautyStyle?: keyof LivePusherProps.beautyStyleType
+  beautyStyle?: keyof LivePusherProps.BeautyStyleType
 
   /** 设置色彩滤镜
    * @default standard
    * @supported weapp
    */
-  filter?: keyof LivePusherProps.filterType
+  filter?: keyof LivePusherProps.FilterType
 
   /** 状态变化事件，detail = {code}
    * @supported weapp
@@ -225,14 +225,14 @@ interface LivePusherProps extends StandardProps {
 
 declare namespace LivePusherProps {
   /** orientation 的合法值 */
-  interface orientation {
+  interface Orientation {
     /** 竖直 */
     vertical
     /** 水平 */
     horizontal
   }
   /** localMirror 的合法值 */
-  interface localMirror {
+  interface LocalMirror {
     /** 前置摄像头镜像，后置摄像头不镜像 */
     auto
     /** 前后置摄像头均镜像 */
@@ -241,7 +241,7 @@ declare namespace LivePusherProps {
     disable
   }
   /** audioReverbType 的合法值 */
-  interface audioReverbType {
+  interface AudioReverbType {
     /** 关闭 */
     0
     /** KTV */
@@ -260,21 +260,21 @@ declare namespace LivePusherProps {
     7
   }
   /** audioVolumeType 的合法值 */
-  interface audioVolumeType {
+  interface AudioVolumeType {
     /** 媒体音量 */
     media
     /** 通话音量 */
     voicecall
   }
   /** beautyStyleType 的合法值 */
-  interface beautyStyleType {
+  interface BeautyStyleType {
     /** 光滑美颜 */
     smooth
     /** 自然美颜 */
     nature
   }
   /** filterType 的合法值 */
-  interface filterType {
+  interface FilterType {
     /** 标准 */
     standard
     /** 粉嫩 */
@@ -304,7 +304,7 @@ declare namespace LivePusherProps {
   }
   interface onNetstatusEventDetail {
     /** 网络状态 */
-    info: netStatus
+    info: NetStatus
   }
   interface onErrorEventDetail {
     /** 错误信息 */
@@ -324,7 +324,7 @@ declare namespace LivePusherProps {
  * 需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。
  * @classification media
  * @supported weapp
- * @example
+ * @example_react
  * ```tsx
  * class App extends Components {
  *   render () {
@@ -334,6 +334,12 @@ declare namespace LivePusherProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <live-pusher url="url" mode="RTC" :autopush="true"  />
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html
  */
 declare const LivePusher: ComponentType<LivePusherProps>

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
@@ -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>