From a297dba84c1bb16d678d6da8c0a57a02be1c0740 Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 7 Sep 2018 10:24:19 +0800 Subject: [PATCH] [improvement] vue style component options (#523) --- example/app.wxss | 2 - packages/action-sheet/index.js | 14 +++---- packages/badge-group/index.js | 20 +++------- packages/badge/index.js | 16 +++----- packages/button/index.js | 21 ++++------ packages/card/index.js | 12 ++---- packages/cell-group/index.js | 10 ++--- packages/cell/index.js | 16 +++----- packages/col/index.js | 14 ++----- .../common/{classnames.js => class-names.js} | 2 +- packages/common/create.js | 39 ++++++++++++++++++ packages/common/index.pcss | 8 ---- packages/{utils/index.js => common/utils.js} | 0 packages/dialog/index.js | 12 +++--- packages/field/index.js | 40 ++++++++----------- packages/icon/index.js | 12 ++---- packages/loading/index.js | 10 ++--- packages/{behaviors => mixins}/button.js | 12 +++--- packages/{behaviors => mixins}/touch.js | 2 +- packages/{behaviors => mixins}/transition.js | 4 +- packages/nav-bar/index.js | 18 +++------ packages/notice-bar/index.js | 38 ++++++------------ packages/notice-bar/index.wxml | 2 +- packages/notify/index.js | 9 ++--- packages/overlay/index.js | 10 ++--- packages/panel/index.js | 14 ++----- packages/popup/index.js | 19 ++++----- packages/progress/index.js | 12 ++---- packages/row/index.js | 20 +++------- packages/search/index.js | 25 +++++------- packages/slider/index.js | 17 +++----- packages/stepper/index.js | 23 +++++------ packages/steps/index.js | 20 +++------- packages/switch-cell/index.js | 12 +++--- packages/switch/index.js | 16 ++++---- packages/tab/index.js | 14 +++---- packages/tabbar-item/index.js | 17 +++----- packages/tabbar/index.js | 16 +++----- packages/tabs/index.js | 14 +++---- packages/tag/index.js | 10 ++--- packages/toast/index.js | 9 ++--- packages/toast/toast.js | 2 +- packages/transition/index.js | 15 +++---- packages/tree-select/index.js | 18 ++++----- packages/tree-select/index.pcss | 2 +- 45 files changed, 251 insertions(+), 387 deletions(-) rename packages/common/{classnames.js => class-names.js} (94%) create mode 100644 packages/common/create.js delete mode 100644 packages/common/index.pcss rename packages/{utils/index.js => common/utils.js} (100%) rename packages/{behaviors => mixins}/button.js (75%) rename packages/{behaviors => mixins}/touch.js (95%) rename packages/{behaviors => mixins}/transition.js (93%) diff --git a/example/app.wxss b/example/app.wxss index cf06e0a9..2dcb4f73 100644 --- a/example/app.wxss +++ b/example/app.wxss @@ -1,5 +1,3 @@ -@import "./dist/common/index.wxss"; - page { color: #333; background: #f8f8f8; diff --git a/packages/action-sheet/index.js b/packages/action-sheet/index.js index 90092106..31bb381c 100644 --- a/packages/action-sheet/index.js +++ b/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'); } } }); diff --git a/packages/badge-group/index.js b/packages/badge-group/index.js index 7fb2f27d..a50ddfd9 100644 --- a/packages/badge-group/index.js +++ b/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; diff --git a/packages/badge/index.js b/packages/badge/index.js index 4a27209d..f724a2e6 100644 --- a/packages/badge/index.js +++ b/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); } diff --git a/packages/button/index.js b/packages/button/index.js index 98d38b8f..6596c4a3 100644 --- a/packages/button/index.js +++ b/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, diff --git a/packages/card/index.js b/packages/card/index.js index dc1d9964..e9057146 100644 --- a/packages/card/index.js +++ b/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, diff --git a/packages/cell-group/index.js b/packages/cell-group/index.js index 61e9f502..b05225f3 100644 --- a/packages/cell-group/index.js +++ b/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 diff --git a/packages/cell/index.js b/packages/cell/index.js index bbeb0271..cce4c873 100644 --- a/packages/cell/index.js +++ b/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'); } } }); diff --git a/packages/col/index.js b/packages/col/index.js index 49b84ad5..b803361b 100644 --- a/packages/col/index.js +++ b/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 }, diff --git a/packages/common/classnames.js b/packages/common/class-names.js similarity index 94% rename from packages/common/classnames.js rename to packages/common/class-names.js index 12904405..7a3a99f1 100644 --- a/packages/common/classnames.js +++ b/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++) { diff --git a/packages/common/create.js b/packages/common/create.js new file mode 100644 index 00000000..5643018e --- /dev/null +++ b/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); +}; + diff --git a/packages/common/index.pcss b/packages/common/index.pcss deleted file mode 100644 index 867ce9be..00000000 --- a/packages/common/index.pcss +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Entry of basic styles - */ - -@import "./style/var.pcss"; -@import "./style/ellipsis.pcss"; -@import "./style/clearfix.pcss"; -@import "./style/hairline.pcss"; diff --git a/packages/utils/index.js b/packages/common/utils.js similarity index 100% rename from packages/utils/index.js rename to packages/common/utils.js diff --git a/packages/dialog/index.js b/packages/dialog/index.js index e6696ffd..76e58ba9 100644 --- a/packages/dialog/index.js +++ b/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); } } }); diff --git a/packages/field/index.js b/packages/field/index.js index 268c7303..5932e75e 100644 --- a/packages/field/index.js +++ b/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); } } }); diff --git a/packages/icon/index.js b/packages/icon/index.js index 2ab03683..ba24cbba 100644 --- a/packages/icon/index.js +++ b/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'); } } }); diff --git a/packages/loading/index.js b/packages/loading/index.js index 85edb5ec..c514f400 100644 --- a/packages/loading/index.js +++ b/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' diff --git a/packages/behaviors/button.js b/packages/mixins/button.js similarity index 75% rename from packages/behaviors/button.js rename to packages/mixins/button.js index 82ee5675..1c72f1f8 100644 --- a/packages/behaviors/button.js +++ b/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 || {}); } } }); diff --git a/packages/behaviors/touch.js b/packages/mixins/touch.js similarity index 95% rename from packages/behaviors/touch.js rename to packages/mixins/touch.js index 19ce84a2..ae2cb78e 100644 --- a/packages/behaviors/touch.js +++ b/packages/mixins/touch.js @@ -1,4 +1,4 @@ -export default Behavior({ +export const touch = Behavior({ methods: { touchStart(event) { this.direction = ''; diff --git a/packages/behaviors/transition.js b/packages/mixins/transition.js similarity index 93% rename from packages/behaviors/transition.js rename to packages/mixins/transition.js index 5fca3ab4..e1a5ab87 100644 --- a/packages/behaviors/transition.js +++ b/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) { } } }); -} +}; diff --git a/packages/nav-bar/index.js b/packages/nav-bar/index.js index 72ed2a16..6d3b7987 100644 --- a/packages/nav-bar/index.js +++ b/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'); } } }); diff --git a/packages/notice-bar/index.js b/packages/notice-bar/index.js index 2666c75c..393ee159 100644 --- a/packages/notice-bar/index.js +++ b/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); } } }); diff --git a/packages/notice-bar/index.wxml b/packages/notice-bar/index.wxml index 511b6d66..46e81d2c 100644 --- a/packages/notice-bar/index.wxml +++ b/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" /> { + this.getRelationNodes('../col/index').forEach((col) => { col.setGutter(this.data.gutter); }); } diff --git a/packages/search/index.js b/packages/search/index.js index 50f4a6a4..45467436 100644 --- a/packages/search/index.js +++ b/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'); } } }); diff --git a/packages/slider/index.js b/packages/slider/index.js index 86971d2b..a83387d6 100644 --- a/packages/slider/index.js +++ b/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); } }, diff --git a/packages/stepper/index.js b/packages/stepper/index.js index 35eeb2e0..158f6e0a 100644 --- a/packages/stepper/index.js +++ b/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); } } }); diff --git a/packages/steps/index.js b/packages/steps/index.js index e07415ca..29587de4 100644 --- a/packages/steps/index.js +++ b/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, diff --git a/packages/switch-cell/index.js b/packages/switch-cell/index.js index 7581323d..b6fa11fd 100644 --- a/packages/switch-cell/index.js +++ b/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); } } }); diff --git a/packages/switch/index.js b/packages/switch/index.js index e20aa357..07867866 100644 --- a/packages/switch/index.js +++ b/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); } } } diff --git a/packages/tab/index.js b/packages/tab/index.js index 0f5cdaea..950b4c63 100644 --- a/packages/tab/index.js +++ b/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' } }, diff --git a/packages/tabbar-item/index.js b/packages/tabbar-item/index.js index a888b510..ff936043 100644 --- a/packages/tabbar-item/index.js +++ b/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'); } } }); diff --git a/packages/tabbar/index.js b/packages/tabbar/index.js index a19c784a..2c765016 100644 --- a/packages/tabbar/index.js +++ b/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(); } diff --git a/packages/tabs/index.js b/packages/tabs/index.js index bfa428b8..d1b45b26 100644 --- a/packages/tabs/index.js +++ b/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 }); diff --git a/packages/tag/index.js b/packages/tag/index.js index f415cfac..40a74c60 100644 --- a/packages/tag/index.js +++ b/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 diff --git a/packages/toast/index.js b/packages/toast/index.js index fa0adba4..8e55a673 100644 --- a/packages/toast/index.js +++ b/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, diff --git a/packages/toast/toast.js b/packages/toast/toast.js index c72dab44..38c41422 100644 --- a/packages/toast/toast.js +++ b/packages/toast/toast.js @@ -1,4 +1,4 @@ -import { isObj } from '../utils/index'; +import { isObj } from '../common/utils'; const defaultOptions = { type: 'text', diff --git a/packages/transition/index.js b/packages/transition/index.js index afc2cd40..d41bcb2b 100644 --- a/packages/transition/index.js +++ b/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' diff --git a/packages/tree-select/index.js b/packages/tree-select/index.js index 099c5e7e..63a6643a 100644 --- a/packages/tree-select/index.js +++ b/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 }); }, // 更新子项列表 diff --git a/packages/tree-select/index.pcss b/packages/tree-select/index.pcss index 5dbd20f3..1a2e6702 100644 --- a/packages/tree-select/index.pcss +++ b/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 {