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

124 lines
2.8 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, getComponent } 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],
inheritAttrs: false,
2018-02-27 04:14:29 +00:00
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(() => {
2020-07-17 09:36:58 +00:00
const { autofocus, disabled } = this;
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: {
saveRef(c) {
this.refSwitchNode = c;
},
2019-06-30 12:43:46 +00:00
setChecked(checked, e) {
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
}
2020-07-24 06:23:14 +00:00
this.__emit('change', checked, e);
this.__emit('update:checked', 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);
2020-07-24 06:23:14 +00:00
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
2019-06-30 12:43:46 +00:00
this.setChecked(false, e);
2019-01-12 03:33:27 +00:00
} else if (e.keyCode === 39) {
// Right
2019-06-30 12:43:46 +00:00
this.setChecked(true, e);
2018-02-27 04:14:29 +00:00
}
},
2019-01-12 03:33:27 +00:00
handleMouseUp(e) {
this.refSwitchNode?.blur();
2020-07-24 06:23:14 +00:00
this.__emit('mouseup', e);
2018-02-27 04:14:29 +00:00
},
2019-01-12 03:33:27 +00:00
focus() {
this.refSwitchNode?.focus();
2018-02-27 04:14:29 +00:00
},
2019-01-12 03:33:27 +00:00
blur() {
this.refSwitchNode?.blur();
2018-02-27 04:14:29 +00:00
},
},
2019-01-12 03:33:27 +00:00
render() {
const {
prefixCls,
disabled,
loadingIcon,
defaultChecked,
2020-07-17 09:36:58 +00:00
autofocus,
...restProps
} = getOptionProps(this);
2019-01-12 03:33:27 +00:00
const checked = this.stateChecked;
const { $attrs } = this;
2018-02-27 04:14:29 +00:00
const switchClassName = {
[$attrs.class]: $attrs.class,
2018-02-27 04:14:29 +00:00
[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 = {
...restProps,
...$attrs,
onKeydown: this.handleKeyDown,
onClick: this.handleClick,
onMouseup: this.handleMouseUp,
type: 'button',
role: 'switch',
'aria-checked': checked,
disabled,
2018-02-27 07:28:30 +00:00
class: switchClassName,
2020-06-24 15:45:36 +00:00
ref: this.saveRef,
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
? getComponent(this, 'checkedChildren')
: getComponent(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
};