Feat components v2 merge

docs-vuepress/rn-template.md

@@ -380,3 +380,238 @@
 | 属性名                   | 类型     | 默认值              | 说明                                 |
 | ----------------------- | ------- | ------------------  | ------------------------------------|
 | item-id                 | string  | `无`             | 该 swiper-item 的标识符                  |
+
+
+### checkbox
+多选项目
+
+
+属性
+
+| 属性名                   | 类型     | 默认值         | 说明                                                       |
+| ----------------------- | ------- | ------------- | ---------------------------------------------------------- |
+| value	    | String   |              | checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value |
+| disabled  | Boolean  |     false    | 是否禁用 |
+| checked	  | Boolean  |     false    | 当前是否选中，可用来设置默认选中 |
+| color		  | String   |     #09BB07  | checkbox的颜色，同css的color |
+
+
+### checkbox-group
+多项选择器，内部由多个checkbox组成。
+
+
+事件
+
+| 事件名           | 说明                |
+| ----------------| ------------------ |
+| bindchange      | checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] } |
+
+
+### radio
+单选项目
+
+
+属性
+
+| 属性名                   | 类型     | 默认值         | 说明                                                       |
+| ----------------------- | ------- | ------------- | ---------------------------------------------------------- |
+| value	    | String  |               | radio 标识，当该 radio 选中时，radio-group 的 change 事件会携带 radio 的 value |
+| disabled  | Boolean  |     false    | 是否禁用 |
+| checked	  | Boolean  |     false    | 当前是否选中，可用来设置默认选中 |
+| color		  | String   |     #09BB07  | checkbox 的颜色，同 css 的 color |
+
+
+### radio-group
+单项选择器，内部由多个 radio 组成
+
+
+事件
+
+| 事件名           | 说明                |
+| ----------------| ------------------ |
+| bindchange      | radio-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 radio 的 value 的数组 ] } |
+
+
+### label
+用来改进表单组件的可用性
+
+
+注意事项
+
+1. 当前不支持使用 for 属性找到对应 id，仅支持将控件放在该标签内，目前可以绑定的空间有：checkbox、radio、switch。
+
+
+### icon
+图标组件
+
+
+属性
+
+| 属性名                   | 类型     | 默认值         | 说明                                                       |
+| ----------------------- | ------- | ------------- | ---------------------------------------------------------- |
+| type      | String  |               | icon 的类型，有效值：success、success_no_circle、info、warn、waiting、cancel、download、search、clear |
+| size      | String \| Number  |     23    | icon 的大小 |
+| color		  | String  |         | icon 的颜色，同 css 的 color |
+
+
+### movable-area
+movable-view的可移动区域。
+
+注意事项
+
+1. movable-area不支持设置 scale-area，缩放手势生效区域仅在 movable-view 内
+
+### movable-view
+可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。
+
+
+属性
+
+| 属性名 | 类型             | 默认值 | 说明                                                                                                  |
+| ------ | ---------------- | ------ | ----------------------------------------------------------------------------------------------------- |
+| direction   | String           |   none     | 目前支持 all、vertical、horizontal、none｜
+| x   | Number |      | 定义x轴方向的偏移  |
+| y  | Number  |        | 定义y轴方向的偏移 |
+|friction  | Number  |    7    | 摩擦系数 |
+|disabled  | boolean  |    false    | 是否禁用 |
+|scale  | boolean  |   false   | 是否支持双指缩放 |
+|scale-min  | Number  |    0.1    | 定义缩放倍数最小值 |
+|scale-max  | Number  |    10    | 定义缩放倍数最大值 |
+|scale-value | Number  |    1    | 定义缩放倍数，取值范围为 0.1 - 10 |
+
+事件
+
+| 事件名               | 说明                                       |
+| -------------------- | ------------------------------------------ |
+| bindchange        | 拖动过程中触发的事件，event.detail = {x, y, source} |
+| bindscale         | 缩放过程中触发的事件，event.detail = {x, y, scale}    |
+| htouchmove          | 初次手指触摸后移动为横向的移动时触发 |
+| vtouchmove    | 初次手指触摸后移动为纵向的移动时触发                      |
+
+### form
+表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。
+
+当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
+
+事件
+
+| 事件名     | 说明                                                |
+| ---------- | --------------------------------------------------- |
+| bindsubmit | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} } |
+| bindreset  | 表单重置时会触发 reset 事件 |
+
+### cover-view
+视图容器。
+功能同 view 组件
+
+### cover-image
+视图容器。
+功能同 image 组件
+| bindchange      | 滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）|
+
+
+### picker-view
+嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示
+
+属性
+
+| 属性名                   | 类型               | 默认值              | 说明                                 |
+| ----------------------- | ------------------| ------------------ | ------------------------------------|
+| value                   | Array[number]      | `false`           | 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。                    |
+
+
+事件
+
+| 事件名           | 说明                |
+| ----------------| ------------------ |
+| bindchange      | checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] } |
+
+### picker-view-column
+滚动选择器子项。仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致
+
+
+### picker
+从底部弹起的滚动选择器。
+
+属性
+
+| 属性名                  | 类型         | 默认值             | 说明                           |
+| -----------------------| ------------| ------------------ | -----------------------------|
+| mode                   | string      | `selector`         | 选择器类型                     |
+| disabled               | boolean     | `false`            | 是否禁用                       |
+
+公共事件
+
+| 事件名           | 说明                |
+| ----------------| ------------------ |
+| bindcancel      | 取消选择时触发       |
+| bindchange      | 滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）|
+
+#### 普通选择器：mode = selector
+
+属性
+
+| 属性名                  | 类型                     | 默认值         | 说明                           |
+| -----------------------| ------------------------| ------------- | -----------------------------|
+| range                  | array[object]/array     | `[]`          | mode 为 selector 或 multiSelector 时，range 有效 |
+| range-key              | string                  | `false`       | 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |
+| value                  | number                  | 0             | 表示选择了 range 中的第几个（下标从 0 开始）|
+
+#### 多列选择器：mode = multiSelector
+属性
+
+| 属性名                  | 类型                     | 默认值         | 说明                           |
+| -----------------------| ------------------------| ------------- | -----------------------------|
+| range                  | array[object]/array     | `[]`          | mode 为 selector 或 multiSelector 时，range 有效 |
+| range-key              | string                  | `false`       | 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |
+| value                  | array                   | `[]`          | 表示选择了 range 中的第几个（下标从 0 开始）|
+| bindcolumnchange       |                         |               | 列改变时触发|
+
+#### 多列选择器：时间选择器：mode = time
+属性
+
+| 属性名                  | 类型                     | 默认值         | 说明                           |
+| -----------------------| ------------------------| ------------- | -----------------------------|
+| value                  | string                  | `[]`          | 表示选中的时间，格式为"hh:mm" |
+| start                  | string                  | `false`       | 表示有效时间范围的开始，字符串格式为"hh:mm" |
+| end                    | string                   | `[]`         | 表示有效时间范围的结束，字符串格式为"hh:mm"|
+
+#### 多列选择器：时间选择器：mode = date
+属性
+
+| 属性名                  | 类型                     | 默认值         | 说明                                      |
+| -----------------------| ------------------------| ------------- | ------------------------------------------|
+| value                  | string                  | `当天`         | 表示选中的日期，格式为"YYYY-MM-DD"            |
+| start                  | string                  | `false`       | 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" |
+| end                    | string                   | `[]`         | 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" |
+| fields                 | string                   | `day`        | 有效值 year,month,day，表示选择器的粒度        |
+
+#### fields 有效值：
+| 属性名                  | 说明                     |
+| -----------------------| ------------------------ | 
+| year                   | 选择器粒度为年             | 
+| month                  | 选择器粒度为月份           |
+| day                   | 选择器粒度为天              |
+
+### 省市区选择器：mode = region
+属性
+
+| 属性名                  | 类型                     | 默认值         | 说明                                      |
+| -----------------------| ------------------------| ------------- | ------------------------------------------|
+| value                  | array                   | `[]`          | 表示选中的省市区，默认选中每一列的第一个值       |
+| custom-item            | string                  |               | 可为每一列的顶部添加一个自定义的项              |
+| level                  | string                  | `region`      | 选择器层级                                  |
+
+#### level 有效值：
+| 属性名                  | 说明                     |
+| -----------------------| ------------------------ | 
+| province               | 选省级选择器               | 
+| city                   | 市级选择器                 |
+| region                 | 区级选择器                 |
+
+
+
+
+
+
+

packages/webpack-plugin/lib/platform/template/wx/component-config/checkbox-group.js

@@ -6,6 +6,14 @@ module.exports = function () {
     web (tag, { el }) {
       el.isBuiltIn = true
       return 'mpx-checkbox-group'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-checkbox-group'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-checkbox-group'
     }
   }
 }

packages/webpack-plugin/lib/platform/template/wx/component-config/checkbox.js

@@ -7,6 +7,14 @@ module.exports = function () {
       el.isBuiltIn = true
       return 'mpx-checkbox'
     },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-checkbox'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-checkbox'
+    },
     event: [
       {
         test: 'tap',

packages/webpack-plugin/lib/platform/template/wx/component-config/cover-image.js

@@ -2,6 +2,8 @@ const TAG_NAME = 'cover-image'
 
 module.exports = function ({ print }) {
   const aliEventLog = print({ platform: 'ali', tag: TAG_NAME, isError: false, type: 'event' })
+  const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
+  const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
   return {
     test: TAG_NAME,
     web (tag, { el }) {
@@ -11,12 +13,25 @@ module.exports = function ({ print }) {
     tt () {
       return 'image'
     },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-image'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-image'
+    },
     props: [
       {
         test: 'use-built-in',
         web (prop, { el }) {
           el.isBuiltIn = true
         }
+      },
+      {
+        test: /^(referrer-policy)$/,
+        ios: iosPropLog,
+        android: androidPropLog
       }
     ],
     event: [

packages/webpack-plugin/lib/platform/template/wx/component-config/cover-view.js

@@ -4,6 +4,7 @@ module.exports = function ({ print }) {
   const aliPropLog = print({ platform: 'ali', tag: TAG_NAME, isError: false })
   const baiduValueLogError = print({ platform: 'baidu', tag: TAG_NAME, isError: true, type: 'value' })
   const webPropLog = print({ platform: 'web', tag: TAG_NAME, isError: false })
+
   return {
     test: TAG_NAME,
     web (tag, { el }) {
@@ -19,6 +20,14 @@ module.exports = function ({ print }) {
     tt () {
       return 'view'
     },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-view'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-view'
+    },
     props: [
       {
         test: 'scroll-top',

packages/webpack-plugin/lib/platform/template/wx/component-config/form.js

@@ -7,6 +7,8 @@ module.exports = function ({ print }) {
   const jdPropLog = print({ platform: 'jd', tag: TAG_NAME, isError: false })
   const webPropLog = print({ platform: 'web', tag: TAG_NAME, isError: false })
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
+  const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
+  const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
 
   return {
     test: TAG_NAME,
@@ -15,6 +17,14 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-form'
     },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-form'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-form'
+    },
     props: [
       {
         test: /^(report-submit-timeout)$/,
@@ -26,7 +36,9 @@ module.exports = function ({ print }) {
       {
         test: /^(report-submit|report-submit-timeout)$/,
         web: webPropLog,
-        qa: qaPropLog
+        qa: qaPropLog,
+        ios: iosPropLog,
+        android: androidPropLog
       }
     ]
   }

packages/webpack-plugin/lib/platform/template/wx/component-config/icon.js

@@ -6,6 +6,14 @@ module.exports = function () {
     web (tag, { el }) {
       el.isBuiltIn = true
       return 'mpx-icon'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-icon'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-icon'
     }
   }
 }

packages/webpack-plugin/lib/platform/template/wx/component-config/index.js

@@ -37,9 +37,11 @@ const unsupported = require('./unsupported')
 const video = require('./video')
 const view = require('./view')
 const webView = require('./web-view')
+const label = require('./label')
 const wxs = require('./wxs')
 const component = require('./component')
 const fixComponentName = require('./fix-component-name')
+const rootPortal = require('./root-portal')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -121,6 +123,8 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     livePlayer({ print }),
     livePusher({ print }),
     hyphenTagName({ print }),
-    component()
+    label({ print }),
+    component(),
+    rootPortal({ print })
   ]
 }