Feature/tabs data config

package.json

@@ -23,6 +23,7 @@
     "check": "node bin/ggpull && node bin/check-deps",
     "dev:vusion": "cross-env scene=desktop vue-cli-service doc --port 9100",
     "dev": "cross-env scene=desktop vant-cli dev",
+    "dev:error03000086": "set NODE_OPTIONS=--openssl-legacy-provider && cross-env scene=desktop vant-cli dev",
     "dev:mobile": "cross-env scene=mobile vant-cli dev",
     "lint": "vant-cli lint",
     "test": "vant-cli test",
@@ -41,7 +42,7 @@
     "screenshot": "node bin/screenshot",
     "genThemeConfig": "node ./scripts/genThemeConfig/index.js",
     "deploy:dev": "lcap deploy dist-theme --platform http://defaulttenant.lcap.dev.env.com && node bin/deploy-lcp-images --platform=http://defaulttenant.lcap.dev.env.com",
-    "deploy:test": "lcap deploy dist-theme --platform http://defaulttenant.lcap.ha.test.com && node bin/deploy-lcp-images --platform=http://defaulttenant.lcap.ha.test.com",
+    "deploy:test": "lcap deploy dist-theme --platform https://defaulttenant.lcap.codewave-test.163yun.com && node bin/deploy-lcp-images --platform=https://defaulttenant.lcap.codewave-test.163yun.com",
     "deploy:test-ga": "lcap deploy dist-theme --platform http://defaulttenant.lcap.codewave-test.163yun.com && node bin/deploy-lcp-images --platform=http://defaulttenant.lcap.codewave-test.163yun.com",
     "deploy:pre": "lcap deploy dist-theme --platform https://defaulttenant.lcap.hadri.163yun.com && node bin/deploy-lcp-images --platform=https://defaulttenant.lcap.hadri.163yun.com",
     "deploy:online": "lcap deploy dist-theme --platform http://netease-template.lcap.163yun.com &&  node bin/deploy-lcp-images --platform=http://netease-template.lcap.163yun.com",

scripts/genThemeConfig/result.json

@@ -774,6 +774,13 @@
                         "excludeTags": [
                             "van-tab"
                         ]
+                    },
+                    "--van-tabs-card-nav-margin": {
+                        "type": "input",
+                        "desc": "card模式 导航外边距",
+                        "excludeTags": [
+                            "van-tab"
+                        ]
                     }
                 },
                 "preview": {

src/mixins/support.datasource.js

@@ -2,11 +2,10 @@ import { formatResult } from "../utils/format/data-source";
 
 export default {
   props: {
-    dataSource: [Array, Function, Object],
+    dataSource: [Array, Function, Object], /* 数据源 */
     dataSchema: { type: String, default: 'entity' },
-    valueField: { type: String, default: 'value' },
+    valueField: { type: String, default: 'value' }, /* 标签项标题值字段 */
     textField: { type: String, default: 'text' },
-
     parentField: { type: String, default: 'parentId' },
     childrenField: { type: String, default: 'children' },
   },

src/tab/demo/index.vue

@@ -128,6 +128,16 @@
         </van-tab>
       </van-tabs>
     </demo-block>
+
+    <!-- dataSource -->
+    <demo-block :title="t('dataSourceJson')">
+      <van-tabs :dataSource="tabList" textField="title2"></van-tabs>
+    </demo-block>
+
+    <demo-block :title="t('dataSourceLoad')">
+      <van-tabs :dataSource="load" textField="title2"></van-tabs>
+    </demo-block>
+
   </demo-section>
 </template>
 
@@ -148,6 +158,8 @@ export default {
       disabled: ' 已被禁用',
       matchByName: '通过名称匹配',
       beforeChange: '异步切换',
+      dataSourceJson: '数据源固定',
+      dataSourceLoad: '数据源异步',
     },
     'en-US': {
       tab: 'Tab ',
@@ -164,6 +176,8 @@ export default {
       disabled: ' is disabled',
       matchByName: 'Match By Name',
       beforeChange: 'Before Change',
+      dataSourceJson: 'dataSourceJson',
+      dataSourceLoad: 'dataSourceLoad',
     },
   },
 
@@ -173,6 +187,28 @@ export default {
       active2222: '2',
       activeName: 'b',
       tabs: [1, 2, 3, 4],
+      tabList: [
+        {
+            title2: 'AAA-',
+            value: 1,
+            contentUrl: '/components/u-tabs/cases',
+            textField: 'title2',
+        },
+        {
+            title2: 'BBB-',
+            value: 2,
+            contentUrl: '/components/u-tabs/cases#形态',
+            textField: 'title2',
+        },
+        {
+            title2: '标签页-',
+            value: 3,
+            contentUrl: '/components/u-tabs/cases#添加',
+            textField: 'title2',
+            // disabled: true,
+        }
+      ]
+
     };
   },
 
@@ -196,6 +232,19 @@ export default {
         resolve(name !== 3);
       });
     },
+    load() {
+      // 这里使用 Promise 和 setTimeout 模拟一个异步请求
+      const index = Math.random() * 20 >> 0;
+      return new Promise((resolve, reject) => {
+          setTimeout(() => {
+              resolve(this.tabList.map((item)=>{
+                  const newItem = Object.assign({}, item);
+                  newItem.title2 = `${item.title2}${index}`;
+                  return newItem;
+              }));
+          }, 200);
+      });
+    },
   },
 };
 </script>
@@ -219,5 +268,6 @@ export default {
   .van-tabs--card .van-tab__pane {
     background-color: transparent;
   }
+
 }
 </style>

src/tab/index.js

@@ -65,6 +65,7 @@ export default createComponent({
   render(h) {
     const { slots, parent, isActive } = this;
     const slotContent = slots();
+
     let tempContent = slotContent;
     if (process.env.NODE_ENV === 'development' && this.info) {
       console.warn(

src/tabs/api.yaml

@@ -5,12 +5,39 @@
     - Selector
   description: 选项卡切换组件，常用于平级区域大块内容的收纳和展现
   attrs:
+    - name: data-source
+      title: 数据源
+      type: Array<Item> | Function
+      description: 展示数据的输入源，可设置为集合类型变量（List<T>）或输出参数为集合类型的逻辑
+      designer-value: '[{}, {}, {}]'
+      group: 数据属性
+    - name: data-schema
+      title: 数据类型
+      type: schema
+      description: 集合类型每一元素的数据类型
+      compType: dataTypeSelect
+      group: 数据属性
     - name: value
       title: 值
       type: any
       sync: true
       model: true
       description: 选中标签页的值。
+      group: 数据属性
+    - name: text-field
+      title: 标签项标题
+      type: string
+      description: 数据源集合的元素，用于显示标签标题的属性
+      default: text
+      group: 数据属性
+      display: property-select
+    - name: url-field
+      title: 标签项内容值字段
+      type: string
+      description: 数据源集合的元素，用于标识当前打开的标签项
+      default: url
+      group: 数据属性
+      display: property-select
     - name: disabled
       title: 禁用
       type: boolean