diff --git a/packages/cell/index.js b/packages/cell/index.js index cc64b09f3..51d94b722 100644 --- a/packages/cell/index.js +++ b/packages/cell/index.js @@ -1,7 +1,7 @@ import { use, isDef } from '../utils'; import { cellProps } from './shared'; import { emit, inherit, unifySlots } from '../utils/functional'; -import { routeProps, functionalRoute } from '../mixins/router-link'; +import { routeProps, functionalRoute } from '../mixins/router'; import Icon from '../icon'; const [sfc, bem] = use('cell'); diff --git a/packages/goods-action-big-btn/index.js b/packages/goods-action-big-btn/index.js index 75601ee4f..231ee34f5 100644 --- a/packages/goods-action-big-btn/index.js +++ b/packages/goods-action-big-btn/index.js @@ -1,10 +1,13 @@ import { use } from '../utils'; import Button from '../button'; -import { route, routeProps } from '../mixins/router-link'; +import { emit, inherit, unifySlots } from '../utils/functional'; +import { functionalRoute, routeProps } from '../mixins/router'; const [sfc, bem] = use('goods-action-big-btn'); export default sfc({ + functional: true, + props: { ...routeProps, text: String, @@ -13,25 +16,27 @@ export default sfc({ disabled: Boolean }, - methods: { - onClick(event) { - this.$emit('click', event); - route(this.$router, this); - } - }, + render(h, context) { + const { props } = context; + const slots = unifySlots(context); + + const onClick = event => { + emit(context, 'click', event); + functionalRoute(context); + }; - render(h) { return ( ); } diff --git a/packages/goods-action-mini-btn/index.js b/packages/goods-action-mini-btn/index.js index 90585f655..2c2a2887a 100644 --- a/packages/goods-action-mini-btn/index.js +++ b/packages/goods-action-mini-btn/index.js @@ -1,30 +1,42 @@ import { use } from '../utils'; import Icon from '../icon'; -import { route, routeProps } from '../mixins/router-link'; +import { emit, inherit, unifySlots } from '../utils/functional'; +import { functionalRoute, routeProps } from '../mixins/router'; const [sfc, bem] = use('goods-action-mini-btn'); export default sfc({ + functional: true, + props: { ...routeProps, text: String, - info: [String, Number], icon: String, + info: [String, Number], iconClass: String }, - methods: { - onClick(event) { - this.$emit('click', event); - route(this.$router, this); - } - }, + render(h, context) { + const { props } = context; + const slots = unifySlots(context); + + const onClick = event => { + emit(context, 'click', event); + functionalRoute(context); + }; - render(h) { return ( -
- - {this.slots() || this.text} +
+ + {slots.default ? slots.default() : props.text}
); } diff --git a/packages/goods-action/test/index.spec.js b/packages/goods-action/test/index.spec.js index 244380dbc..4cecb254a 100644 --- a/packages/goods-action/test/index.spec.js +++ b/packages/goods-action/test/index.spec.js @@ -1,17 +1,31 @@ import BigBtn from '../../goods-action-big-btn'; -import SmallBtn from '../../goods-action-mini-btn'; +import MiniBtn from '../../goods-action-mini-btn'; import { mount } from '../../../test/utils'; -test('big btn click event', () => { - const wrapper = mount(BigBtn); +test('BigBtn click event', () => { + const click = jest.fn(); + const wrapper = mount(BigBtn, { + context: { + on: { + click + } + } + }); wrapper.trigger('click'); - expect(wrapper.emitted('click')).toBeTruthy(); + expect(click.mock.calls.length).toEqual(1); }); -test('small btn click event', () => { - const wrapper = mount(SmallBtn); +test('MiniBtn click event', () => { + const click = jest.fn(); + const wrapper = mount(MiniBtn, { + context: { + on: { + click + } + } + }); wrapper.trigger('click'); - expect(wrapper.emitted('click')).toBeTruthy(); + expect(click.mock.calls.length).toEqual(1); }); diff --git a/packages/mixins/router-link.ts b/packages/mixins/router.ts similarity index 90% rename from packages/mixins/router-link.ts rename to packages/mixins/router.ts index d7db50a4a..e9c3f7960 100644 --- a/packages/mixins/router-link.ts +++ b/packages/mixins/router.ts @@ -1,8 +1,8 @@ /** - * add Vue-Router support + * Vue Router support */ -import { RenderContext } from 'vue'; +import { RenderContext } from 'vue/types'; import VueRouter, { RawLocation } from 'vue-router/types'; export type RouteConfig = { diff --git a/packages/tabbar-item/index.js b/packages/tabbar-item/index.js index 8cd14b334..9adeb9390 100644 --- a/packages/tabbar-item/index.js +++ b/packages/tabbar-item/index.js @@ -1,7 +1,7 @@ import { use } from '../utils'; import Icon from '../icon'; import Info from '../info'; -import { route, routeProps } from '../mixins/router-link'; +import { route, routeProps } from '../mixins/router'; const [sfc, bem] = use('tabbar-item');