@tarojs/components 3.4.0-beta.3 → 3.5.0-canary.1

package/types/Picker.d.ts

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

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/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
  */