ant-design-vue/components/vc-switch/Switch.jsx

118 lines
2.7 KiB
Vue
Raw Normal View History

2019-01-12 03:33:27 +00:00
import { switchPropTypes } from './PropTypes';
import BaseMixin from '../_util/BaseMixin';
import { hasProp, getOptionProps, getComponentFromProp } from '../_util/props-util';
2018-02-27 04:14:29 +00:00
// function noop () {
// }
export default {
2019-02-01 09:23:00 +00:00
name: 'VcSwitch',
2018-02-27 04:14:29 +00:00
mixins: [BaseMixin],
model: {
prop: 'checked',
event: 'change',
},
props: {
...switchPropTypes,
prefixCls: switchPropTypes.prefixCls.def('rc-switch'),
// onChange: switchPropTypes.onChange.def(noop),
// onClick: switchPropTypes.onClick.def(noop),
},
2019-01-12 03:33:27 +00:00
data() {
let checked = false;
2018-02-27 04:14:29 +00:00
if (hasProp(this, 'checked')) {
2019-01-12 03:33:27 +00:00
checked = !!this.checked;
2018-02-27 04:14:29 +00:00
} else {
2019-01-12 03:33:27 +00:00
checked = !!this.defaultChecked;
2018-02-27 04:14:29 +00:00
}
return {
stateChecked: checked,
2019-01-12 03:33:27 +00:00
};
2018-02-27 04:14:29 +00:00
},
2019-02-01 09:23:00 +00:00
watch: {
checked(val) {
this.stateChecked = val;
},
},
2019-01-12 03:33:27 +00:00
mounted() {
2018-02-27 04:14:29 +00:00
this.$nextTick(() => {
2019-01-12 03:33:27 +00:00
const { autoFocus, disabled } = this;
2018-02-27 04:14:29 +00:00
if (autoFocus && !disabled) {
2019-01-12 03:33:27 +00:00
this.focus();
2018-02-27 04:14:29 +00:00
}
2019-01-12 03:33:27 +00:00
});
2018-02-27 04:14:29 +00:00
},
methods: {
2019-01-12 03:33:27 +00:00
setChecked(checked) {
2018-02-27 04:14:29 +00:00
if (this.disabled) {
2019-01-12 03:33:27 +00:00
return;
2018-02-27 04:14:29 +00:00
}
if (!hasProp(this, 'checked')) {
2019-01-12 03:33:27 +00:00
this.stateChecked = checked;
2018-02-27 04:14:29 +00:00
}
2019-01-12 03:33:27 +00:00
this.$emit('change', checked);
2018-02-27 04:14:29 +00:00
},
2019-03-02 03:21:00 +00:00
handleClick(e) {
2019-01-12 03:33:27 +00:00
const checked = !this.stateChecked;
2019-03-02 03:21:00 +00:00
this.setChecked(checked, e);
this.$emit('click', checked, e);
2018-02-27 04:14:29 +00:00
},
2019-01-12 03:33:27 +00:00
handleKeyDown(e) {
if (e.keyCode === 37) {
// Left
this.setChecked(false);
} else if (e.keyCode === 39) {
// Right
this.setChecked(true);
2018-02-27 04:14:29 +00:00
}
},
2019-01-12 03:33:27 +00:00
handleMouseUp(e) {
2018-02-27 07:28:30 +00:00
if (this.$refs.refSwitchNode) {
2019-01-12 03:33:27 +00:00
this.$refs.refSwitchNode.blur();
2018-02-27 04:14:29 +00:00
}
2019-01-12 03:33:27 +00:00
this.$emit('mouseup', e);
2018-02-27 04:14:29 +00:00
},
2019-01-12 03:33:27 +00:00
focus() {
this.$refs.refSwitchNode.focus();
2018-02-27 04:14:29 +00:00
},
2019-01-12 03:33:27 +00:00
blur() {
this.$refs.refSwitchNode.blur();
2018-02-27 04:14:29 +00:00
},
},
2019-01-12 03:33:27 +00:00
render() {
const { prefixCls, disabled, loadingIcon, ...restProps } = getOptionProps(this);
const checked = this.stateChecked;
2018-02-27 04:14:29 +00:00
const switchClassName = {
[prefixCls]: true,
[`${prefixCls}-checked`]: checked,
[`${prefixCls}-disabled`]: disabled,
2019-01-12 03:33:27 +00:00
};
2018-02-27 07:28:30 +00:00
const spanProps = {
props: { ...restProps },
on: {
...this.$listeners,
keydown: this.handleKeyDown,
2019-03-02 03:21:00 +00:00
click: this.handleClick,
2018-02-27 07:28:30 +00:00
mouseup: this.handleMouseUp,
},
attrs: {
2018-10-31 11:28:53 +00:00
type: 'button',
role: 'switch',
'aria-checked': checked,
disabled,
2018-02-27 07:28:30 +00:00
},
class: switchClassName,
ref: 'refSwitchNode',
2019-01-12 03:33:27 +00:00
};
2018-02-27 04:14:29 +00:00
return (
2018-10-31 11:28:53 +00:00
<button {...spanProps}>
{loadingIcon}
2018-02-27 04:14:29 +00:00
<span class={`${prefixCls}-inner`}>
2019-01-12 03:33:27 +00:00
{checked
? getComponentFromProp(this, 'checkedChildren')
: getComponentFromProp(this, 'unCheckedChildren')}
2018-02-27 04:14:29 +00:00
</span>
2018-10-31 11:28:53 +00:00
</button>
2019-01-12 03:33:27 +00:00
);
2018-02-27 04:14:29 +00:00
},
2019-01-12 03:33:27 +00:00
};