128 lines
3.3 KiB
Vue
128 lines
3.3 KiB
Vue
<script>
|
|
import PropTypes from '../../_util/vue-types'
|
|
import BaseMixin from '../../_util/BaseMixin'
|
|
import { hasProp, getPropsData, isEmptyElement } from '../../_util/props-util'
|
|
import { cloneElement } from '../../_util/vnode'
|
|
import openAnimationFactory from './openAnimationFactory'
|
|
import { collapseProps } from './commonProps'
|
|
|
|
function _toArray (activeKey) {
|
|
let currentActiveKey = activeKey
|
|
if (!Array.isArray(currentActiveKey)) {
|
|
currentActiveKey = currentActiveKey ? [currentActiveKey] : []
|
|
}
|
|
return currentActiveKey
|
|
}
|
|
|
|
export default {
|
|
name: 'Collapse',
|
|
mixins: [BaseMixin],
|
|
model: {
|
|
prop: 'activeKey',
|
|
event: 'change',
|
|
},
|
|
props: {
|
|
...collapseProps,
|
|
openAnimation: PropTypes.object,
|
|
},
|
|
data () {
|
|
const { activeKey, defaultActiveKey, openAnimation, prefixCls } = this.$props
|
|
let currentActiveKey = defaultActiveKey
|
|
if (hasProp(this, 'activeKey')) {
|
|
currentActiveKey = activeKey
|
|
}
|
|
const currentOpenAnimations = openAnimation || openAnimationFactory(prefixCls)
|
|
return {
|
|
currentOpenAnimations,
|
|
stateActiveKey: _toArray(currentActiveKey),
|
|
}
|
|
},
|
|
methods: {
|
|
onClickItem (key) {
|
|
let activeKey = this.stateActiveKey
|
|
if (this.accordion) {
|
|
activeKey = activeKey[0] === key ? [] : [key]
|
|
} else {
|
|
activeKey = [...activeKey]
|
|
const index = activeKey.indexOf(key)
|
|
const isActive = index > -1
|
|
if (isActive) {
|
|
// remove active state
|
|
activeKey.splice(index, 1)
|
|
} else {
|
|
activeKey.push(key)
|
|
}
|
|
}
|
|
this.setActiveKey(activeKey)
|
|
},
|
|
getItems () {
|
|
const activeKey = this.stateActiveKey
|
|
const { prefixCls, accordion, destroyInactivePanel } = this.$props
|
|
const newChildren = []
|
|
this.$slots.default.forEach((child, index) => {
|
|
if (isEmptyElement(child)) return
|
|
const { header, headerClass, disabled } = getPropsData(child)
|
|
let isActive = false
|
|
const key = child.key || String(index)
|
|
if (accordion) {
|
|
isActive = activeKey[0] === key
|
|
} else {
|
|
isActive = activeKey.indexOf(key) > -1
|
|
}
|
|
|
|
let panelEvents = {}
|
|
if (!disabled && disabled !== '') {
|
|
panelEvents = {
|
|
itemClick: () => { this.onClickItem(key) },
|
|
}
|
|
}
|
|
|
|
const props = {
|
|
props: {
|
|
header,
|
|
headerClass,
|
|
isActive,
|
|
prefixCls,
|
|
destroyInactivePanel,
|
|
openAnimation: this.currentOpenAnimations,
|
|
},
|
|
on: {
|
|
...panelEvents,
|
|
},
|
|
}
|
|
|
|
newChildren.push(cloneElement(child, props))
|
|
})
|
|
return newChildren
|
|
},
|
|
setActiveKey (activeKey) {
|
|
this.setState({ stateActiveKey: activeKey })
|
|
this.$emit('change', this.accordion ? activeKey[0] : activeKey)
|
|
},
|
|
},
|
|
watch: {
|
|
activeKey (val) {
|
|
this.setState({
|
|
stateActiveKey: _toArray(val),
|
|
})
|
|
},
|
|
openAnimation (val) {
|
|
this.setState({
|
|
currentOpenAnimations: val,
|
|
})
|
|
},
|
|
},
|
|
render () {
|
|
const { prefixCls } = this.$props
|
|
const collapseClassName = {
|
|
[prefixCls]: true,
|
|
}
|
|
return (
|
|
<div class={collapseClassName}>
|
|
{this.getItems()}
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
</script>
|