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

119 lines
2.8 KiB
Vue
Raw Normal View History

2019-01-12 11:33:27 +08:00
import { switchPropTypes } from './PropTypes';
import BaseMixin from '../_util/BaseMixin';
2020-01-19 16:58:38 +08:00
import { hasProp, getOptionProps, getComponentFromProp, getListeners } from '../_util/props-util';
2018-02-27 12:14:29 +08:00
// function noop () {
// }
export default {
2019-02-01 17:23:00 +08:00
name: 'VcSwitch',
2018-02-27 12:14:29 +08: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 11:33:27 +08:00
data() {
let checked = false;
2018-02-27 12:14:29 +08:00
if (hasProp(this, 'checked')) {
2019-01-12 11:33:27 +08:00
checked = !!this.checked;
2018-02-27 12:14:29 +08:00
} else {
2019-01-12 11:33:27 +08:00
checked = !!this.defaultChecked;
2018-02-27 12:14:29 +08:00
}
return {
stateChecked: checked,
2019-01-12 11:33:27 +08:00
};
2018-02-27 12:14:29 +08:00
},
2019-02-01 17:23:00 +08:00
watch: {
checked(val) {
this.stateChecked = val;
},
},
2019-01-12 11:33:27 +08:00
mounted() {
2018-02-27 12:14:29 +08:00
this.$nextTick(() => {
2019-01-12 11:33:27 +08:00
const { autoFocus, disabled } = this;
2018-02-27 12:14:29 +08:00
if (autoFocus && !disabled) {
2019-01-12 11:33:27 +08:00
this.focus();
2018-02-27 12:14:29 +08:00
}
2019-01-12 11:33:27 +08:00
});
2018-02-27 12:14:29 +08:00
},
methods: {
2019-06-30 20:43:46 +08:00
setChecked(checked, e) {
2018-02-27 12:14:29 +08:00
if (this.disabled) {
2019-01-12 11:33:27 +08:00
return;
2018-02-27 12:14:29 +08:00
}
if (!hasProp(this, 'checked')) {
2019-01-12 11:33:27 +08:00
this.stateChecked = checked;
2018-02-27 12:14:29 +08:00
}
2019-06-30 20:43:46 +08:00
this.$emit('change', checked, e);
2018-02-27 12:14:29 +08:00
},
2019-03-02 11:21:00 +08:00
handleClick(e) {
2019-01-12 11:33:27 +08:00
const checked = !this.stateChecked;
2019-03-02 11:21:00 +08:00
this.setChecked(checked, e);
this.$emit('click', checked, e);
2018-02-27 12:14:29 +08:00
},
2019-01-12 11:33:27 +08:00
handleKeyDown(e) {
if (e.keyCode === 37) {
// Left
2019-06-30 20:43:46 +08:00
this.setChecked(false, e);
2019-01-12 11:33:27 +08:00
} else if (e.keyCode === 39) {
// Right
2019-06-30 20:43:46 +08:00
this.setChecked(true, e);
2018-02-27 12:14:29 +08:00
}
},
2019-01-12 11:33:27 +08:00
handleMouseUp(e) {
2018-02-27 15:28:30 +08:00
if (this.$refs.refSwitchNode) {
2019-01-12 11:33:27 +08:00
this.$refs.refSwitchNode.blur();
2018-02-27 12:14:29 +08:00
}
2019-01-12 11:33:27 +08:00
this.$emit('mouseup', e);
2018-02-27 12:14:29 +08:00
},
2019-01-12 11:33:27 +08:00
focus() {
this.$refs.refSwitchNode.focus();
2018-02-27 12:14:29 +08:00
},
2019-01-12 11:33:27 +08:00
blur() {
this.$refs.refSwitchNode.blur();
2018-02-27 12:14:29 +08:00
},
},
2019-01-12 11:33:27 +08:00
render() {
2019-08-30 12:55:45 +08:00
const { prefixCls, disabled, loadingIcon, tabIndex, ...restProps } = getOptionProps(this);
2019-01-12 11:33:27 +08:00
const checked = this.stateChecked;
2018-02-27 12:14:29 +08:00
const switchClassName = {
[prefixCls]: true,
[`${prefixCls}-checked`]: checked,
[`${prefixCls}-disabled`]: disabled,
2019-01-12 11:33:27 +08:00
};
2018-02-27 15:28:30 +08:00
const spanProps = {
props: { ...restProps },
on: {
2020-01-19 16:58:38 +08:00
...getListeners(this),
2018-02-27 15:28:30 +08:00
keydown: this.handleKeyDown,
2019-03-02 11:21:00 +08:00
click: this.handleClick,
2018-02-27 15:28:30 +08:00
mouseup: this.handleMouseUp,
},
attrs: {
2018-10-31 19:28:53 +08:00
type: 'button',
role: 'switch',
'aria-checked': checked,
disabled,
2019-08-30 12:55:45 +08:00
tabIndex,
2018-02-27 15:28:30 +08:00
},
class: switchClassName,
ref: 'refSwitchNode',
2019-01-12 11:33:27 +08:00
};
2018-02-27 12:14:29 +08:00
return (
2018-10-31 19:28:53 +08:00
<button {...spanProps}>
{loadingIcon}
2018-02-27 12:14:29 +08:00
<span class={`${prefixCls}-inner`}>
2019-01-12 11:33:27 +08:00
{checked
? getComponentFromProp(this, 'checkedChildren')
: getComponentFromProp(this, 'unCheckedChildren')}
2018-02-27 12:14:29 +08:00
</span>
2018-10-31 19:28:53 +08:00
</button>
2019-01-12 11:33:27 +08:00
);
2018-02-27 12:14:29 +08:00
},
2019-01-12 11:33:27 +08:00
};