perf(picker): use wxs (#3949)

packages/picker-column/index.wxml

@@ -1,22 +1,23 @@
-<wxs src="./index.wxs" module="getOptionText" />
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="van-picker-column custom-class"
-  style="height: {{ itemHeight * visibleItemCount }}px"
+  style="{{ computed.rootStyle({ itemHeight, visibleItemCount }) }}"
   bind:touchstart="onTouchStart"
   catch:touchmove="onTouchMove"
   bind:touchend="onTouchEnd"
   bind:touchcancel="onTouchEnd"
 >
-  <view style="transition: transform {{ duration }}ms; line-height: {{ itemHeight }}px; transform: translate3d(0, {{ offset + (itemHeight * (visibleItemCount - 1)) / 2 }}px, 0)">
+  <view style="{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount }) }}">
     <view
       wx:for="{{ options }}"
       wx:for-item="option"
       wx:key="index"
       data-index="{{ index }}"
       style="height: {{ itemHeight }}px"
-      class="van-ellipsis van-picker-column__item {{ option && option.disabled ? 'van-picker-column__item--disabled' : '' }} {{ index === currentIndex ? 'van-picker-column__item--selected active-class' : '' }}"
+      class="van-ellipsis {{ utils.bem('picker-column__item', { disabled: option && option.disabled, selected: index === currentIndex }) }} {{ index === currentIndex ? 'active-class' : '' }}"
       bindtap="onClickItem"
-    >{{ getOptionText(option, valueKey) }}</view>
+    >{{ computed.optionText(option, valueKey) }}</view>
   </view>
 </view>

packages/picker-column/index.wxs

@@ -1,8 +1,36 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
 function isObj(x) {
   var type = typeof x;
   return x !== null && (type === 'object' || type === 'function');
 }
 
-module.exports = function (option, valueKey) {
+function optionText(option, valueKey) {
   return isObj(option) && option[valueKey] != null ? option[valueKey] : option;
 }
+
+function rootStyle(data) {
+  return style({
+    height: addUnit(data.itemHeight * data.visibleItemCount),
+  });
+}
+
+function wrapperStyle(data) {
+  var offset = addUnit(
+    data.offset + (data.itemHeight * (data.visibleItemCount - 1)) / 2
+  );
+
+  return style({
+    transition: 'transform ' + data.duration + 'ms',
+    'line-height': addUnit(data.itemHeight),
+    transform: 'translate3d(0, ' + offset + ', 0)',
+  });
+}
+
+module.exports = {
+  optionText: optionText,
+  rootStyle: rootStyle,
+  wrapperStyle: wrapperStyle,
+};

packages/picker/index.ts

@@ -28,7 +28,6 @@ VantComponent({
       value: [],
       observer(columns = []) {
         this.simple = columns.length && !columns[0].values;
-        this.children = this.selectAllComponents('.van-picker__column');
 
         if (Array.isArray(this.children) && this.children.length) {
           this.setColumns().catch(() => {});
@@ -38,7 +37,9 @@ VantComponent({
   },
 
   beforeCreate() {
-    this.children = [];
+    Object.defineProperty(this, 'children', {
+      get: () => this.selectAllComponents('.van-picker__column') || [],
+    });
   },
 
   methods: {

packages/picker/index.wxml

@@ -1,41 +1,37 @@
-<import src="./toolbar.wxml" />
+<wxs src="./index.wxs" module="computed" />
 
 <view class="van-picker custom-class">
-  <template is="toolbar" wx:if="{{ toolbarPosition === 'top' }}" data="{{ showToolbar, cancelButtonText, title, confirmButtonText }}"></template>
+  <include wx:if="{{ toolbarPosition === 'top' }}" src="toolbar.wxml" />
+
   <view wx:if="{{ loading }}" class="van-picker__loading">
     <loading color="#1989fa"/>
   </view>
+
   <view
     class="van-picker__columns"
-    style="height: {{ itemHeight * visibleItemCount }}px"
+    style="{{ computed.columnsStyle({ itemHeight, visibleItemCount }) }}"
     catch:touchmove="noop"
   >
     <picker-column
       class="van-picker__column"
-      wx:for="{{ isSimple(columns) ? [columns] : columns }}"
+      wx:for="{{ computed.columns(columns) }}"
       wx:key="index"
       data-index="{{ index }}"
       custom-class="column-class"
       value-key="{{ valueKey }}"
-      initial-options="{{ isSimple(columns) ? item : item.values }}"
+      initial-options="{{ item.values }}"
       default-index="{{ item.defaultIndex || defaultIndex }}"
       item-height="{{ itemHeight }}"
       visible-item-count="{{ visibleItemCount }}"
       active-class="active-class"
       bind:change="onChange"
     />
-    <view class="van-picker__mask" style="background-size: 100% {{ (itemHeight * visibleItemCount - itemHeight) / 2 }}px" />
+    <view class="van-picker__mask" style="{{ computed.maskStyle({ itemHeight, visibleItemCount }) }}" />
     <view
       class="van-picker__frame van-hairline--top-bottom"
-      style="height: {{ itemHeight }}px"
+      style="{{ computed.frameStyle({ itemHeight }) }}"
     />
   </view>
-  <template is="toolbar" wx:if="{{ toolbarPosition === 'bottom' }}" data="{{ showToolbar, cancelButtonText, title, confirmButtonText }}"></template>
-</view>
 
-<wxs module="isSimple">
+  <include wx:if="{{ toolbarPosition === 'bottom' }}" src="toolbar.wxml" />
-  function isSimple(columns) {
+</view>
-    return columns.length && !columns[0].values;
-  }
-  module.exports = isSimple;
-</wxs>

packages/picker/index.wxs

@@ -0,0 +1,42 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+var array = require('../wxs/array.wxs');
+
+function columnsStyle(data) {
+  return style({
+    height: addUnit(data.itemHeight * data.visibleItemCount),
+  });
+}
+
+function maskStyle(data) {
+  return style({
+    'background-size':
+      '100% ' + addUnit((data.itemHeight * (data.visibleItemCount - 1)) / 2),
+  });
+}
+
+function frameStyle(data) {
+  return style({
+    height: addUnit(data.itemHeight),
+  });
+}
+
+function columns(columns) {
+  if (!array.isArray(columns)) {
+    return [];
+  }
+
+  if (columns.length && !columns[0].values) {
+    return [{ values: columns }];
+  }
+
+  return columns;
+}
+
+module.exports = {
+  columnsStyle: columnsStyle,
+  frameStyle: frameStyle,
+  maskStyle: maskStyle,
+  columns: columns,
+};