Browse Source

fix switch

pull/165/head
tangjinzhou 7 years ago
parent
commit
ab89e57a53
  1. 26
      components/switch/index.vue
  2. 51
      components/vc-switch/Switch.vue

26
components/switch/index.vue

@ -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>
)
},

51
components/vc-switch/Switch.vue

@ -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…
Cancel
Save