[improvement] vue style component options (#523)

example/app.wxss

@@ -1,5 +1,3 @@
-@import "./dist/common/index.wxss";
-
 page {
   color: #333;
   background: #f8f8f8;

packages/action-sheet/index.js

@@ -1,9 +1,7 @@
-Component({
-  options: {
-    addGlobalClass: true
-  },
+import { create } from '../common/create';
 
-  properties: {
+create({
+  props: {
     show: Boolean,
     title: String,
     cancelText: String,
@@ -26,16 +24,16 @@ Component({
       const { index } = event.currentTarget.dataset;
       const item = this.data.actions[index];
       if (item && !item.disabled && !item.loading) {
-        this.triggerEvent('select', item);
+        this.$emit('select', item);
       }
     },
 
     onCancel() {
-      this.triggerEvent('cancel');
+      this.$emit('cancel');
     },
 
     onClose() {
-      this.triggerEvent('close');
+      this.$emit('close');
     }
   }
 });

packages/badge-group/index.js

@@ -1,14 +1,8 @@
-const BADGE_PATH = '../badge/index';
-
-Component({
-  options: {
-    addGlobalClass: true
-  },
-
-  externalClasses: ['custom-class'],
+import { create } from '../common/create';
 
+create({
   relations: {
-    [BADGE_PATH]: {
+    '../badge/index': {
       type: 'descendant',
 
       linked(target) {
@@ -23,13 +17,11 @@ Component({
     }
   },
 
-  properties: {
+  props: {
     active: {
       type: Number,
       value: 0,
-      observer() {
-        this.setActive();
-      }
+      observer: 'setActive'
     }
   },
 
@@ -53,7 +45,7 @@ Component({
       }
 
       if (this.currentActive !== -1) {
-        this.triggerEvent('change', active);
+        this.$emit('change', active);
       }
 
       this.currentActive = active;

packages/badge/index.js

@@ -1,26 +1,20 @@
-const BADGE_GROUP_PATH = '../badge-group/index';
-
-Component({
-  options: {
-    addGlobalClass: true
-  },
-
-  externalClasses: ['custom-class'],
+import { create } from '../common/create';
 
+create({
   relations: {
-    [BADGE_GROUP_PATH]: {
+    '../badge-group/index': {
       type: 'ancestor'
     }
   },
 
-  properties: {
+  props: {
     info: Number,
     title: String
   },
 
   methods: {
     onClick() {
-      const group = this.getRelationNodes(BADGE_GROUP_PATH)[0];
+      const group = this.getRelationNodes('../badge-group/index')[0];
       if (group) {
         group.setActive(this);
       }

packages/button/index.js

@@ -1,21 +1,16 @@
-import buttonBehaviors from '../behaviors/button';
-import classnames from '../common/classnames';
+import { create } from '../common/create';
+import { classNames } from '../common/class-names';
+import { button } from '../mixins/button';
 
 const booleanProp = {
   type: Boolean,
   observer: 'setClasses'
 };
 
-Component({
-  options: {
-    addGlobalClass: true
-  },
+create({
+  mixins: [button],
 
-  externalClasses: ['custom-class', 'loading-class'],
-
-  behaviors: [buttonBehaviors],
-
-  properties: {
+  props: {
     type: {
       type: String,
       value: 'default',
@@ -40,14 +35,14 @@ Component({
   methods: {
     onClick() {
       if (!this.data.disabled && !this.data.loading) {
-        this.triggerEvent('click');
+        this.$emit('click');
       }
     },
 
     setClasses() {
       const { type, size, plain, disabled, loading, square, block } = this.data;
       this.setData({
-        classes: classnames(`van-button--${type}`, `van-button--${size}`, {
+        classes: classNames(`van-button--${type}`, `van-button--${size}`, {
           'van-button--block': block,
           'van-button--plain': plain,
           'van-button--square': square,

packages/card/index.js

@@ -1,11 +1,7 @@
-Component({
-  options: {
-    multipleSlots: true,
-    addGlobalClass: true
-  },
+import { create } from '../common/create';
 
-  externalClasses: [
-    'custom-class',
+create({
+  classes: [
     'thumb-class',
     'title-class',
     'price-class',
@@ -13,7 +9,7 @@ Component({
     'num-class'
   ],
 
-  properties: {
+  props: {
     num: String,
     desc: String,
     thumb: String,

packages/cell-group/index.js

@@ -1,11 +1,7 @@
-Component({
-  options: {
-    addGlobalClass: true
-  },
+import { create } from '../common/create';
 
-  externalClasses: ['custom-class'],
-
-  properties: {
+create({
+  props: {
     border: {
       type: Boolean,
       value: true

packages/cell/index.js

@@ -1,6 +1,7 @@
-Component({
-  externalClasses: [
-    'custom-class',
+import { create } from '../common/create';
+
+create({
+  classes: [
     'title-class',
     'label-class',
     'value-class',
@@ -8,12 +9,7 @@ Component({
     'right-icon-class'
   ],
 
-  options: {
-    multipleSlots: true,
-    addGlobalClass: true
-  },
-
-  properties: {
+  props: {
     title: null,
     value: null,
     url: String,
@@ -42,7 +38,7 @@ Component({
       if (url) {
         wx[this.data.linkType]({ url });
       }
-      this.triggerEvent('click');
+      this.$emit('click');
     }
   }
 });

packages/col/index.js

@@ -1,19 +1,13 @@
-const ROW_PATH = '../row/index';
-
-Component({
-  options: {
-    addGlobalClass: true
-  },
-
-  externalClasses: ['custom-class'],
+import { create } from '../common/create';
 
+create({
   relations: {
-    [ROW_PATH]: {
+    '../row/index': {
       type: 'ancestor'
     }
   },
 
-  properties: {
+  props: {
     span: Number,
     offset: Number
   },

packages/common/class-names.js

@@ -1,6 +1,6 @@
 const hasOwn = {}.hasOwnProperty;
 
-export default function classNames() {
+export function classNames() {
   const classes = [];
 
   for (let i = 0; i < arguments.length; i++) {

packages/common/create.js

@@ -0,0 +1,39 @@
+function $emit() {
+  this.triggerEvent.apply(this, arguments);
+}
+
+export function create(sfc) {
+  // map props to properties
+  if (sfc.props) {
+    sfc.properties = sfc.props;
+    delete sfc.props;
+  }
+
+  // map mixins to behaviors
+  if (sfc.mixins) {
+    sfc.behaviors = sfc.mixins;
+    delete sfc.mixins;
+  }
+
+  // map field to form-field behavior
+  if (sfc.field) {
+    sfc.behaviors = sfc.behaviors || [];
+    sfc.behaviors.push('wx://form-field');
+  }
+
+  // add default options
+  sfc.options = sfc.options || {};
+  sfc.options.multipleSlots = true;
+  sfc.options.addGlobalClass = true;
+
+  // add default externalClasses
+  sfc.externalClasses = sfc.classes || [];
+  sfc.externalClasses.push('custom-class');
+
+  // add default methods
+  sfc.methods = sfc.methods || {};
+  sfc.methods.$emit = $emit;
+
+  Component(sfc);
+};
+

packages/common/index.pcss

@@ -1,8 +0,0 @@
-/**
- * Entry of basic styles
- */
-
-@import "./style/var.pcss";
-@import "./style/ellipsis.pcss";
-@import "./style/clearfix.pcss";
-@import "./style/hairline.pcss";

packages/dialog/index.js

@@ -1,9 +1,7 @@
-Component({
-  options: {
-    addGlobalClass: true
-  },
+import { create } from '../common/create';
 
-  properties: {
+create({
+  props: {
     title: String,
     message: String,
     useSlot: Boolean,
@@ -79,8 +77,8 @@ Component({
       if (!this.data.asyncClose) {
         this.setData({ show: false });
       }
-      this.triggerEvent('close', action);
-      this.triggerEvent(action);
+      this.$emit('close', action);
+      this.$emit(action);
     }
   }
 });

packages/field/index.js

@@ -1,16 +1,11 @@
-Component({
-  behaviors: ['wx://form-field'],
+import { create } from '../common/create';
 
-  externalClasses: [
-    'input-class'
-  ],
+create({
+  field: true,
 
-  options: {
-    multipleSlots: true,
-    addGlobalClass: true
-  },
+  classes: ['input-class'],
 
-  properties: {
+  props: {
     icon: String,
     label: String,
     error: Boolean,
@@ -68,8 +63,8 @@ Component({
   methods: {
     onInput(event) {
       const { value = '' } = event.detail || {};
-      this.triggerEvent('input', value);
-      this.triggerEvent('change', value);
+      this.$emit('input', value);
+      this.$emit('change', value);
       this.setData({
         value,
         showClear: this.getShowClear({ value })
@@ -77,7 +72,7 @@ Component({
     },
 
     onFocus(event) {
-      this.triggerEvent('focus', event);
+      this.$emit('focus', event);
       this.setData({
         focused: true,
         showClear: this.getShowClear({ focused: true })
@@ -86,7 +81,7 @@ Component({
 
     onBlur(event) {
       this.focused = false;
-      this.triggerEvent('blur', event);
+      this.$emit('blur', event);
       this.setData({
         focused: false,
         showClear: this.getShowClear({ focused: false })
@@ -94,16 +89,15 @@ Component({
     },
 
     onClickIcon() {
-      this.triggerEvent('click-icon');
+      this.$emit('click-icon');
     },
 
     getShowClear(options) {
-      const {
-        focused = this.data.focused,
-        value = this.data.value
-      } = options;
+      const { focused = this.data.focused, value = this.data.value } = options;
 
-      return this.data.clearable && focused && value !== '' && !this.data.readonly;
+      return (
+        this.data.clearable && focused && value !== '' && !this.data.readonly
+      );
     },
 
     onClear() {
@@ -111,12 +105,12 @@ Component({
         value: '',
         showClear: this.getShowClear({ value: '' })
       });
-      this.triggerEvent('input', '');
-      this.triggerEvent('change', '');
+      this.$emit('input', '');
+      this.$emit('change', '');
     },
 
     onConfirm() {
-      this.triggerEvent('confirm', this.data.value);
+      this.$emit('confirm', this.data.value);
     }
   }
 });

packages/icon/index.js

@@ -1,11 +1,7 @@
-Component({
-  options: {
-    addGlobalClass: true
-  },
+import { create } from '../common/create';
 
-  externalClasses: ['custom-class'],
-
-  properties: {
+create({
+  props: {
     info: null,
     name: String,
     size: String,
@@ -18,7 +14,7 @@ Component({
 
   methods: {
     onClick() {
-      this.triggerEvent('click');
+      this.$emit('click');
     }
   }
 });

packages/loading/index.js

@@ -1,11 +1,7 @@
-Component({
-  options: {
-    addGlobalClass: true
-  },
+import { create } from '../common/create';
 
-  externalClasses: ['custom-class'],
-
-  properties: {
+create({
+  props: {
     size: {
       type: String,
       value: '30px'

packages/mixins/button.js

@@ -1,4 +1,4 @@
-export default Behavior({
+export const button = Behavior({
   properties: {
     loading: Boolean,
     // 在自定义组件中，无法与外界的 form 组件联动，暂时不开放
@@ -35,23 +35,23 @@ export default Behavior({
 
   methods: {
     bindgetuserinfo(event = {}) {
-      this.triggerEvent('getuserinfo', event.detail || {});
+      this.$emit('getuserinfo', event.detail || {});
     },
 
     bindcontact(event = {}) {
-      this.triggerEvent('contact', event.detail || {});
+      this.$emit('contact', event.detail || {});
     },
 
     bindgetphonenumber(event = {}) {
-      this.triggerEvent('getphonenumber', event.detail || {});
+      this.$emit('getphonenumber', event.detail || {});
     },
 
     bindopensetting(event = {}) {
-      this.triggerEvent('opensetting', event.detail || {});
+      this.$emit('opensetting', event.detail || {});
     },
 
     binderror(event = {}) {
-      this.triggerEvent('error', event.detail || {});
+      this.$emit('error', event.detail || {});
     }
   }
 });

packages/mixins/touch.js

@@ -1,4 +1,4 @@
-export default Behavior({
+export const touch = Behavior({
   methods: {
     touchStart(event) {
       this.direction = '';

packages/mixins/transition.js

@@ -1,4 +1,4 @@
-export default function(showDefaultValue) {
+export const transition = function(showDefaultValue) {
   return Behavior({
     properties: {
       customStyle: String,
@@ -51,4 +51,4 @@ export default function(showDefaultValue) {
       }
     }
   });
-}
+};

packages/nav-bar/index.js

@@ -1,15 +1,9 @@
-Component({
-  externalClasses: [
-    'custom-class',
-    'title-class'
-  ],
+import { create } from '../common/create';
 
-  options: {
-    multipleSlots: true,
-    addGlobalClass: true
-  },
+create({
+  classes: ['title-class'],
 
-  properties: {
+  props: {
     title: String,
     leftText: String,
     rightText: String,
@@ -23,11 +17,11 @@ Component({
 
   methods: {
     onClickLeft() {
-      this.triggerEvent('click-left');
+      this.$emit('click-left');
     },
 
     onClickRight() {
-      this.triggerEvent('click-right');
+      this.$emit('click-right');
     }
   }
 });

packages/notice-bar/index.js

@@ -1,20 +1,15 @@
-const VALID_MODE = ['closeable', 'link'];
+import { create } from '../common/create';
+
 const FONT_COLOR = '#f60';
 const BG_COLOR = '#fff7cc';
 
-Component({
-  options: {
-    addGlobalClass: true
-  },
-
-  externalClasses: ['custom-class'],
-
-  properties: {
+create({
+  props: {
     text: {
       type: String,
       value: '',
       observer() {
-        this.setData({}, this._init);
+        this.setData({}, this.init);
       }
     },
     mode: {
@@ -67,8 +62,7 @@ Component({
   },
 
   attached() {
-    const { mode } = this.data;
-    if (mode && this._checkMode(mode)) {
+    if (this.data.mode) {
       this.setData({
         hasRightIcon: true
       });
@@ -81,15 +75,7 @@ Component({
   },
 
   methods: {
-    _checkMode(val) {
-      const isValidMode = ~VALID_MODE.indexOf(val);
-      if (!isValidMode) {
-        console.warn(`mode only accept value of ${VALID_MODE}, now get ${val}.`);
-      }
-      return isValidMode;
-    },
-
-    _init() {
+    init() {
       wx.createSelectorQuery()
         .in(this)
         .select('.van-notice-bar__content')
@@ -132,7 +118,7 @@ Component({
                   animation,
                   resetAnimation
                 }, () => {
-                  this._scroll();
+                  this.scroll();
                 });
               }
             })
@@ -141,7 +127,7 @@ Component({
         .exec();
     },
 
-    _scroll() {
+    scroll() {
       const {
         animation, resetAnimation, wrapWidth, elapse, speed
       } = this.data;
@@ -157,7 +143,7 @@ Component({
       }, 100);
 
       const timer = setTimeout(() => {
-        this._scroll();
+        this.scroll();
       }, elapse);
 
       this.setData({
@@ -165,7 +151,7 @@ Component({
       });
     },
 
-    _handleButtonClick() {
+    onClickIcon() {
       const { timer } = this.data;
       timer && clearTimeout(timer);
       this.setData({
@@ -175,7 +161,7 @@ Component({
     },
 
     onClick(event) {
-      this.triggerEvent('click', event);
+      this.$emit('click', event);
     }
   }
 });

packages/notice-bar/index.wxml

@@ -18,7 +18,7 @@
       wx:if="{{ mode === 'closeable' }}"
       class="van-notice-bar__right-icon"
       name="close"
-      bind:tap="_handleButtonClick"
+      bind:tap="onClickIcon"
     />
     <navigator
       wx:if="{{ mode === 'link' }}"

packages/notify/index.js

@@ -1,11 +1,8 @@
+import { create } from '../common/create';
 import Notify from './notify';
 
-Component({
-  options: {
-    addGlobalClass: true
-  },
-
-  properties: {
+create({
+  props: {
     text: String,
     color: {
       type: String,

packages/overlay/index.js

@@ -1,9 +1,7 @@
-Component({
-  options: {
-    addGlobalClass: true
-  },
+import { create } from '../common/create';
 
-  properties: {
+create({
+  props: {
     show: Boolean,
     mask: Boolean,
     customStyle: String,
@@ -15,7 +13,7 @@ Component({
 
   methods: {
     onClick() {
-      this.triggerEvent('click');
+      this.$emit('click');
     }
   }
 });

packages/panel/index.js

@@ -1,15 +1,9 @@
-Component({
-  externalClasses: [
-    'custom-class',
-    'footer-class'
-  ],
+import { create } from '../common/create';
 
-  options: {
-    multipleSlots: true,
-    addGlobalClass: true
-  },
+create({
+  classes: ['footer-class'],
 
-  properties: {
+  props: {
     desc: String,
     title: String,
     status: String,

packages/popup/index.js

@@ -1,15 +1,10 @@
-import transitionBehaviors from '../behaviors/transition';
+import { create } from '../common/create';
+import { transition } from '../mixins/transition';
 
-Component({
-  options: {
-    addGlobalClass: true
-  },
+create({
+  mixins: [transition(false)],
 
-  externalClasses: ['custom-class'],
-
-  behaviors: [transitionBehaviors(false)],
-
-  properties: {
+  props: {
     overlayStyle: String,
     overlay: {
       type: Boolean,
@@ -27,10 +22,10 @@ Component({
 
   methods: {
     onClickOverlay() {
-      this.triggerEvent('click-overlay');
+      this.$emit('click-overlay');
 
       if (this.data.closeOnClickOverlay) {
-        this.triggerEvent('close');
+        this.$emit('close');
       }
     }
   }

packages/progress/index.js

@@ -1,13 +1,7 @@
-Component({
-  options: {
-    addGlobalClass: true
-  },
+import { create } from '../common/create';
 
-  externalClasses: [
-    'custom-class'
-  ],
-
-  properties: {
+create({
+  props: {
     inactive: {
       type: Boolean,
       observer() {

packages/row/index.js

@@ -1,24 +1,16 @@
-const COL_PATH = '../col/index';
-
-Component({
-  options: {
-    addGlobalClass: true
-  },
-
-  externalClasses: ['custom-class'],
+import { create } from '../common/create';
 
+create({
   relations: {
-    [COL_PATH]: {
+    '../col/index': {
       type: 'descendant'
     }
   },
 
-  properties: {
+  props: {
     gutter: {
       type: Number,
-      observer() {
-        this.setGutter();
-      }
+      observer: 'setGutter'
     }
   },
 
@@ -33,7 +25,7 @@ Component({
       const style = gutter ? `margin-right: ${margin}; margin-left: ${margin};` : '';
 
       this.setData({ style });
-      this.getRelationNodes(COL_PATH).forEach((col) => {
+      this.getRelationNodes('../col/index').forEach((col) => {
         col.setGutter(this.data.gutter);
       });
     }

packages/search/index.js

@@ -1,14 +1,11 @@
-Component({
-  behaviors: ['wx://form-field'],
+import { create } from '../common/create';
 
-  externalClasses: ['custom-class', 'cancel-class'],
+create({
+  field: true,
 
-  options: {
-    multipleSlots: true,
-    addGlobalClass: true
-  },
+  classes: ['cancel-class'],
 
-  properties: {
+  props: {
     focus: Boolean,
     disabled: Boolean,
     readonly: Boolean,
@@ -27,25 +24,25 @@ Component({
 
   methods: {
     onChange(event) {
-      this.triggerEvent('change', event.detail);
+      this.$emit('change', event.detail);
     },
 
     onCancel() {
       this.setData({ value: '' });
-      this.triggerEvent('cancel');
-      this.triggerEvent('change', '');
+      this.$emit('cancel');
+      this.$emit('change', '');
     },
 
     onSearch() {
-      this.triggerEvent('search', this.data.value);
+      this.$emit('search', this.data.value);
     },
 
     onFocus() {
-      this.triggerEvent('focus');
+      this.$emit('focus');
     },
 
     onBlur() {
-      this.triggerEvent('blur');
+      this.$emit('blur');
     }
   }
 });

packages/slider/index.js

@@ -1,15 +1,10 @@
-import touchBehaviors from '../behaviors/touch';
+import { create } from '../common/create';
+import { touch } from '../mixins/touch';
 
-Component({
-  options: {
-    addGlobalClass: true
-  },
+create({
+  mixins: [touch],
 
-  externalClasses: ['custom-class'],
-
-  behaviors: [touchBehaviors],
-
-  properties: {
+  props: {
     disabled: Boolean,
     max: {
       type: Number,
@@ -86,7 +81,7 @@ Component({
       });
 
       if (end) {
-        this.triggerEvent('change', value);
+        this.$emit('change', value);
       }
     },
 

packages/stepper/index.js

@@ -1,22 +1,19 @@
+import { create } from '../common/create';
+
 // Note that the bitwise operators and shift operators operate on 32-bit ints
 // so in that case, the max safe integer is 2^31-1, or 2147483647
 const MAX = 2147483647;
 
-Component({
-  behaviors: ['wx://form-field'],
+create({
+  field: true,
 
-  options: {
-    addGlobalClass: true
-  },
-
-  externalClasses: [
-    'custom-class',
+  classes: [
     'input-class',
     'plus-class',
     'minus-class'
   ],
 
-  properties: {
+  props: {
     integer: Boolean,
     disabled: Boolean,
     disableInput: Boolean,
@@ -53,20 +50,20 @@ Component({
 
     onChange(type) {
       if (this[`${type}Disabled`]) {
-        this.triggerEvent('overlimit', type);
+        this.$emit('overlimit', type);
         return;
       }
 
       const diff = type === 'minus' ? -this.data.step : +this.data.step;
       const value = Math.round((this.data.value + diff) * 100) / 100;
       this.triggerInput(this.range(value));
-      this.triggerEvent(type);
+      this.$emit(type);
     },
 
     onBlur(event) {
       const value = this.range(this.data.value);
       this.triggerInput(value);
-      this.triggerEvent('blur', event);
+      this.$emit('blur', event);
     },
 
     onMinus() {
@@ -79,7 +76,7 @@ Component({
 
     triggerInput(value) {
       this.setData({ value });
-      this.triggerEvent('change', value);
+      this.$emit('change', value);
     }
   }
 });

packages/steps/index.js

@@ -1,25 +1,15 @@
-Component({
-  options: {
-    addGlobalClass: true
-  },
+import { create } from '../common/create';
 
-  externalClasses: [
-    'custom-class'
-  ],
-
-  properties: {
+create({
+  props: {
     icon: String,
     steps: {
       type: Array,
-      observer() {
-        this.formatSteps();
-      }
+      observer: 'formatSteps'
     },
     active: {
       type: Number,
-      observer() {
-        this.formatSteps();
-      }
+      observer: 'formatSteps'
     },
     direction: {
       type: String,

packages/switch-cell/index.js

@@ -1,11 +1,9 @@
-Component({
-  behaviors: ['wx://form-field'],
+import { create } from '../common/create';
 
-  options: {
-    addGlobalClass: true
-  },
+create({
+  field: true,
 
-  properties: {
+  props: {
     title: String,
     border: Boolean,
     loading: Boolean,
@@ -28,7 +26,7 @@ Component({
 
   methods: {
     onChange(event) {
-      this.triggerEvent('change', event.detail);
+      this.$emit('change', event.detail);
     }
   }
 });

packages/switch/index.js

@@ -1,13 +1,11 @@
-Component({
-  behaviors: ['wx://form-field'],
+import { create } from '../common/create';
 
-  options: {
-    addGlobalClass: true
-  },
+create({
+  field: true,
 
-  externalClasses: ['custom-class', 'node-class'],
+  classes: ['node-class'],
 
-  properties: {
+  props: {
     loading: Boolean,
     disabled: Boolean,
     checked: {
@@ -30,8 +28,8 @@ Component({
     onClick() {
       if (!this.data.disabled && !this.data.loading) {
         const checked = !this.data.checked;
-        this.triggerEvent('input', checked);
-        this.triggerEvent('change', checked);
+        this.$emit('input', checked);
+        this.$emit('change', checked);
       }
     }
   }

packages/tab/index.js

@@ -1,16 +1,12 @@
-const TABS_PATH = '../tabs/index';
+import { create } from '../common/create';
 
-Component({
-  options: {
-    addGlobalClass: true
-  },
-
-  properties: {
+create({
+  props: {
     disabled: Boolean,
     title: {
       type: String,
       observer() {
-        const parent = this.getRelationNodes(TABS_PATH)[0];
+        const parent = this.getRelationNodes('../tabs/index')[0];
         if (parent) {
           parent.setLine();
         }
@@ -19,7 +15,7 @@ Component({
   },
 
   relations: {
-    [TABS_PATH]: {
+    '../tabs/index': {
       type: 'ancestor'
     }
   },

packages/tabbar-item/index.js

@@ -1,19 +1,14 @@
-const TABBAR_PATH = '../tabbar/index';
+import { create } from '../common/create';
 
-Component({
-  properties: {
+create({
+  props: {
     info: null,
     icon: String,
     dot: Boolean
   },
 
-  options: {
-    multipleSlots: true,
-    addGlobalClass: true
-  },
-
   relations: {
-    [TABBAR_PATH]: {
+    '../tabbar/index': {
       type: 'ancestor'
     }
   },
@@ -25,11 +20,11 @@ Component({
 
   methods: {
     onClick() {
-      const parent = this.getRelationNodes(TABBAR_PATH)[0];
+      const parent = this.getRelationNodes('../tabbar/index')[0];
       if (parent) {
         parent.onChange(this);
       }
-      this.triggerEvent('click');
+      this.$emit('click');
     }
   }
 });

packages/tabbar/index.js

@@ -1,13 +1,7 @@
-const ITEM_PATH = '../tabbar-item/index';
+import { create } from '../common/create';
 
-Component({
-  options: {
-    addGlobalClass: true
-  },
-
-  externalClasses: ['custom-class'],
-
-  properties: {
+create({
+  props: {
     active: {
       type: Number,
       observer(active) {
@@ -35,7 +29,7 @@ Component({
   },
 
   relations: {
-    [ITEM_PATH]: {
+    '../tabbar-item/index': {
       type: 'descendant',
 
       linked(target) {
@@ -63,7 +57,7 @@ Component({
     onChange(child) {
       const active = this.data.items.indexOf(child);
       if (active !== this.data.currentActive && active !== -1) {
-        this.triggerEvent('change', active);
+        this.$emit('change', active);
         this.setData({ currentActive: active });
         this.setActiveItem();
       }

packages/tabs/index.js

@@ -1,12 +1,8 @@
-const TAB_PATH = '../tab/index';
-
-Component({
-  options: {
-    addGlobalClass: true
-  },
+import { create } from '../common/create';
 
+create({
   relations: {
-    [TAB_PATH]: {
+    '../tab/index': {
       type: 'descendant',
 
       linked(target) {
@@ -33,7 +29,7 @@ Component({
     }
   },
 
-  properties: {
+  props: {
     color: {
       type: String,
       observer: 'setLine'
@@ -78,7 +74,7 @@ Component({
 
   methods: {
     trigger(eventName, index) {
-      this.triggerEvent(eventName, {
+      this.$emit(eventName, {
         index,
         title: this.data.tabs[index].data.title
       });

packages/tag/index.js

@@ -1,11 +1,7 @@
-Component({
-  options: {
-    addGlobalClass: true
-  },
+import { create } from '../common/create';
 
-  externalClasses: ['custom-class'],
-
-  properties: {
+create({
+  props: {
     type: String,
     mark: Boolean,
     plain: Boolean

packages/toast/index.js

@@ -1,11 +1,8 @@
+import { create } from '../common/create';
 import Toast from './toast';
 
-Component({
-  options: {
-    addGlobalClass: true
-  },
-
-  properties: {
+create({
+  props: {
     show: Boolean,
     mask: Boolean,
     message: String,

packages/toast/toast.js

@@ -1,4 +1,4 @@
-import { isObj } from '../utils/index';
+import { isObj } from '../common/utils';
 
 const defaultOptions = {
   type: 'text',

packages/transition/index.js

@@ -1,15 +1,10 @@
-import transitionBehaviors from '../behaviors/transition';
+import { create } from '../common/create';
+import { transition } from '../mixins/transition';
 
-Component({
-  options: {
-    addGlobalClass: true
-  },
+create({
+  mixins: [transition(true)],
 
-  externalClasses: ['custom-class'],
-
-  behaviors: [transitionBehaviors(true)],
-
-  properties: {
+  props: {
     name: {
       type: String,
       value: 'fade'

packages/tree-select/index.js

@@ -1,11 +1,9 @@
+import { create } from '../common/create';
+
 const ITEM_HEIGHT = 44;
 
-Component({
-  options: {
-    addGlobalClass: true
-  },
-
-  properties: {
+create({
+  props: {
     items: {
       type: Array,
       observer() {
@@ -16,9 +14,7 @@ Component({
     mainActiveIndex: {
       type: Number,
       value: 0,
-      observer() {
-        this.updateSubItems();
-      }
+      observer: 'updateSubItems'
     },
     activeId: {
       type: Number,
@@ -46,7 +42,7 @@ Component({
       const {
         dataset = {}
       } = event.currentTarget || {};
-      this.triggerEvent('click-item', { ...(dataset.item || {}) });
+      this.$emit('click-item', { ...(dataset.item || {}) });
     },
 
     // 当一个导航被点击时
@@ -54,7 +50,7 @@ Component({
       const {
         dataset = {}
       } = event.currentTarget || {};
-      this.triggerEvent('click-nav', { index: dataset.index });
+      this.$emit('click-nav', { index: dataset.index });
     },
 
     // 更新子项列表

packages/tree-select/index.pcss

@@ -1,4 +1,4 @@
-@import "../common/index.pcss";
+@import '../common/style/var.pcss';
 @import '../common/style/ellipsis.pcss';
 
 .tree-select {