perf(col): use wxs (#3886)

example/project.config.json

@@ -48,12 +48,6 @@
   "simulatorType": "wechat",
   "simulatorPluginLibVersion": {},
   "condition": {
-    "search": {
-      "list": []
-    },
-    "conversation": {
-      "list": []
-    },
     "plugin": {
       "list": []
     },
@@ -391,6 +385,17 @@
           "pathName": "pages/share-sheet/index",
           "query": "",
           "scene": null
+        },
+        {
+          "name": "col",
+          "pathName": "pages/col/index",
+          "query": "",
+          "scene": null
+        },
+        {
+          "name": "divider",
+          "pathName": "pages/divider/index",
+          "scene": null
         }
       ]
     }

packages/col/index.ts

@@ -11,21 +11,4 @@ VantComponent({
     span: Number,
     offset: Number,
   },
-
-  data: {
-    viewStyle: '',
-  },
-
-  methods: {
-    setGutter(gutter: number) {
-      const padding = `${gutter / 2}px`;
-      const viewStyle = gutter
-        ? `padding-left: ${padding}; padding-right: ${padding};`
-        : '';
-
-      if (viewStyle !== this.data.viewStyle) {
-        this.setData({ viewStyle });
-      }
-    },
-  },
 });

packages/col/index.wxml

@@ -1,8 +1,9 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="custom-class {{ utils.bem('col', [span]) }} {{ offset ? 'van-col--offset-' + offset : '' }}"
-  style="{{ viewStyle }}"
+  style="{{ computed.rootStyle({ gutter }) }}"
 >
   <slot />
 </view>

packages/col/index.wxs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  if (!data.gutter) {
+    return '';
+  }
+
+  return style({
+    'padding-right': addUnit(data.gutter / 2),
+    'padding-left': addUnit(data.gutter / 2),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

packages/row/index.ts

@@ -6,8 +6,10 @@ VantComponent({
     type: 'descendant',
     current: 'row',
     linked(target) {
-      if (this.data.gutter) {
-        target.setGutter(this.data.gutter);
+      const { gutter } = this.data;
+
+      if (gutter) {
+        target.setData({ gutter });
       }
     },
   },
@@ -19,27 +21,10 @@ VantComponent({
     },
   },
 
-  data: {
-    viewStyle: '',
-  },
-
-  mounted() {
-    if (this.data.gutter) {
-      this.setGutter();
-    }
-  },
-
   methods: {
     setGutter() {
-      const { gutter } = this.data;
-      const margin = `-${Number(gutter) / 2}px`;
-      const viewStyle = gutter
-        ? `margin-right: ${margin}; margin-left: ${margin};`
-        : '';
-
-      this.setData({ viewStyle });
       this.getRelationNodes('../col/index').forEach((col) => {
-        col.setGutter(this.data.gutter);
+        col.setData(this.data.gutter);
       });
     },
   },

packages/row/index.wxml

@@ -1,3 +1,5 @@
-<view class="custom-class van-row" style="{{ viewStyle }}">
+<wxs src="./index.wxs" module="computed" />
+
+<view class="van-row custom-class" style="{{ computed.rootStyle({ gutter }) }}">
   <slot />
 </view>

packages/row/index.wxs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  if (!data.gutter) {
+    return '';
+  }
+
+  return style({
+    'margin-right': addUnit(-data.gutter / 2),
+    'margin-left': addUnit(-data.gutter / 2),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

packages/wxs/add-unit.wxs

@@ -1,5 +1,5 @@
 /* eslint-disable */
-var REGEXP = getRegExp('^\d+(\.\d+)?$');
+var REGEXP = getRegExp('^-?\d+(\.\d+)?$');
 
 function addUnit(value) {
   if (value == null) {

packages/wxs/style.wxs

@@ -6,7 +6,7 @@ function style(styles) {
   if (array.isArray(styles)) {
     return styles
       .filter(function (item) {
-        return item != null;
+        return item != null && item !== '';
       })
       .map(function (item) {
         return style(item);
@@ -18,7 +18,7 @@ function style(styles) {
     return object
       .keys(styles)
       .filter(function (key) {
-        return styles[key] != null;
+        return styles[key] != null && styles[key] !== '';
       })
       .map(function (key) {
         return [key, [styles[key]]].join(':');