perf(switch): use wxs (#3889)

packages/switch/index.ts

@@ -1,5 +1,4 @@
 import { VantComponent } from '../common/component';
-import { BLUE, GRAY_DARK } from '../common/color';
 
 VantComponent({
   field: true,
@@ -7,20 +6,14 @@ VantComponent({
   classes: ['node-class'],
 
   props: {
-    checked: {
-      type: null,
-      observer(value) {
-        const loadingColor = this.getLoadingColor(value);
-        this.setData({ value, loadingColor });
-      },
-    },
+    checked: null,
     loading: Boolean,
     disabled: Boolean,
     activeColor: String,
     inactiveColor: String,
     size: {
       type: String,
-      value: '30px',
+      value: '30',
     },
     activeValue: {
       type: null,
@@ -32,27 +25,19 @@ VantComponent({
     },
   },
 
-  created() {
-    const { checked: value } = this.data;
-    const loadingColor = this.getLoadingColor(value);
-
-    this.setData({ value, loadingColor });
-  },
-
   methods: {
-    getLoadingColor(checked) {
-      const { activeColor, inactiveColor } = this.data;
-      return checked ? activeColor || BLUE : inactiveColor || GRAY_DARK;
-    },
-
     onClick() {
-      const { activeValue, inactiveValue } = this.data;
-      if (!this.data.disabled && !this.data.loading) {
-        const checked = this.data.checked === activeValue;
-        const value = checked ? inactiveValue : activeValue;
-        this.$emit('input', value);
-        this.$emit('change', value);
+      const { activeValue, inactiveValue, disabled, loading } = this.data;
+
+      if (disabled || loading) {
+        return;
       }
+
+      const checked = this.data.checked === activeValue;
+      const value = checked ? inactiveValue : activeValue;
+
+      this.$emit('input', value);
+      this.$emit('change', value);
     },
   },
 });

packages/switch/index.wxml

@@ -1,11 +1,16 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
-  class="custom-class {{ utils.bem('switch', { on: value === activeValue, disabled }) }}"
-  style="font-size: {{ size }}; {{ (checked ? activeColor : inactiveColor) ? 'background-color: ' + (checked ? activeColor : inactiveColor ) : '' }}"
+  class="{{ utils.bem('switch', { on: checked === activeValue, disabled }) }} custom-class"
+  style="{{ computed.rootStyle({ size, checked, activeColor, inactiveColor }) }}"
   bind:tap="onClick"
 >
   <view class="van-switch__node node-class">
-    <van-loading wx:if="{{ loading }}" color="{{ loadingColor }}" custom-class="van-switch__loading" />
+    <van-loading
+      wx:if="{{ loading }}"
+      color="{{ computed.loadingColor({ checked, activeColor, inactiveColor }) }}"
+      custom-class="van-switch__loading"
+    />
   </view>
 </view>

packages/switch/index.wxs

@@ -0,0 +1,26 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  var currentColor = data.checked ? data.activeColor : data.inactiveColor;
+
+  return style({
+    'font-size': addUnit(data.size),
+    'background-color': currentColor,
+  });
+}
+
+var BLUE = '#1989fa';
+var GRAY_DARK = '#969799';
+
+function loadingColor(data) {
+  return data.checked
+    ? data.activeColor || BLUE
+    : data.inactiveColor || GRAY_DARK;
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  loadingColor: loadingColor,
+};