fix switch
parent
166fab0dfe
commit
ab89e57a53
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import { getOptionProps } from '../_util/props-util'
|
||||
import { getOptionProps, getComponentFromProp } from '../_util/props-util'
|
||||
import VcSwitch from '../vc-switch'
|
||||
|
||||
export default {
|
||||
|
@ -22,23 +22,12 @@ export default {
|
|||
autoFocus: PropTypes.bool,
|
||||
loading: PropTypes.bool,
|
||||
},
|
||||
monted () {
|
||||
this.$nextTick(() => {
|
||||
this.refSwitchNode = this.$refs.refSwitchNode
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
focus () {
|
||||
this.refSwitchNode.focus()
|
||||
this.$refs.refSwitchNode.focus()
|
||||
},
|
||||
blur () {
|
||||
this.refSwitchNode.blur()
|
||||
},
|
||||
getChildren () {
|
||||
return {
|
||||
checkedChildren: this.$slots.checkedChildren || null,
|
||||
unCheckedChildren: this.$slots.unCheckedChildren || null,
|
||||
}
|
||||
this.$refs.refSwitchNode.blur()
|
||||
},
|
||||
},
|
||||
|
||||
|
@ -57,17 +46,12 @@ export default {
|
|||
class: classes,
|
||||
ref: 'refSwitchNode',
|
||||
}
|
||||
const children = this.getChildren()
|
||||
return (
|
||||
<VcSwitch
|
||||
{...switchProps}
|
||||
>
|
||||
{children.checkedChildren ? (
|
||||
<template slot='checkedChildren'>{children.checkedChildren}</template>
|
||||
) : null}
|
||||
{children.unCheckedChildren ? (
|
||||
<template slot='unCheckedChildren'>{children.unCheckedChildren}</template>
|
||||
) : null}
|
||||
<template slot='checkedChildren'>{getComponentFromProp(this, 'checkedChildren')}</template>
|
||||
<template slot='unCheckedChildren'>{getComponentFromProp(this, 'unCheckedChildren')}</template>
|
||||
</VcSwitch>
|
||||
)
|
||||
},
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
import { switchPropTypes } from './PropTypes'
|
||||
import BaseMixin from '../_util/BaseMixin'
|
||||
import { hasProp, filterEmpty, getOptionProps } from '../_util/props-util'
|
||||
import { hasProp, getOptionProps, getComponentFromProp } from '../_util/props-util'
|
||||
|
||||
// function noop () {
|
||||
// }
|
||||
|
@ -32,13 +32,12 @@ export default {
|
|||
stateChecked: checked,
|
||||
}
|
||||
},
|
||||
monted () {
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
const { autoFocus, disabled } = this
|
||||
if (autoFocus && !disabled) {
|
||||
this.focus()
|
||||
}
|
||||
this.refSwitchNode = this.$refs.refSwitchNode
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
|
@ -71,25 +70,16 @@ export default {
|
|||
}
|
||||
},
|
||||
handleMouseUp (e) {
|
||||
if (this.refSwitchNode) {
|
||||
this.refSwitchNode.blur()
|
||||
if (this.$refs.refSwitchNode) {
|
||||
this.$refs.refSwitchNode.blur()
|
||||
}
|
||||
this.$emit('mouseUp', e)
|
||||
this.$emit('mouseup', e)
|
||||
},
|
||||
focus () {
|
||||
this.refSwitchNode.focus()
|
||||
this.$refs.refSwitchNode.focus()
|
||||
},
|
||||
blur () {
|
||||
this.refSwitchNode.blur()
|
||||
},
|
||||
getChildren (slotName) {
|
||||
if (hasProp(this, slotName)) {
|
||||
return this[slotName]
|
||||
}
|
||||
if (this.$slots && this.$slots[slotName]) {
|
||||
return filterEmpty(this.$slots[slotName])
|
||||
}
|
||||
return null
|
||||
this.$refs.refSwitchNode.blur()
|
||||
},
|
||||
},
|
||||
render () {
|
||||
|
@ -101,19 +91,24 @@ export default {
|
|||
[`${prefixCls}-checked`]: checked,
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
}
|
||||
const childrenType = checked ? 'checkedChildren' : 'unCheckedChildren'
|
||||
const spanProps = {
|
||||
props: { ...restProps },
|
||||
on: {
|
||||
...this.$listeners,
|
||||
keydown: this.handleKeyDown,
|
||||
click: this.toggle,
|
||||
mouseup: this.handleMouseUp,
|
||||
},
|
||||
attrs: {
|
||||
tabIndex: switchTabIndex,
|
||||
},
|
||||
class: switchClassName,
|
||||
ref: 'refSwitchNode',
|
||||
}
|
||||
return (
|
||||
<span
|
||||
{...restProps}
|
||||
class={switchClassName}
|
||||
tabIndex={switchTabIndex}
|
||||
ref='refSwitchNode'
|
||||
onKeydown={this.handleKeyDown}
|
||||
onClick={this.toggle}
|
||||
onMouseup={this.handleMouseUp}
|
||||
>
|
||||
<span {...spanProps}>
|
||||
<span class={`${prefixCls}-inner`}>
|
||||
{this.getChildren(childrenType)}
|
||||
{checked ? getComponentFromProp(this, 'checkedChildren') : getComponentFromProp(this, 'unCheckedChildren')}
|
||||
</span>
|
||||
</span>
|
||||
)
|
||||
|
|
Loading…
Reference in New Issue