[improvement] optimize listeners

packages/address-list/Item.tsx

@@ -36,11 +36,11 @@ function AddressItem(
 ) {
   const { disabled, switchable } = props;
 
-  const onSelect = () => {
+  function onSelect() {
     if (props.switchable) {
       emit(ctx, 'select');
     }
-  };
+  }
 
   const renderRightIcon = () => (
     <Icon

packages/button/index.tsx

@@ -43,16 +43,16 @@ function Button(
 ) {
   const { tag, type, disabled, loading, hairline, loadingText } = props;
 
-  const onClick = (event: Event) => {
+  function onClick(event: Event) {
     if (!loading && !disabled) {
       emit(ctx, 'click', event);
       functionalRoute(ctx);
     }
-  };
+  }
 
-  const onTouchstart = (event: TouchEvent) => {
+  function onTouchstart(event: TouchEvent) {
     emit(ctx, 'touchstart', event);
-  };
+  }
 
   const classes = [
     bem([

packages/cell/index.tsx

@@ -74,10 +74,10 @@ function Cell(
         />
     );
 
-  const onClick = (event: Event) => {
+  function onClick(event: Event) {
     emit(ctx, 'click', event);
     functionalRoute(ctx);
-  };
+  }
 
   const classes: Mods = {
     center: props.center,

packages/contact-card/index.tsx

@@ -24,6 +24,12 @@ function ContactCard(
 ) {
   const { type, editable } = props;
 
+  function onClick(event: Event) {
+    if (editable) {
+      emit(ctx, 'click', event);
+    }
+  }
+
   return (
     <Cell
       center
@@ -32,11 +38,7 @@ function ContactCard(
       class={bem([type])}
       valueClass={bem('value')}
       icon={type === 'edit' ? 'contact' : 'add-square'}
-      onClick={(event: Event) => {
+      onClick={onClick}
-        if (editable) {
-          emit(ctx, 'click', event);
-        }
-      }}
       {...inherit(ctx)}
     >
       {type === 'add'

packages/goods-action-button/index.tsx

@@ -23,10 +23,10 @@ function GoodsActionButton(
   slots: DefaultSlots,
   ctx: RenderContext<GoodsActionButtonProps>
 ) {
-  const onClick = (event: Event) => {
+  function onClick(event: Event) {
     emit(ctx, 'click', event);
     functionalRoute(ctx);
-  };
+  }
 
   return (
     <Button

packages/goods-action-icon/index.tsx

@@ -22,10 +22,10 @@ function GoodsActionIcon(
   slots: DefaultSlots,
   ctx: RenderContext<GoodsActionIconProps>
 ) {
-  const onClick = (event: Event) => {
+  function onClick(event: Event) {
     emit(ctx, 'click', event);
     functionalRoute(ctx);
-  };
+  }
 
   return (
     <div class={[bem(), 'van-hairline']} onClick={onClick} {...inherit(ctx)}>

packages/loading/index.tsx

@@ -28,7 +28,7 @@ function Loading(
 
   const style: { [key: string]: string } = { color };
   if (size) {
-    const iconSize = suffixPx(size);
+    const iconSize = suffixPx(size) as string;
     style.width = iconSize;
     style.height = iconSize;
   }

packages/overlay/index.tsx

@@ -18,6 +18,11 @@ export type OverlayEvents = {
 
 const [sfc, bem] = use('overlay');
 
+function preventTouchMove(event: TouchEvent) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
 function Overlay(
   h: CreateElement,
   props: OverlayProps,
@@ -35,10 +40,7 @@ function Overlay(
         vShow={props.visible}
         style={style}
         class={[bem(), props.className]}
-        onTouchmove={(event: TouchEvent) => {
+        onTouchmove={preventTouchMove}
-          event.preventDefault();
-          event.stopPropagation();
-        }}
         {...inherit(ctx, true)}
       />
     </transition>

packages/popup/zh-CN.md

@@ -46,7 +46,7 @@ export default {
 | position | 位置，可选值为 `top` `bottom` <br> `right` `left` | `String` | `center` | - |
 | overlay-class | 自定义蒙层类名 | `String` | - | - |
 | overlay-style | 自定义蒙层样式 | `Object` | - | - |
-| transition | transition 名称 | `String` | - | - |
+| transition | 动画类名，用法与原生`transtion`组件的`name`属性一致 | `String` | - | - |
 | get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | - | - |
 | close-on-click-overlay | 是否在点击蒙层后关闭 | `Boolean` | `true` | - |
 | lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` | 1.0.0 |

packages/search/index.tsx

@@ -35,30 +35,28 @@ function Search(
   slots: SearchSlots,
   ctx: RenderContext<SearchProps>
 ) {
-  const Label = () => {
+  function Label() {
-    if (!slots.label && !props.label) {
+    if (slots.label || props.label) {
-      return null;
-    }
-
       return <div class={bem('label')}>{slots.label ? slots.label() : props.label}</div>;
-  };
+    }
-
-  const Action = () => {
-    if (!props.showAction) {
-      return null;
   }
 
-    const onCancel = () => {
+  function Action() {
+    if (!props.showAction) {
+      return;
+    }
+
+    function onCancel() {
       emit(ctx, 'input', '');
       emit(ctx, 'cancel');
-    };
+    }
 
     return (
       <div class={bem('action')}>
         {slots.action ? slots.action() : <div onClick={onCancel}>{t('cancel')}</div>}
       </div>
     );
-  };
+  }
 
   const fieldData = {
     attrs: ctx.data.attrs,

packages/switch/index.tsx

@@ -26,13 +26,13 @@ function Switch(
     backgroundColor: value ? props.activeColor : props.inactiveColor
   };
 
-  const onClick = () => {
+  function onClick() {
     if (!disabled && !loading) {
       const newValue = value === activeValue ? inactiveValue : activeValue;
       emit(ctx, 'input', newValue);
       emit(ctx, 'change', newValue);
     }
-  };
+  }
 
   return (
     <div