You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ant-design-vue/components/switch/index.jsx

77 lines
1.9 KiB

import PropTypes from '../_util/vue-types'
import { getOptionProps, getComponentFromProp } from '../_util/props-util'
import VcSwitch from '../vc-switch'
import Wave from '../_util/wave'
import Icon from '../icon'
const Switch = {
name: 'ASwitch',
model: {
prop: 'checked',
event: 'change',
},
props: {
prefixCls: PropTypes.string.def('ant-switch'),
// size=default and size=large are the same
size: PropTypes.oneOf(['small', 'default', 'large']),
disabled: PropTypes.bool,
checkedChildren: PropTypes.any,
unCheckedChildren: PropTypes.any,
tabIndex: PropTypes.number,
checked: PropTypes.bool,
defaultChecked: PropTypes.bool,
autoFocus: PropTypes.bool,
loading: PropTypes.bool,
},
methods: {
focus () {
this.$refs.refSwitchNode.focus()
},
blur () {
this.$refs.refSwitchNode.blur()
},
},
render () {
const { prefixCls, size, loading, ...restProps } = getOptionProps(this)
const classes = {
[`${prefixCls}-small`]: size === 'small',
[`${prefixCls}-loading`]: loading,
}
const loadingIcon = loading ? (
<Icon
type='loading'
class={`${prefixCls}-loading-icon`}
/>
) : null
const switchProps = {
props: {
...restProps,
prefixCls,
loadingIcon,
},
on: this.$listeners,
class: classes,
ref: 'refSwitchNode',
}
return (
<Wave insertExtraNode>
<VcSwitch
{...switchProps}
>
<template slot='checkedChildren'>{getComponentFromProp(this, 'checkedChildren')}</template>
<template slot='unCheckedChildren'>{getComponentFromProp(this, 'unCheckedChildren')}</template>
</VcSwitch>
</Wave>
)
},
}
/* istanbul ignore next */
Switch.install = function (Vue) {
Vue.component(Switch.name, Switch)
}
export default Switch