perf(divider): use wxs (#3887)

packages/divider/index.ts

@@ -2,33 +2,12 @@ import { VantComponent } from '../common/component';
 
 VantComponent({
   props: {
-    dashed: {
-      type: Boolean,
-      value: false,
-    },
-    hairline: {
-      type: Boolean,
-      value: false,
-    },
-    contentPosition: {
-      type: String,
-      value: '',
-    },
-    fontSize: {
-      type: Number,
-      value: '',
-    },
-    borderColor: {
-      type: String,
-      value: '',
-    },
-    textColor: {
-      type: String,
-      value: '',
-    },
-    customStyle: {
-      type: String,
-      value: '',
-    },
+    dashed: Boolean,
+    hairline: Boolean,
+    contentPosition: String,
+    fontSize: String,
+    borderColor: String,
+    textColor: String,
+    customStyle: String,
   },
 });

packages/divider/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('divider', [{dashed, hairline}, contentPosition]) }}"
-  style="{{ borderColor  ? 'border-color: ' + borderColor + ';' : '' }}{{ textColor ? 'color: ' + textColor + ';' : '' }} {{ fontSize ? 'font-size: ' + fontSize + 'px;' : '' }} {{ customStyle }}"
+  class="custom-class {{ utils.bem('divider', [{ dashed, hairline }, contentPosition]) }}"
+  style="{{ computed.rootStyle({ borderColor, textColor, fontSize, customStyle }) }}"
 >
   <slot />
 </view>

packages/divider/index.wxs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style([
+    {
+      'border-color': data.borderColor,
+      color: data.textColor,
+      'font-size': addUnit(data.fontSize),
+    },
+    data.customStyle,
+  ]);
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};