@tarojs/components 3.4.0 → 3.4.3

package/types/Radio.d.ts

@@ -24,12 +24,17 @@ interface RadioProps extends StandardProps {
    * @supported weapp, rn
    */
   color?: string
+
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5
+   */
+  nativeProps?: Record<string, unknown>
 }
 
 /** 单选项目
  * @classification forms
  * @supported weapp, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * export default class PageRadio extends Component {
  *   state = {
@@ -96,6 +101,77 @@ interface RadioProps extends StandardProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="container">
+ *     <view class="page-section">
+ *       <text>默认样式</text>
+ *       <radio value="选中" :checked="true">选中</radio>
+ *       <radio style="margin-left: 20rpx;" value="未选中">未选中</radio>
+ *     </view>
+ *     <view class="page-section">
+ *       <text>推荐展示样式(Taro 团队成员):</text>
+ *         <radio-group `@change="onChange">
+ *           <label v-for="item in list" class="checkbox-list__label">
+ *             <radio class="checkbox-list__checkbox" :value="item.value" :checked="item.checked">{{ item.text }}</radio>
+ *           </label>
+ *         </radio-group>
+ *     </view>
+ *   </view>
+ * </template>
+ * 
+ * <script>
+ * export default {
+ *   data() {
+ *     return {
+ *       list: [
+ *         {
+ *           value: 'yuche',
+ *           text: 'yuche',
+ *           checked: false
+ *         },
+ *         {
+ *           value: 'cjj',
+ *           text: 'cjj',
+ *           checked: false
+ *         },
+ *         {
+ *           value: 'xiexiaoli',
+ *           text: 'xiexiaoli',
+ *           checked: false
+ *         },
+ *         {
+ *           value: 'honly',
+ *           text: 'honly',
+ *           checked: false
+ *         },
+ *         {
+ *           value: 'cs',
+ *           text: 'cs',
+ *           checked: false
+ *         },
+ *         {
+ *           value: 'zhutianjian',
+ *           text: 'zhutianjian',
+ *           checked: false
+ *         },
+ *         {
+ *           value: '隔壁老李',
+ *           text: '隔壁老李',
+ *           checked: true
+ *         }
+ *       ]
+ *     }
+ *   },
+ *   methods: {
+ *     onChange: function(e) {
+ *       console.log(e.detail.value)
+ *     }
+ *   }
+ * }
+ * </script>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
  */
 declare const Radio: ComponentType<RadioProps>

package/types/RichText.d.ts

@@ -65,7 +65,7 @@ declare namespace RichTextProps {
 /** 富文本
  * @classification base
  * @supported weapp, swan, alipay, tt, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * class App extends Components {
  *   state = {
@@ -88,6 +88,38 @@ declare namespace RichTextProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <rich-text :nodes="nodes"></rich-text>
+ *   </view>
+ * </template>
+ * 
+ * <script>
+ * export default {
+ *   name: 'Index',
+ *   data() {
+ *     return {
+ *       nodes: [{
+ *         name: 'div',
+ *         attrs: {
+ *           class: 'div_class',
+ *           style: 'line-height: 60px; color: red;'
+ *         },
+ *         children: [{
+ *           type: 'text',
+ *           text: 'Hello World!'
+ *         }]
+ *       }]
+ *     }
+ *   },
+ *   onReady () {
+ *     console.log('onReady')
+ *   }
+ * }
+ * </script>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
  */
 declare const RichText: ComponentType<RichTextProps>

package/types/ScrollView.d.ts

@@ -98,31 +98,31 @@ interface ScrollViewProps extends StandardProps {
   refresherTriggered?: boolean
 
   /** 启用 scroll-view 增强特性
-   * @supported weapp 2.12.0+
+   * @supported weapp
    * @default false
    */
   enhanced?: boolean
 
   /** iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)
-   * @supported weapp 2.12.0+
+   * @supported weapp
    * @default true
    */
   bounces?: boolean
 
   /** 滚动条显隐控制 (同时开启 enhanced 属性后生效)
-   * @supported weapp 2.12.0+
+   * @supported weapp
    * @default true
    */
   showScrollbar?: boolean
 
   /** 分页滑动效果 (同时开启 enhanced 属性后生效)
-   * @supported weapp 2.12.0+
+   * @supported weapp
    * @default false
    */
   pagingEnabled?: boolean
 
   /** boolean	false	滑动减速速率控制 (同时开启 enhanced 属性后生效)
-   * @supported weapp 2.12.0+
+   * @supported weapp
    * @default false
    */
   fastDeceleration?: boolean
@@ -164,17 +164,17 @@ interface ScrollViewProps extends StandardProps {
   onRefresherAbort?: CommonEventFunction
 
   /** 滑动开始事件 (同时开启 enhanced 属性后生效)
-   * @supported weapp 2.12.0+
+   * @supported weapp
    */
   onDragStart?: CommonEventFunction
 
   /** 滑动事件 (同时开启 enhanced 属性后生效)
-   * @supported weapp 2.12.0+
+   * @supported weapp
    */
   onDragging?: CommonEventFunction
 
   /** 滑动结束事件 (同时开启 enhanced 属性后生效)
-   * @supported weapp 2.12.0+
+   * @supported weapp
    */
   onDragEnd?: CommonEventFunction
 }
@@ -200,7 +200,8 @@ declare namespace ScrollViewProps {
  * H5 中 ScrollView 组件是通过一个高度（或宽度）固定的容器内部滚动来实现的，因此务必正确的设置容器的高度。例如: 如果 ScrollView 的高度将 body 撑开，就会同时存在两个滚动条（body 下的滚动条，以及 ScrollView 的滚动条）。
  * 微信小程序 中 ScrollView 组件如果设置 scrollX 横向滚动时，并且子元素为多个时（单个子元素时设置固定宽度则可以正常横向滚动），需要通过 WXSS 设置 `white-space: nowrap` 来保证元素不换行，并对 ScrollView 内部元素设置 `display: inline-block` 来使其能够横向滚动。
  * @classification viewContainer
- * @example
+ * @supported weapp, swan, alipay, tt, h5, rn
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
@@ -255,6 +256,87 @@ declare namespace ScrollViewProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="container">
+ *     <view class="page-body">
+ *       <view class="page-section">
+ *         <view class="page-section-title">
+ *           <text>Vertical Scroll - 纵向滚动</text>
+ *         </view>
+ *         <view class="page-section-spacing">
+ *           <scroll-view :scroll-y="true" style="height: 300rpx;" `@scrolltoupper="upper" `@scrolltolower="lower" `@scroll="scroll" :scroll-into-view="toView" :scroll-top="scrollTop">
+ *             <view id="demo1" class="scroll-view-item demo-text-1">1</view>
+ *             <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
+ *             <view id="demo3" class="scroll-view-item demo-text-3">3</view>
+ *           </scroll-view>
+ *         </view>
+ *       </view>
+ *       <view class="page-section">
+ *         <view class="page-section-title">
+ *           <text>Horizontal Scroll - 横向滚动</text>
+ *         </view>
+ *         <view class="page-section-spacing">
+ *           <scroll-view class="scroll-view_H" :scroll-x="true" `@scroll="scroll" style="width: 100%">
+ *             <view id="demo21" class="scroll-view-item_H demo-text-1">a</view>
+ *             <view id="demo22"  class="scroll-view-item_H demo-text-2">b</view>
+ *             <view id="demo23" class="scroll-view-item_H demo-text-3">c</view>
+ *           </scroll-view>
+ *         </view>
+ *       </view>
+ *     </view>
+ *   </view>
+ * </template>
+ * 
+ * <script>
+ * const order = ['demo1', 'demo2', 'demo3']
+ * export default {
+ *   name: 'Index',
+ *   data() {
+ *     return {
+ *       scrollTop: 0,
+ *       toView: 'demo2'
+ *     }
+ *   },
+ * 
+ *   methods: {
+ *     upper(e) {
+ *       console.log('upper:', e)
+ *     },
+ * 
+ *     lower(e) {
+ *       console.log('lower:', e)
+ *     },
+ * 
+ *     scroll(e) {
+ *       console.log('scroll:', e)
+ *     }
+ *   }
+ * }
+ * </script>
+ * 
+ * <style>
+ * .page-section-spacing{
+ *   margin-top: 60rpx;
+ * }
+ * .scroll-view_H{
+ *   white-space: nowrap;
+ * }
+ * .scroll-view-item{
+ *   height: 300rpx;
+ * }
+ * .scroll-view-item_H{
+ *   display: inline-block;
+ *   width: 100%;
+ *   height: 300rpx;
+ * }
+ * 
+ * .demo-text-1 { background: #ccc; }
+ * .demo-text-2 { background: #999; }
+ * .demo-text-3 { background: #666; }
+ * </style>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
  */
 declare const ScrollView: ComponentType<ScrollViewProps>

package/types/ShareElement.d.ts

@@ -28,7 +28,7 @@ interface ShareElementProps extends StandardProps {
 
 /** 共享元素
  *
- * 共享元素是一种动画形式，类似于 [`flutter Hero`](https://flutterchina.club/animations/hero-animations/) 动画，表现为元素像是在页面间穿越一样。该组件需与 [`page-container`](https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html) 组件结合使用。
+ * 共享元素是一种动画形式，类似于 [`flutter Hero`](https://flutterchina.club/animations/hero-animations/) 动画，表现为元素像是在页面间穿越一样。该组件需与 [`page-container`](/docs/components/viewContainer/page-container) 组件结合使用。
  * 使用时需在当前页放置 `share-element` 组件，同时在 `page-container` 容器中放置对应的 `share-element` 组件，对应关系通过属性值 key 映射。当设置 `page-container` `显示时，transform` 属性为 `true` 的共享元素会产生动画。当前页面容器退出时，会产生返回动画。
  * @classification viewContainer
  * @supported weapp

package/types/Slider.d.ts

@@ -94,7 +94,7 @@ declare namespace SliderProps {
 /** 滑动选择器
  * @classification forms
  * @supported weapp, h5, rn, swan, alipay, tt
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
@@ -115,6 +115,19 @@ declare namespace SliderProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <text>设置 step</text>
+ *     <slider step="1" value="50"/>
+ *     <text>显示当前 value</text>
+ *     <slider step="1" value="50" :show-value="true" />
+ *     <text>设置最小/最大值</text>
+ *     <slider step="1" value="100" :show-value="true" min="50" max="200"/>
+ *   </view>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/slider.html
  */
 declare const Slider: ComponentType<SliderProps>

package/types/Swiper.d.ts

@@ -163,9 +163,10 @@ declare namespace SwiperProps {
 }
 
 /** 滑块视图容器。其中只可放置 swiper-item 组件，否则会导致未定义的行为。
+ * > 不要为 `SwiperItem` 设置 **style** 属性，可以通过 class 设置样式。[7147](https://github.com/NervJS/taro/issues/7147)
  * @classification viewContainer
  * @supported weapp, swan, alipay, tt, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * class App extends Component {
  *   render () {
@@ -192,6 +193,30 @@ declare namespace SwiperProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <swiper
+ *     class='test-h'
+ *     indicator-color='#999'
+ *     indicator-active-color='#333'
+ *     :vertical="true"
+ *     :circular="true"
+ *     :indicator-dots="true"
+ *     :autoplay="true"
+ *   >
+ *     <swiper-item>
+ *       <view class='demo-text-1'>1</view>
+ *     </swiper-item>
+ *     <swiper-item>
+ *       <view class='demo-text-2'>2</view>
+ *     </swiper-item>
+ *     <swiper-item>
+ *       <view class='demo-text-3'>3</view>
+ *     </swiper-item>
+ *   </swiper>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
  */
 declare const Swiper: ComponentType<SwiperProps>

package/types/SwiperItem.d.ts

@@ -3,15 +3,16 @@ import { StandardProps } from './common'
 
 interface SwiperItemProps extends StandardProps {
   /** 该 swiper-item 的标识符
-   * @supported weapp
+   * @supported weapp, swan, alipay, tt, h5, rn
    */
   itemId?: string
 }
 
 /** 仅可放置在 swiper 组件中，宽高自动设置为100%
+ * > 不要为 `SwiperItem` 设置 **style** 属性，可以通过 class 设置样式。[7147](https://github.com/NervJS/taro/issues/7147)
  * @classification viewContainer
- * @supported weapp
- * @example
+ * @supported weapp, swan, alipay, tt, h5, rn
+ * @example_react
  * ```tsx
  * class App extends Component {
  *   render () {
@@ -38,6 +39,30 @@ interface SwiperItemProps extends StandardProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <swiper
+ *     class='test-h'
+ *     indicator-color='#999'
+ *     indicator-active-color='#333'
+ *     :vertical="true"
+ *     :circular="true"
+ *     :indicator-dots="true"
+ *     :autoplay="true"
+ *   >
+ *     <swiper-item>
+ *       <view class='demo-text-1'>1</view>
+ *     </swiper-item>
+ *     <swiper-item>
+ *       <view class='demo-text-2'>2</view>
+ *     </swiper-item>
+ *     <swiper-item>
+ *       <view class='demo-text-3'>3</view>
+ *     </swiper-item>
+ *   </swiper>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html
  */
 declare const SwiperItem: ComponentType<SwiperItemProps>

package/types/Switch.d.ts

@@ -10,7 +10,7 @@ interface SwitchProps extends StandardProps, FormItemProps {
 
   /** 是否禁用
    * @default false
-   * @supported weapp
+   * @supported weapp, rn
    */
   disabled?: boolean
 
@@ -27,9 +27,14 @@ interface SwitchProps extends StandardProps, FormItemProps {
   color?: string
 
   /** checked 改变时触发 change 事件
-   * @supported weapp
+   * @supported weapp, rn
    */
   onChange?: CommonEventFunction<SwitchProps.onChangeEventDetail>
+
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5
+   */
+  nativeProps?: Record<string, unknown>
 }
 
 declare namespace SwitchProps {
@@ -40,7 +45,7 @@ declare namespace SwitchProps {
 
 /** 开关选择器
  * @classification forms
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
@@ -61,6 +66,19 @@ declare namespace SwitchProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class='components-page'>
+ *     <text>默认样式</text>
+ *     <switch :checked="true" />
+ *     <switch />
+ *     <text>推荐展示样式</text>
+ *     <switch :checked="true" />
+ *     <switch />
+ *   </view>
+ * </template>
+ * ```
  * @supported weapp, h5, rn, swan, alipay, tt
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/switch.html
  */

package/types/Text.d.ts

@@ -41,7 +41,7 @@ declare namespace TextProps {
 /** 文本
  * @classification base
  * @supported weapp, swan, alipay, tt, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   state = {
@@ -84,6 +84,43 @@ declare namespace TextProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ``` html
+ * <template>
+ *   <view class="container">
+ *     <view v-for="(item, index) in contents">
+ *       <text>{{item.text}} line {{index + 1}}</text>
+ *     </view>
+ *     <button class="btn-max-w button_style" :plain="true" type="default" `@tap="add">add line</button>
+ *     <button class="btn-max-w button_style" :plain="true" type="default" :disabled="contentsLen ? false : true" `@tap="remove">remove line</button>
+ * </template>
+ * 
+ * <script>
+ * export default {
+ *   data() {
+ *     return {
+ *       contents: [],
+ *       contentsLen: 0
+ *     }
+ *   },
+ *   methods: {
+ *     add () {
+ *       const cot = this.contents.slice()
+ *       cot.push({ text: 'hello world' })
+ *       this.contents = cot
+ *       this.contentsLen = cot.length
+ *     },
+ * 
+ *     remove () {
+ *       const cot = this.contents.slice()
+ *       cot.pop()
+ *       this.contents = cot
+ *       this.contentsLen = cot.length
+ *     }
+ *   }
+ * }
+ * </script>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/text.html
  */
 declare const Text: ComponentType<TextProps>

package/types/Textarea.d.ts

@@ -138,6 +138,11 @@ interface TextareaProps extends StandardProps, FormItemProps {
    * @supported weapp
    */
   onKeyboardHeightChange?: CommonEventFunction<TextareaProps.onKeyboardHeightChangeEventDetail>
+
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5
+   */
+  nativeProps?: Record<string, unknown>
 }
 
 declare namespace TextareaProps {
@@ -181,7 +186,7 @@ declare namespace TextareaProps {
 /** 多行输入框。该组件是原生组件，使用时请注意相关限制
  * @classification forms
  * @supported weapp, h5, rn
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
@@ -200,6 +205,17 @@ declare namespace TextareaProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <text>输入区域高度自适应，不会出现滚动条</text>
+ *     <textarea style="background:#efefef;width:100%;min-height:80px;padding:0 30rpx;" :auto-height="true" />
+ *     <text>这是一个可以自动聚焦的 textarea</text>
+ *     <textarea style="background:#efefef;width:100%;height:80px;padding:0 30rpx;" :auto-focusd="true" />
+ *   </view>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html
  */
 declare const Textarea: ComponentType<TextareaProps>