[improvement] create emitter (#3656)

packages/dropdown-item/index.js

@@ -54,6 +54,14 @@ export default sfc({
     }
   },
 
+  beforeCreate() {
+    const createEmitter = eventName => () => this.$emit(eventName);
+
+    this.onOpen = createEmitter('open');
+    this.onClose = createEmitter('close');
+    this.onOpened = createEmitter('opened');
+  },
+
   render(h) {
     const {
       zIndex,
@@ -87,8 +95,6 @@ export default sfc({
       );
     });
 
-    const emit = eventName => () => this.$emit(eventName);
-
     const style = { zIndex };
     if (direction === 'down') {
       style.top = `${offset}px`;
@@ -100,15 +106,15 @@ export default sfc({
       <div vShow={this.showWrapper} style={style} class={bem([direction])}>
         <Popup
           vModel={this.showPopup}
+          overlay={overlay}
+          class={bem('content')}
           position={direction === 'down' ? 'top' : 'bottom'}
           duration={this.transition ? duration : 0}
-          class={bem('content')}
-          overlay={overlay}
           closeOnClickOverlay={closeOnClickOverlay}
           overlayStyle={{ position: 'absolute' }}
-          onOpen={emit('open')}
+          onOpen={this.onOpen}
-          onOpened={emit('opened')}
+          onClose={this.onClose}
-          onClose={emit('close')}
+          onOpened={this.onOpened}
           onClosed={() => {
             this.transition = true;
             this.showWrapper = false;

packages/popup/index.js

@@ -26,13 +26,20 @@ export default sfc({
     }
   },
 
+  beforeCreate() {
+    const createEmitter = eventName => event => this.$emit(eventName, event);
+
+    this.onClick = createEmitter('click');
+    this.onOpened = createEmitter('opened');
+    this.onClosed = createEmitter('closed');
+  },
+
   render(h) {
     if (!this.shouldRender) {
       return;
     }
 
     const { position, duration } = this;
-    const emit = eventName => event => this.$emit(eventName, event);
 
     const transitionName =
       this.transition ||
@@ -46,14 +53,14 @@ export default sfc({
     return (
       <transition
         name={transitionName}
-        onAfterEnter={emit('opened')}
+        onAfterEnter={this.onOpened}
-        onAfterLeave={emit('closed')}
+        onAfterLeave={this.onClosed}
       >
         <div
           vShow={this.value}
           style={style}
           class={bem({ [position]: position })}
-          onClick={emit('click')}
+          onClick={this.onClick}
         >
           {this.slots()}
         </div>

packages/sku/components/SkuActions.tsx

@@ -20,7 +20,7 @@ function SkuActions(
   slots: DefaultSlots,
   ctx: RenderContext<SkuActionsProps>
 ) {
-  const emit = (name: string) => () => {
+  const createEmitter = (name: string) => () => {
     props.skuEventBus.$emit(name);
   };
 
@@ -32,7 +32,7 @@ function SkuActions(
           size="large"
           type="warning"
           text="加入购物车"
-          onClick={emit('sku:addCart')}
+          onClick={createEmitter('sku:addCart')}
         />
       )}
       <Button
@@ -40,7 +40,7 @@ function SkuActions(
         size="large"
         type="danger"
         text={props.buyText || '立即购买'}
-        onClick={emit('sku:buy')}
+        onClick={createEmitter('sku:buy')}
       />
     </div>
   );