test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-16 01:41:15 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix collapse

Browse Source
This commit is contained in:
wangxueliang 2018-02-02 16:34:27 +08:00
parent e41981a95c
commit 595f535cd4
12 changed files with 57 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/collapse/Collapse.vue
View File

@ -6,6 +6,10 @@ import RcCollapse from './src'
import { collapseProps } from './src/commonProps'
export default {
model: {
prop: 'activeKey',
event: 'change',
},
props: {
...collapseProps,
bordered: PropTypes.bool.def(true),

6
components/collapse/demo/accordion.md
View File

@ -12,13 +12,13 @@ Accordion mode, only one panel can be expanded at a time. The first panel will b
<template>
<div>
<a-collapse accordion>
<a-collapse-panel header="This is panel header 1" name="1">
<a-collapse-panel header="This is panel header 1" key="1">
<p>{{text}}</p>
</a-collapse-panel>
<a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
<a-collapse-panel header="This is panel header 2" key="2" :disabled='false'>
<p>{{text}}</p>
</a-collapse-panel>
<a-collapse-panel header="This is panel header 3" name="3">
<a-collapse-panel header="This is panel header 3" key="3">
<p>{{text}}</p>
</a-collapse-panel>
</a-collapse>

10
components/collapse/demo/basic.md
View File

@ -11,14 +11,14 @@ More than one panel can be expanded at a time, the first panel is initialized to
```html
<template>
<div>
<a-collapse v-model="value" @change="changeActivekey">
<a-collapse-panel header="This is panel header 1" name="1">
<a-collapse v-model="activeKey" @change="changeActivekey">
<a-collapse-panel header="This is panel header 1" key="1">
<p>{{text}}</p>
</a-collapse-panel>
<a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
<a-collapse-panel header="This is panel header 2" key="2" :disabled='false'>
<p>{{text}}</p>
</a-collapse-panel>
<a-collapse-panel header="This is panel header 3" name="3" disabled>
<a-collapse-panel header="This is panel header 3" key="3" disabled>
<p>{{text}}</p>
</a-collapse-panel>
</a-collapse>
@ -29,7 +29,7 @@ More than one panel can be expanded at a time, the first panel is initialized to
data () {
return {
text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
value: ['1']
activeKey: ['1']
}
},
methods: {

8
components/collapse/demo/borderless.md
View File

@ -11,14 +11,14 @@ A borderless style of Collapse.
```html
<template>
<div>
<a-collapse :defaultValue="'1'" :bordered="false">
<a-collapse-panel header="This is panel header 1" name="1">
<a-collapse defaultActiveKey="1" :bordered="false">
<a-collapse-panel header="This is panel header 1" key="1">
<p>{{text}}</p>
</a-collapse-panel>
<a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
<a-collapse-panel header="This is panel header 2" key="2" :disabled='false'>
<p>{{text}}</p>
</a-collapse-panel>
<a-collapse-panel header="This is panel header 3" name="3">
<a-collapse-panel header="This is panel header 3" key="3">
<p>{{text}}</p>
</a-collapse-panel>
</a-collapse>

8
components/collapse/demo/custom.md
View File

@ -11,14 +11,14 @@ Customize the background, border and margin styles for each panel.
```html
<template>
<div>
<a-collapse :defaultValue="'1'" :bordered="false">
<a-collapse-panel header="This is panel header 1" name="1" :style="customStyle">
<a-collapse defaultActiveKey="1" :bordered="false">
<a-collapse-panel header="This is panel header 1" key="1" :style="customStyle">
<p>{{text}}</p>
</a-collapse-panel>
<a-collapse-panel header="This is panel header 2" name="2" :style="customStyle">
<a-collapse-panel header="This is panel header 2" key="2" :style="customStyle">
<p>{{text}}</p>
</a-collapse-panel>
<a-collapse-panel header="This is panel header 3" name="3" :style="customStyle">
<a-collapse-panel header="This is panel header 3" key="3" :style="customStyle">
<p>{{text}}</p>
</a-collapse-panel>
</a-collapse>

10
components/collapse/demo/mix.md
View File

@ -12,17 +12,17 @@
<template>
<div>
<a-collapse @change="changeActivekey">
<a-collapse-panel header="This is panel header 1" name="1">
<a-collapse :defaultValue="'1'">
<a-collapse-panel header="This is panel nest panel" name="1">
<a-collapse-panel header="This is panel header 1" key="1">
<a-collapse defaultActiveKey="4">
<a-collapse-panel header="This is panel nest panel" key="4">
<p>{{text}}</p>
</a-collapse-panel>
</a-collapse>
</a-collapse-panel>
<a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
<a-collapse-panel header="This is panel header 2" key="2" :disabled='false'>
<p>{{text}}</p>
</a-collapse-panel>
<a-collapse-panel header="This is panel header 3" name="3">
<a-collapse-panel header="This is panel header 3" key="3">
<p>{{text}}</p>
</a-collapse-panel>
</a-collapse>

6
components/collapse/demo/noarrow.md
View File

@ -11,11 +11,11 @@ You can disable showing arrow icon by passing `:showArrow="false"` to `a-collaps
```html
<template>
<div>
<a-collapse :defaultValue="'1'" @change="changeActivekey">
<a-collapse-panel header="This is panel header with arrow icon" name="1">
<a-collapse defaultActiveKey="1" @change="changeActivekey">
<a-collapse-panel header="This is panel header with arrow icon" key="1">
<p>{{text}}</p>
</a-collapse-panel>
<a-collapse-panel header="This is panel header with no arrow icon" name="2" :showArrow="false">
<a-collapse-panel header="This is panel header with no arrow icon" key="2" :showArrow="false">
<p>{{text}}</p>
</a-collapse-panel>
</a-collapse>

6
components/collapse/index.en-US.md
View File

@ -4,8 +4,8 @@
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| value | name of the active panel | \[]\|string | No default value. In `accordion` mode, it's the name of the first panel. |
| defaultValue | name of the initial active panel | string | - |
| activeKey | Key of the active panel | string\[]\|string | No default value. In `accordion` mode, it's the key of the first panel. |
| defaultActiveKey | Key of the initial active panel | string | - |
| change | Callback function executed when active panel is changed | Function | - |
### Collapse.Panel
@ -14,5 +14,5 @@
| -------- | ----------- | ---- | ------- |
| disabled | If `true`, panel cannot be opened or closed | boolean | `false` |
| header | Title of the panel | string | - |
| name | Unique name identifying the panel from among its siblings | string | - |
| key | Unique key identifying the panel from among its siblings | string | - |
| showArrow | If `false`, panel will not show arrow icon | boolean | `true` |

6
components/collapse/index.zh-CN.md
View File

@ -4,8 +4,8 @@
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| value | 当前激活 tab 面板的 name | []\|string | 默认无，accordion模式下默认第一个元素 |
| defaultValue | 初始化选中面板的 name | string | 无 |
| activeKey | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion模式下默认第一个元素 |
| defaultActiveKey | 初始化选中面板的 key | string | 无 |
| change | 切换面板的回调 | Function | 无 |
### Collapse.Panel
@ -14,4 +14,4 @@
| --- | --- | --- | --- |
| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false |
| header | 面板头内容 | string | 无 |
| name | 对应 activeKey | string | 无 |
| key | 对应 activeKey | string | 无 |

24
components/collapse/src/Collapse.vue
View File

@ -17,15 +17,19 @@ function _toArray (activeKey) {
export default {
name: 'Collapse',
mixins: [BaseMixin],
model: {
prop: 'activeKey',
event: 'change',
},
props: {
...collapseProps,
openAnimation: PropTypes.object,
},
data () {
const { value, defaultValue, openAnimation, prefixCls } = this.$props
let currentActiveKey = defaultValue
if (hasProp(this, 'value')) {
currentActiveKey = value
const { activeKey, defaultActiveKey, openAnimation, prefixCls } = this.$props
let currentActiveKey = defaultActiveKey
if (hasProp(this, 'activeKey')) {
currentActiveKey = activeKey
}
const currentOpenAnimations = openAnimation || openAnimationFactory(prefixCls)
return {
@ -57,18 +61,19 @@ export default {
const newChildren = []
this.$slots.default.forEach((child, index) => {
if (isEmptyElement(child)) return
const { header, headerClass, disabled, name = String(index) } = getPropsData(child)
const { header, headerClass, disabled } = getPropsData(child)
let isActive = false
const key = child.key || String(index)
if (accordion) {
isActive = activeKey[0] === name
isActive = activeKey[0] === key
} else {
isActive = activeKey.indexOf(name) > -1
isActive = activeKey.indexOf(key) > -1
}
let panelEvents = {}
if (!disabled && disabled !== '') {
panelEvents = {
itemClick: () => { this.onClickItem(name) },
itemClick: () => { this.onClickItem(key) },
}
}
@ -93,11 +98,10 @@ export default {
setActiveKey (activeKey) {
this.setState({ stateActiveKey: activeKey })
this.$emit('change', this.accordion ? activeKey[0] : activeKey)
this.$emit('input', this.accordion ? activeKey[0] : activeKey)
},
},
watch: {
value (val) {
activeKey (val) {
this.setState({
stateActiveKey: _toArray(val),
})

8
components/collapse/src/PanelContent.vue
View File

@ -8,8 +8,14 @@ export default {
isActive: PropTypes.bool,
destroyInactivePanel: PropTypes.bool,
},
data () {
return {
_isActive: undefined,
}
},
render () {
if (!this.isActive) {
this._isActive = this._isActive || this.isActive
if (!this._isActive) {
return null
}
const { prefixCls, isActive, destroyInactivePanel } = this.$props

4
components/collapse/src/commonProps.js
View File

@ -2,11 +2,11 @@ import PropTypes from '../../_util/vue-types'
const collapseProps = {
prefixCls: PropTypes.string.def('ant-collapse'),
value: PropTypes.oneOfType([
activeKey: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string),
]),
defaultValue: PropTypes.oneOfType([
defaultActiveKey: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string),
]),