diff --git a/example/app.wxss b/example/app.wxss index 2dcb4f73..ab87195c 100644 --- a/example/app.wxss +++ b/example/app.wxss @@ -1,5 +1,6 @@ page { color: #333; + font-size: 16px; background: #f8f8f8; min-height: 100vh; box-sizing: border-box; diff --git a/packages/area/index.ts b/packages/area/index.ts index 84606b0c..5944143d 100644 --- a/packages/area/index.ts +++ b/packages/area/index.ts @@ -8,14 +8,8 @@ type AreaItem = { VantComponent({ props: { title: String, + value: String, loading: Boolean, - value: { - type: String, - observer(value) { - this.code = value; - this.setValues(); - } - }, itemHeight: { type: Number, value: 44 @@ -30,10 +24,7 @@ VantComponent({ }, areaList: { type: Object, - value: {}, - observer() { - this.setValues(); - } + value: {} } }, @@ -49,6 +40,15 @@ VantComponent({ } }, + watch: { + value(value) { + this.code = value; + this.setValues(); + }, + + areaList: 'setValues' + }, + methods: { onCancel() { this.$emit('cancel', { diff --git a/packages/badge-group/index.ts b/packages/badge-group/index.ts index b35902f3..d5c1bd65 100644 --- a/packages/badge-group/index.ts +++ b/packages/badge-group/index.ts @@ -20,8 +20,7 @@ VantComponent({ props: { active: { type: Number, - value: 0, - observer: 'setActive' + value: 0 } }, @@ -29,6 +28,10 @@ VantComponent({ badges: [] }, + watch: { + active: 'setActive' + }, + beforeCreate() { this.currentActive = -1; }, diff --git a/packages/common/component.ts b/packages/common/component.ts index 394cf330..acd77b56 100644 --- a/packages/common/component.ts +++ b/packages/common/component.ts @@ -11,18 +11,19 @@ function mapKeys(source: object, target: object, map: object) { }); } -function VantComponent( - sfc: VantComponentOptions< +function VantComponent( + vantOptions: VantComponentOptions< Data, Props, + Watch, Methods, Computed, - CombinedComponentInstance + CombinedComponentInstance > ): void { const options: any = {}; - mapKeys(sfc, options, { + mapKeys(vantOptions, options, { data: 'data', props: 'properties', mixins: 'behaviors', @@ -44,7 +45,7 @@ function VantComponent( options.behaviors.push(basic); // map field to form-field behavior - if (sfc.field) { + if (vantOptions.field) { options.behaviors.push('wx://form-field'); } @@ -54,7 +55,7 @@ function VantComponent( addGlobalClass: true }; - observe(sfc, options); + observe(vantOptions, options); Component(options); } diff --git a/packages/dialog/index.ts b/packages/dialog/index.ts index e3665f74..c67180a2 100644 --- a/packages/dialog/index.ts +++ b/packages/dialog/index.ts @@ -2,25 +2,13 @@ import { VantComponent } from '../common/component'; VantComponent({ props: { + show: Boolean, title: String, message: String, useSlot: Boolean, asyncClose: Boolean, showCancelButton: Boolean, confirmButtonOpenType: String, - show: { - type: Boolean, - observer(show) { - if (!show) { - this.setData({ - loading: { - confirm: false, - cancel: false - } - }); - } - } - }, zIndex: { type: Number, value: 100 @@ -54,6 +42,19 @@ VantComponent({ } }, + watch: { + show(show) { + if (!show) { + this.setData({ + loading: { + confirm: false, + cancel: false + } + }); + } + } + }, + methods: { onConfirm() { this.handleAction('confirm'); diff --git a/packages/mixins/button.js b/packages/mixins/button.ts similarity index 76% rename from packages/mixins/button.js rename to packages/mixins/button.ts index fd15aea8..4372591d 100644 --- a/packages/mixins/button.js +++ b/packages/mixins/button.ts @@ -27,23 +27,23 @@ export const button = Behavior({ }, methods: { - bindgetuserinfo(event = {}) { + bindgetuserinfo(event: Partial) { this.$emit('getuserinfo', event.detail); }, - bindcontact(event = {}) { + bindcontact(event: Partial) { this.$emit('contact', event.detail); }, - bindgetphonenumber(event = {}) { + bindgetphonenumber(event: Partial) { this.$emit('getphonenumber', event.detail); }, - bindopensetting(event = {}) { + bindopensetting(event: Partial) { this.$emit('opensetting', event.detail); }, - binderror(event = {}) { + binderror(event: Partial) { this.$emit('error', event.detail); } } diff --git a/packages/mixins/observer/index.ts b/packages/mixins/observer/index.ts index 55ea4c89..72ad47a9 100644 --- a/packages/mixins/observer/index.ts +++ b/packages/mixins/observer/index.ts @@ -1,11 +1,26 @@ import { behavior } from './behavior'; import { observeProps } from './props'; -export function observe(sfc, options) { - if (sfc.computed) { +export function observe(vantOptions, options) { + const { watch, computed } = vantOptions; + + if (watch) { + options.properties = options.properties || {}; + Object.keys(watch).forEach(key => { + if (key in options.properties) { + let prop = options.properties[key]; + if (prop === null || !prop.type) { + prop = { type: prop }; + } + prop.observer = watch[key]; + } + }); + } + + if (computed) { options.behaviors.push(behavior); options.methods = options.methods || {}; - options.methods.$options = () => sfc; + options.methods.$options = () => vantOptions; if (options.properties) { observeProps(options.properties); diff --git a/packages/mixins/touch.js b/packages/mixins/touch.ts similarity index 100% rename from packages/mixins/touch.js rename to packages/mixins/touch.ts diff --git a/packages/mixins/transition.js b/packages/mixins/transition.ts similarity index 79% rename from packages/mixins/transition.js rename to packages/mixins/transition.ts index e1a5ab87..0e70725f 100644 --- a/packages/mixins/transition.js +++ b/packages/mixins/transition.ts @@ -3,17 +3,9 @@ export const transition = function(showDefaultValue) { properties: { customStyle: String, show: { - value: showDefaultValue, type: Boolean, - observer(value) { - if (value) { - this.show(); - } else { - this.setData({ - type: 'leave' - }); - } - } + value: showDefaultValue, + observer: 'observeShow' }, duration: { type: Number, @@ -34,6 +26,16 @@ export const transition = function(showDefaultValue) { }, methods: { + observeShow(value) { + if (value) { + this.show(); + } else { + this.setData({ + type: 'leave' + }); + } + }, + show() { this.setData({ inited: true, diff --git a/packages/nav-bar/index.js b/packages/nav-bar/index.ts similarity index 100% rename from packages/nav-bar/index.js rename to packages/nav-bar/index.ts diff --git a/packages/notice-bar/index.js b/packages/notice-bar/index.ts similarity index 97% rename from packages/notice-bar/index.js rename to packages/notice-bar/index.ts index 58a9a9f7..6c136cdd 100644 --- a/packages/notice-bar/index.js +++ b/packages/notice-bar/index.ts @@ -7,10 +7,7 @@ VantComponent({ props: { text: { type: String, - value: '', - observer() { - this.setData({}, this.init); - } + value: '' }, mode: { type: String, @@ -61,6 +58,12 @@ VantComponent({ timer: null }, + watch: { + text() { + this.setData({}, this.init); + } + }, + created() { if (this.data.mode) { this.setData({ diff --git a/packages/notify/index.js b/packages/notify/index.ts similarity index 100% rename from packages/notify/index.js rename to packages/notify/index.ts diff --git a/packages/notify/notify.js b/packages/notify/notify.ts similarity index 78% rename from packages/notify/notify.js rename to packages/notify/notify.ts index 8ad19339..341ae4b6 100644 --- a/packages/notify/notify.js +++ b/packages/notify/notify.ts @@ -1,5 +1,10 @@ import { isObj } from '../common/utils'; +type NotifyOptions = { + selector?: string; + duration?: number; +} + const defaultOptions = { selector: '#van-notify', duration: 3000 @@ -9,7 +14,7 @@ function parseOptions(text) { return isObj(text) ? text : { text }; } -export default function Notify(options = {}) { +export default function Notify(options: NotifyOptions = {}) { const pages = getCurrentPages(); const ctx = pages[pages.length - 1]; diff --git a/packages/overlay/index.js b/packages/overlay/index.ts similarity index 99% rename from packages/overlay/index.js rename to packages/overlay/index.ts index 5d6c871f..86126230 100644 --- a/packages/overlay/index.js +++ b/packages/overlay/index.ts @@ -1,3 +1,4 @@ + import { VantComponent } from '../common/component'; VantComponent({ diff --git a/packages/panel/index.js b/packages/panel/index.ts similarity index 100% rename from packages/panel/index.js rename to packages/panel/index.ts diff --git a/packages/popup/index.js b/packages/popup/index.ts similarity index 100% rename from packages/popup/index.js rename to packages/popup/index.ts diff --git a/packages/progress/index.js b/packages/progress/index.js deleted file mode 100644 index 0f0acfdc..00000000 --- a/packages/progress/index.js +++ /dev/null @@ -1,104 +0,0 @@ -import { VantComponent } from '../common/component'; - -VantComponent({ - props: { - inactive: { - type: Boolean, - observer() { - this.setPivotStyle(); - this.setPortionStyle(); - } - }, - pivotColor: { - type: String, - observer: 'setPivotStyle' - }, - percentage: { - type: Number, - observer() { - this.setText(); - this.setPortionStyle(); - } - }, - showPivot: { - type: Boolean, - value: true, - observer: 'getWidth' - }, - pivotText: { - type: String, - observer() { - this.setText(); - this.getWidth(); - } - }, - color: { - type: String, - value: '#38f', - observer() { - this.setPivotStyle(); - this.setPortionStyle(); - } - }, - textColor: { - type: String, - value: '#fff', - observer: 'setPivotStyle' - } - }, - - data: { - pivotWidth: 0, - progressWidth: 0 - }, - - mounted() { - this.setText(); - this.setPivotStyle(); - this.getWidth(); - }, - - methods: { - getCurrentColor() { - return this.data.inactive ? '#cacaca' : this.data.color; - }, - - setText() { - this.setData({ - text: this.data.pivotText || this.data.percentage + '%' - }); - }, - - setPortionStyle() { - const width = (this.data.progressWidth - this.data.pivotWidth) * this.data.percentage / 100 + 'px'; - const background = this.getCurrentColor(); - this.setData({ - portionStyle: `width: ${width}; background: ${background}; ` - }); - }, - - setPivotStyle() { - const color = this.data.textColor; - const background = this.data.pivotColor || this.getCurrentColor(); - this.setData({ - pivotStyle: `color: ${color}; background: ${background}` - }); - }, - - getWidth() { - this.getRect('.van-progress').then(rect => { - this.setData({ - progressWidth: rect.width - }); - this.setPortionStyle(); - }); - - this.getRect('.van-progress__pivot').then(rect => { - this.setData({ - pivotWidth: rect.width || 0 - }); - this.setPortionStyle(); - }); - } - } -}); diff --git a/packages/progress/index.ts b/packages/progress/index.ts new file mode 100644 index 00000000..68e6ea06 --- /dev/null +++ b/packages/progress/index.ts @@ -0,0 +1,74 @@ +import { VantComponent } from '../common/component'; + +VantComponent({ + props: { + inactive: Boolean, + percentage: Number, + pivotText: String, + pivotColor: String, + showPivot: { + type: Boolean, + value: true + }, + color: { + type: String, + value: '#38f' + }, + textColor: { + type: String, + value: '#fff' + } + }, + + data: { + pivotWidth: 0, + progressWidth: 0 + }, + + watch: { + pivotText: 'getWidth', + showPivot: 'getWidth' + }, + + computed: { + portionStyle() { + const width = (this.data.progressWidth - this.data.pivotWidth) * this.data.percentage / 100 + 'px'; + const background = this.getCurrentColor(); + return `width: ${width}; background: ${background}; `; + }, + + pivotStyle() { + const color = this.data.textColor; + const background = this.data.pivotColor || this.getCurrentColor(); + return `color: ${color}; background: ${background}` + }, + + text() { + return this.data.pivotText || this.data.percentage + '%'; + } + }, + + mounted() { + this.getWidth(); + }, + + methods: { + getCurrentColor() { + return this.data.inactive ? '#cacaca' : this.data.color; + }, + + getWidth() { + this.getRect('.van-progress').then(rect => { + this.setData({ + progressWidth: rect.width + }); + }); + + this.getRect('.van-progress__pivot').then(rect => { + this.setData({ + pivotWidth: rect.width || 0 + }); + }); + } + } +}); diff --git a/packages/radio-group/index.js b/packages/radio-group/index.js deleted file mode 100644 index f42c9c4c..00000000 --- a/packages/radio-group/index.js +++ /dev/null @@ -1,37 +0,0 @@ -import { VantComponent } from '../common/component'; - -VantComponent({ - relations: { - '../radio/index': { - type: 'descendant', - linked(target) { - const { value, disabled } = this.data; - target.setData({ - value: value, - disabled: disabled || target.data.disabled - }); - } - } - }, - - props: { - value: { - type: null, - observer(value) { - const children = this.getRelationNodes('../radio/index'); - children.forEach(child => { - child.setData({ value }); - }); - } - }, - disabled: { - type: Boolean, - observer(disabled) { - const children = this.getRelationNodes('../radio/index'); - children.forEach(child => { - child.setData({ disabled: disabled || children.data.disabled }); - }); - } - } - } -}); diff --git a/packages/radio-group/index.ts b/packages/radio-group/index.ts new file mode 100644 index 00000000..09117e63 --- /dev/null +++ b/packages/radio-group/index.ts @@ -0,0 +1,37 @@ +import { VantComponent } from '../common/component'; + +VantComponent({ + relations: { + '../radio/index': { + type: 'descendant', + linked(target) { + const { value, disabled } = this.data; + target.setData({ + value: value, + disabled: disabled || target.data.disabled + }); + } + } + }, + + props: { + value: null, + disabled: Boolean + }, + + watch: { + value(value) { + const children = this.getRelationNodes('../radio/index'); + children.forEach(child => { + child.setData({ value }); + }); + }, + + disabled(disabled) { + const children = this.getRelationNodes('../radio/index'); + children.forEach(child => { + child.setData({ disabled: disabled || child.data.disabled }); + }); + } + } +}); diff --git a/packages/radio/index.js b/packages/radio/index.ts similarity index 78% rename from packages/radio/index.js rename to packages/radio/index.ts index 280e2c1f..99ae6540 100644 --- a/packages/radio/index.js +++ b/packages/radio/index.ts @@ -30,14 +30,13 @@ VantComponent({ methods: { emitChange(value) { - const parent = this.getRelationNodes('../radio-group/index')[0]; - (parent || this).$emit('input', value); - (parent || this).$emit('change', value); + const instance = this.getRelationNodes('../radio-group/index')[0] || this; + instance.$emit('input', value); + instance.$emit('change', value); }, onChange(event) { - const { value } = event.detail; - this.emitChange(value); + this.emitChange(event.detail.value); }, onClickLabel() { diff --git a/packages/row/index.js b/packages/row/index.ts similarity index 91% rename from packages/row/index.js rename to packages/row/index.ts index b030fe81..63ca82f4 100644 --- a/packages/row/index.js +++ b/packages/row/index.ts @@ -14,10 +14,11 @@ VantComponent({ }, props: { - gutter: { - type: Number, - observer: 'setGutter' - } + gutter: Number + }, + + watch: { + gutter: 'setGutter' }, mounted() { diff --git a/packages/search/index.js b/packages/search/index.ts similarity index 96% rename from packages/search/index.js rename to packages/search/index.ts index 8729f641..5761d7fb 100644 --- a/packages/search/index.js +++ b/packages/search/index.ts @@ -22,6 +22,10 @@ VantComponent({ } }, + data: { + value: '' + }, + methods: { onChange(event) { this.setData({ value: event.detail }); diff --git a/packages/slider/index.js b/packages/slider/index.ts similarity index 100% rename from packages/slider/index.js rename to packages/slider/index.ts diff --git a/packages/stepper/index.js b/packages/stepper/index.ts similarity index 98% rename from packages/stepper/index.js rename to packages/stepper/index.ts index f0168d20..1518f164 100644 --- a/packages/stepper/index.js +++ b/packages/stepper/index.ts @@ -31,6 +31,10 @@ VantComponent({ } }, + data: { + value: 0 + }, + created() { this.setData({ value: this.range(this.data.value) diff --git a/packages/steps/index.js b/packages/steps/index.ts similarity index 83% rename from packages/steps/index.js rename to packages/steps/index.ts index 3a523764..e565f62d 100644 --- a/packages/steps/index.js +++ b/packages/steps/index.ts @@ -3,14 +3,8 @@ import { VantComponent } from '../common/component'; VantComponent({ props: { icon: String, - steps: { - type: Array, - observer: 'formatSteps' - }, - active: { - type: Number, - observer: 'formatSteps' - }, + steps: Array, + active: Number, direction: { type: String, value: 'horizontal' @@ -21,6 +15,11 @@ VantComponent({ } }, + watch: { + steps: 'formatSteps', + active: 'formatSteps' + }, + created() { this.formatSteps(); }, diff --git a/packages/submit-bar/index.js b/packages/submit-bar/index.ts similarity index 100% rename from packages/submit-bar/index.js rename to packages/submit-bar/index.ts diff --git a/packages/switch-cell/index.js b/packages/switch-cell/index.ts similarity index 78% rename from packages/switch-cell/index.js rename to packages/switch-cell/index.ts index a382d42f..5e41225c 100644 --- a/packages/switch-cell/index.js +++ b/packages/switch-cell/index.ts @@ -6,20 +6,21 @@ VantComponent({ props: { title: String, border: Boolean, + checked: Boolean, loading: Boolean, disabled: Boolean, - checked: { - type: Boolean, - observer(value) { - this.setData({ value }); - } - }, size: { type: String, value: '26px' } }, + watch: { + checked(value) { + this.setData({ value }); + } + }, + created() { this.setData({ value: this.data.checked }); }, diff --git a/packages/switch/index.js b/packages/switch/index.ts similarity index 83% rename from packages/switch/index.js rename to packages/switch/index.ts index 15651d93..e7ac1bcc 100644 --- a/packages/switch/index.js +++ b/packages/switch/index.ts @@ -6,20 +6,21 @@ VantComponent({ classes: ['node-class'], props: { + checked: Boolean, loading: Boolean, disabled: Boolean, - checked: { - type: Boolean, - observer(value) { - this.setData({ value }); - } - }, size: { type: String, value: '30px' } }, + watch: { + checked(value) { + this.setData({ value }); + } + }, + created() { this.setData({ value: this.data.checked }); }, diff --git a/packages/tab/index.js b/packages/tab/index.js deleted file mode 100644 index c28b9646..00000000 --- a/packages/tab/index.js +++ /dev/null @@ -1,36 +0,0 @@ -import { VantComponent } from '../common/component'; - -VantComponent({ - props: { - disabled: { - type: Boolean, - observer() { - const parent = this.getRelationNodes('../tabs/index')[0]; - if (parent) { - parent.updateTabs(); - } - } - }, - title: { - type: String, - observer() { - const parent = this.getRelationNodes('../tabs/index')[0]; - if (parent) { - parent.setLine(); - parent.updateTabs(); - } - } - } - }, - - relations: { - '../tabs/index': { - type: 'ancestor' - } - }, - - data: { - inited: false, - active: false - } -}); diff --git a/packages/tab/index.ts b/packages/tab/index.ts new file mode 100644 index 00000000..3c308f4f --- /dev/null +++ b/packages/tab/index.ts @@ -0,0 +1,36 @@ +import { VantComponent } from '../common/component'; + +VantComponent({ + relations: { + '../tabs/index': { + type: 'ancestor' + } + }, + + props: { + title: String, + disabled: Boolean + }, + + data: { + inited: false, + active: false + }, + + watch: { + disabled() { + const parent = this.getRelationNodes('../tabs/index')[0]; + if (parent) { + parent.updateTabs(); + } + }, + + title() { + const parent = this.getRelationNodes('../tabs/index')[0]; + if (parent) { + parent.setLine(); + parent.updateTabs(); + } + } + } +}); diff --git a/packages/tabbar-item/index.js b/packages/tabbar-item/index.ts similarity index 100% rename from packages/tabbar-item/index.js rename to packages/tabbar-item/index.ts diff --git a/packages/tabbar/index.js b/packages/tabbar/index.ts similarity index 89% rename from packages/tabbar/index.js rename to packages/tabbar/index.ts index 0d1529e3..a838bd0f 100644 --- a/packages/tabbar/index.js +++ b/packages/tabbar/index.ts @@ -2,13 +2,7 @@ import { VantComponent } from '../common/component'; VantComponent({ props: { - active: { - type: Number, - observer(active) { - this.setData({ currentActive: active }); - this.setActiveItem(); - } - }, + active: Number, fixed: { type: Boolean, value: true @@ -24,6 +18,13 @@ VantComponent({ currentActive: -1 }, + watch: { + active(active) { + this.setData({ currentActive: active }); + this.setActiveItem(); + } + }, + created() { this.setData({ currentActive: this.data.active }); }, diff --git a/packages/tabs/index.js b/packages/tabs/index.ts similarity index 88% rename from packages/tabs/index.js rename to packages/tabs/index.ts index baffc3bf..f0a4c985 100644 --- a/packages/tabs/index.js +++ b/packages/tabs/index.ts @@ -1,5 +1,10 @@ import { VantComponent } from '../common/component'; +type TabItemData = { + active: boolean; + inited?: boolean; +}; + VantComponent({ relations: { '../tab/index': { @@ -25,18 +30,11 @@ VantComponent({ }, props: { - color: { - type: String, - observer: 'setLine' - }, - lineWidth: { - type: Number, - observer: 'setLine' - }, + color: String, + lineWidth: Number, active: { type: null, - value: 0, - observer: 'setActiveTab' + value: 0 }, type: { type: String, @@ -52,19 +50,26 @@ VantComponent({ }, swipeThreshold: { type: Number, - value: 4, - observer() { - this.setData({ - scrollable: this.data.tabs.length > this.data.swipeThreshold - }); - } + value: 4 } }, data: { tabs: [], lineStyle: '', - scrollLeft: 0 + scrollLeft: 0, + scrollable: false + }, + + watch: { + swipeThreshold() { + this.setData({ + scrollable: this.data.tabs.length > this.data.swipeThreshold + }); + }, + color: 'setLine', + lineWidth: 'setLine', + active: 'setActiveTab' }, mounted() { @@ -133,7 +138,7 @@ VantComponent({ setActiveTab() { this.data.tabs.forEach((item, index) => { - const data = { + const data: TabItemData = { active: index === this.data.active }; diff --git a/packages/tag/index.js b/packages/tag/index.ts similarity index 100% rename from packages/tag/index.js rename to packages/tag/index.ts diff --git a/packages/toast/index.js b/packages/toast/index.ts similarity index 100% rename from packages/toast/index.js rename to packages/toast/index.ts diff --git a/packages/toast/toast.js b/packages/toast/toast.ts similarity index 58% rename from packages/toast/toast.js rename to packages/toast/toast.ts index 5c491e9e..a853493f 100644 --- a/packages/toast/toast.js +++ b/packages/toast/toast.ts @@ -1,5 +1,30 @@ import { isObj } from '../common/utils'; +type ToastMessage = string | number; + +export type ToastOptions = { + show?: boolean; + type?: string; + mask?: boolean; + zIndex?: number; + position?: string; + duration?: number; + selector?: string; + forbidClick?: boolean; + loadingType?: string; + message?: ToastMessage; +} + +export interface Toast { + (message: ToastOptions | ToastMessage, options?: ToastOptions): Weapp.Component; + loading?(options?: ToastOptions | ToastMessage): Weapp.Component; + success?(options?: ToastOptions | ToastMessage): Weapp.Component; + fail?(options?: ToastOptions | ToastMessage): Weapp.Component; + clear?(): void; + setDefaultOptions?(options: ToastOptions): void; + resetDefaultOptions?(): void; +} + const defaultOptions = { type: 'text', mask: false, @@ -14,17 +39,17 @@ const defaultOptions = { }; let queue = []; -let currentOptions = { ...defaultOptions }; +let currentOptions: ToastOptions = { ...defaultOptions }; -function parseOptions(message) { +function parseOptions(message): ToastOptions { return isObj(message) ? message : { message }; } -function Toast(options = {}) { +const Toast: Toast = (options = {}) => { options = { ...currentOptions, ...parseOptions(options) - }; + } as ToastOptions; const pages = getCurrentPages(); const ctx = pages[pages.length - 1]; @@ -54,7 +79,7 @@ const createMethod = type => options => Toast({ Toast[method] = createMethod(method); }); -Toast.clear = all => { +Toast.clear = () => { queue.forEach(toast => { toast.clear(); }); diff --git a/packages/transition/index.js b/packages/transition/index.ts similarity index 100% rename from packages/transition/index.js rename to packages/transition/index.ts diff --git a/packages/tree-select/index.js b/packages/tree-select/index.ts similarity index 68% rename from packages/tree-select/index.js rename to packages/tree-select/index.ts index 62bb2adc..25bcb417 100644 --- a/packages/tree-select/index.js +++ b/packages/tree-select/index.ts @@ -4,17 +4,10 @@ const ITEM_HEIGHT = 44; VantComponent({ props: { - items: { - type: Array, - observer() { - this.updateSubItems(); - this.updateMainHeight(); - } - }, + items: Array, mainActiveIndex: { type: Number, - value: 0, - observer: 'updateSubItems' + value: 0 }, activeId: { type: Number, @@ -22,11 +15,7 @@ VantComponent({ }, maxHeight: { type: Number, - value: 300, - observer() { - this.updateItemHeight(); - this.updateMainHeight(); - } + value: 300 } }, @@ -36,6 +25,20 @@ VantComponent({ itemHeight: 0 }, + watch: { + items() { + this.updateSubItems(); + this.updateMainHeight(); + }, + + maxHeight() { + this.updateItemHeight(); + this.updateMainHeight(); + }, + + mainActiveIndex: 'updateSubItems' + }, + methods: { // 当一个子项被选择时 onSelectItem(event) { @@ -59,14 +62,22 @@ VantComponent({ // 更新组件整体高度，根据最大高度和当前组件需要展示的高度来决定 updateMainHeight() { - const maxHeight = Math.max(this.data.items.length * ITEM_HEIGHT, this.data.subItems.length * ITEM_HEIGHT); + const maxHeight = Math.max( + this.data.items.length * ITEM_HEIGHT, + this.data.subItems.length * ITEM_HEIGHT + ); this.setData({ mainHeight: Math.min(maxHeight, this.data.maxHeight) }); }, // 更新子项列表高度，根据可展示的最大高度和当前子项列表的高度决定 updateItemHeight() { - this.setData({ itemHeight: Math.min(this.data.subItems.length * ITEM_HEIGHT, this.data.maxHeight) }); + this.setData({ + itemHeight: Math.min( + this.data.subItems.length * ITEM_HEIGHT, + this.data.maxHeight + ) + }); } } }); diff --git a/types/index.d.ts b/types/index.d.ts index 85894679..e4b29b48 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -21,6 +21,7 @@ type RecordToReturn = { export type CombinedComponentInstance< Data, Props, + Watch, Methods, Computed > = Methods & @@ -30,11 +31,12 @@ export type CombinedComponentInstance< data: Data & RecordToAny & RecordToReturn; }; -export type VantComponentOptions = { +export type VantComponentOptions = { data?: Data; - props?: Props & ThisType; field?: boolean; mixins?: Mixins; + props?: Props & ThisType; + watch?: Watch & ThisType; computed?: Computed & ThisType; relations?: Relations; classes?: ExternalClasses; @@ -42,7 +44,7 @@ export type VantComponentOptions = { // lifetimes beforeCreate?: (this: Instance) => void; - created?: () => void; - mounted?: () => void; - destroyed?: () => void; + created?: (this: Instance) => void; + mounted?: (this: Instance) => void; + destroyed?: (this: Instance) => void; }; diff --git a/types/weapp.d.ts b/types/weapp.d.ts index fcd18d6f..c687a8cc 100644 --- a/types/weapp.d.ts +++ b/types/weapp.d.ts @@ -13,6 +13,7 @@ declare function getCurrentPages(): Weapp.Page[]; declare namespace Weapp { interface Component { + [key: string]: any; getRelationNodes(selector: string): any[]; setData(data: any, callback?: Function): void; }