From a190ce84be94895d54a54dadaddb0f80e7042b55 Mon Sep 17 00:00:00 2001 From: 梁灏 Date: Thu, 2 Mar 2017 15:05:06 +0800 Subject: [PATCH] support Collapse --- CHANGE.md | 4 +++- src/components/collapse/collapse.vue | 39 ++++++++++++++++++++++++--------------- src/components/collapse/panel.vue | 11 ++++++----- src/components/progress/progress.vue | 2 +- src/index.js | 6 +++--- test/app.vue | 1 + test/main.js | 4 ++++ test/routers/collapse.vue | 30 ++++++++++++++++++++++++++++++ 8 files changed, 72 insertions(+), 25 deletions(-) create mode 100644 test/routers/collapse.vue diff --git a/CHANGE.md b/CHANGE.md index ae0184a..a03f293 100644 --- a/CHANGE.md +++ b/CHANGE.md @@ -17,4 +17,6 @@ class 改为了 className ### Progress (名称有警告) 新增 on-status-change 事件 ### Upload -父级不能 computed Upload 的 fileList 了 \ No newline at end of file +父级不能 computed Upload 的 fileList 了 +### Collapse +废弃 activeKey，使用 v-model，key 是保留的，更名为 name \ No newline at end of file diff --git a/src/components/collapse/collapse.vue b/src/components/collapse/collapse.vue index 2fd163d..0b6125d 100644 --- a/src/components/collapse/collapse.vue +++ b/src/components/collapse/collapse.vue @@ -12,16 +12,21 @@ type: Boolean, default: false }, - activeKey: { + value: { type: [Array, String] } }, + data () { + return { + currentValue: this.value + }; + }, computed: { classes () { return `${prefixCls}`; } }, - compiled () { + mounted () { this.setActive(); }, methods: { @@ -29,13 +34,13 @@ const activeKey = this.getActiveKey(); this.$children.forEach((child, index) => { - const key = child.key || index.toString(); + const name = child.name || index.toString(); let isActive = false; if (self.accordion) { - isActive = activeKey === key; + isActive = activeKey === name; } else { - isActive = activeKey.indexOf(key) > -1; + isActive = activeKey.indexOf(name) > -1; } child.isActive = isActive; @@ -43,7 +48,7 @@ }); }, getActiveKey () { - let activeKey = this.activeKey || []; + let activeKey = this.currentValue || []; const accordion = this.accordion; if (!Array.isArray(activeKey)) { @@ -61,36 +66,40 @@ return activeKey; }, toggle (data) { - const key = data.key.toString(); + const name = data.name.toString(); let newActiveKey = []; if (this.accordion) { if (!data.isActive) { - newActiveKey.push(key); + newActiveKey.push(name); } } else { let activeKey = this.getActiveKey(); - const keyIndex = activeKey.indexOf(key); + const nameIndex = activeKey.indexOf(name); if (data.isActive) { - if (keyIndex > -1) { - activeKey.splice(keyIndex, 1); + if (nameIndex > -1) { + activeKey.splice(nameIndex, 1); } } else { - if (keyIndex < 0) { - activeKey.push(key); + if (nameIndex < 0) { + activeKey.push(name); } } newActiveKey = activeKey; } - this.activeKey = newActiveKey; + this.currentValue = newActiveKey; + this.$emit('input', newActiveKey); this.$emit('on-change', newActiveKey); } }, watch: { - activeKey () { + value (val) { + this.currentValue = val; + }, + currentValue () { this.setActive(); } } diff --git a/src/components/collapse/panel.vue b/src/components/collapse/panel.vue index bcfc94f..fee3ca0 100644 --- a/src/components/collapse/panel.vue +++ b/src/components/collapse/panel.vue @@ -4,7 +4,7 @@ -
+
@@ -16,13 +16,13 @@ export default { components: { Icon }, props: { - key: { + name: { type: String } }, data () { return { - index: 0, // use index for default when key is null + index: 0, // use index for default when name is null isActive: false }; }, @@ -38,7 +38,7 @@ headerClasses () { return `${prefixCls}-header`; }, - concentClasses () { + contentClasses () { return `${prefixCls}-content`; }, boxClasses () { @@ -47,8 +47,9 @@ }, methods: { toggle () { + // todo while向上查找 this.$parent.toggle({ - key: this.key || this.index, + name: this.name || this.index, isActive: this.isActive }); } diff --git a/src/components/progress/progress.vue b/src/components/progress/progress.vue index 6cc472a..85e809b 100644 --- a/src/components/progress/progress.vue +++ b/src/components/progress/progress.vue @@ -48,7 +48,7 @@ data () { return { currentStatus: this.status - } + }; }, computed: { isStatus () { diff --git a/src/index.js b/src/index.js index bd02f90..c970dc5 100644 --- a/src/index.js +++ b/src/index.js @@ -12,7 +12,7 @@ import Button from './components/button'; // import Cascader from './components/cascader'; import Checkbox from './components/checkbox'; // import Circle from './components/circle'; -// import Collapse from './components/collapse'; +import Collapse from './components/collapse'; // import DatePicker from './components/date-picker'; // import Dropdown from './components/dropdown'; // import Form from './components/form'; @@ -70,7 +70,7 @@ const iview = { // iForm: Form, // FormItem: Form.Item, iCol: Col, - // Collapse, + Collapse, Icon, // iInput: Input, Input, @@ -86,7 +86,7 @@ const iview = { // iOption: Option, // OptionGroup, // Page, - // Panel: Collapse.Panel, + Panel: Collapse.Panel, // Poptip, Progress, Radio, diff --git a/test/app.vue b/test/app.vue index 3168c85..5af50c8 100644 --- a/test/app.vue +++ b/test/app.vue @@ -28,6 +28,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
  • InputNumber
  • Progress
  • Upload
    • +
  • Collapse
    • diff --git a/test/main.js b/test/main.js index 00c3424..2bd3495 100644 --- a/test/main.js +++ b/test/main.js @@ -76,6 +76,10 @@ const router = new VueRouter({ { path: '/progress', component: require('./routers/progress.vue') + }, + { + path: '/collapse', + component: require('./routers/collapse.vue') } ] }); diff --git a/test/routers/collapse.vue b/test/routers/collapse.vue new file mode 100644 index 0000000..92a87a4 --- /dev/null +++ b/test/routers/collapse.vue @@ -0,0 +1,30 @@ + + \ No newline at end of file -- libgit2 0.21.4