blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Switch: functional (#2736)

Browse Source
This commit is contained in:
neverland 2019-02-14 13:58:07 +08:00 committed by GitHub
parent 5a9143c736
commit 144a3fefd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 65 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
packages/switch/index.js
View File

@ -1,41 +1,43 @@
import { use } from '../utils'; import { use } from '../utils';
import Loading from '../loading'; import Loading from '../loading';
import { switchProps } from './shared'; import { switchProps } from './shared';
import { emit, inherit } from '../utils/functional';
const [sfc, bem] = use('switch'); const [sfc, bem] = use('switch');
export default sfc({ function Switch(h, props, slots, ctx) {
props: switchProps, const { value, loading, disabled, activeValue, inactiveValue } = props;
methods: { const style = {
onClick() { fontSize: props.size,
if (!this.disabled && !this.loading) { backgroundColor: value ? props.activeColor : props.inactiveColor
const checked = this.value === this.activeValue; };
const value = checked ? this.inactiveValue : this.activeValue;
this.$emit('input', value); const onClick = event => {
this.$emit('change', value); if (!disabled && !loading) {
} const newValue = value === activeValue ? inactiveValue : activeValue;
emit(ctx, 'input', newValue);
emit(ctx, 'change', newValue);
} }
}, };
render(h) { return (
const { value } = this; <div
const style = { class={bem({
fontSize: this.size, on: value === activeValue,
backgroundColor: value ? this.activeColor : this.inactiveColor disabled
}; })}
style={style}
return ( onClick={onClick}
<div {...inherit(ctx)}
class={bem({ >
on: value === this.activeValue, <div class={bem('node')}>
disabled: this.disabled {loading && <Loading class={bem('loading')} />}
})}
style={style}
onClick={this.onClick}
>
<div class={bem('node')}>{this.loading && <Loading class={bem('loading')} />}</div>
</div> </div>
); </div>
} );
}); }
Switch.props = switchProps;
export default sfc(Switch);

37
packages/switch/test/index.spec.js
View File

@ -2,12 +2,39 @@ import Switch from '..';
import { mount } from '../../../test/utils'; import { mount } from '../../../test/utils';
test('emit event', () => { test('emit event', () => {
const wrapper = mount(Switch); const input = jest.fn();
const change = jest.fn();
const wrapper = mount(Switch, {
context: {
on: {
input,
change
}
}
});
wrapper.trigger('click'); wrapper.trigger('click');
wrapper.trigger('click'); wrapper.trigger('click');
wrapper.setProps({ disabled: true });
wrapper.trigger('click');
expect(wrapper.emitted('input')).toEqual([[true], [true]]); expect(input.mock.calls).toEqual([[true], [true]]);
expect(wrapper.emitted('change')).toEqual([[true], [true]]); expect(change.mock.calls).toEqual([[true], [true]]);
});
test('disabled', () => {
const input = jest.fn();
const change = jest.fn();
const wrapper = mount(Switch, {
context: {
on: {
input,
change
}
},
propsData: {
disabled: true
}
});
wrapper.trigger('click');
expect(input.mock.calls.length).toBeFalsy();
expect(change.mock.calls.length).toBeFalsy();
}); });