Commit 9c529885557d9b3ad03f0513d2e7ef1958521e9f
1 parent
4258a559
Cell component add @on-click event
Showing
3 changed files
with
29 additions
and
8 deletions
Show diff stats
examples/routers/cell.vue
| 1 | 1 | <template> |
| 2 | 2 | <div style="margin: 100px;background: #f8f8f9;padding: 100px;"> |
| 3 | 3 | <Card title="选项" :padding="0" shadow style="width: 300px;"> |
| 4 | - <CellGroup> | |
| 5 | - <Cell title="标题一" label="附属内容" to="/button"></Cell> | |
| 6 | - <Cell title="标题一" label="附属内容" extra="详细信息"></Cell> | |
| 7 | - <Cell title="标题一" label="附属内容" extra="详细信息" to="/button"></Cell> | |
| 8 | - <Cell title="标题一" label="附属内容" selected></Cell> | |
| 4 | + <CellGroup @on-click="handleClick"> | |
| 5 | + <Cell title="标题一" name="a1" label="附属内容" to="/button"></Cell> | |
| 6 | + <Cell title="标题一" name="a2" label="附属内容" extra="详细信息"></Cell> | |
| 7 | + <Cell title="标题一" name="a3" label="附属内容" extra="详细信息" to="/button"></Cell> | |
| 8 | + <Cell title="标题一" name="a4" label="附属内容" selected></Cell> | |
| 9 | 9 | <Cell title="标题二"> |
| 10 | 10 | <Icon type="trash-a" slot="icon"></Icon> |
| 11 | 11 | </Cell> |
| ... | ... | @@ -30,6 +30,11 @@ |
| 30 | 30 | return { |
| 31 | 31 | switch1: false |
| 32 | 32 | } |
| 33 | + }, | |
| 34 | + methods: { | |
| 35 | + handleClick (name) { | |
| 36 | + console.log(name); | |
| 37 | + } | |
| 33 | 38 | } |
| 34 | 39 | } |
| 35 | 40 | </script> | ... | ... |
src/components/cell/cell-group.vue
| ... | ... | @@ -5,6 +5,16 @@ |
| 5 | 5 | </template> |
| 6 | 6 | <script> |
| 7 | 7 | export default { |
| 8 | - name: 'CellGroup' | |
| 8 | + name: 'CellGroup', | |
| 9 | + provide () { | |
| 10 | + return { | |
| 11 | + cellGroup: this | |
| 12 | + } | |
| 13 | + }, | |
| 14 | + methods: { | |
| 15 | + handleClick (name) { | |
| 16 | + this.$emit('on-click', name); | |
| 17 | + } | |
| 18 | + } | |
| 9 | 19 | } |
| 10 | 20 | </script> |
| 11 | 21 | \ No newline at end of file | ... | ... |
src/components/cell/cell.vue
| 1 | 1 | <template> |
| 2 | 2 | <div :class="classes"> |
| 3 | - <a v-if="to" :href="linkUrl" class="ivu-cell-link" @click.prevent="handleClick"> | |
| 3 | + <a v-if="to" :href="linkUrl" class="ivu-cell-link" @click.prevent="handleClick" @click="handleClickItem"> | |
| 4 | 4 | <CellItem :title="title" :label="label" :extra="extra"> |
| 5 | 5 | <slot name="icon" slot="icon"></slot> |
| 6 | 6 | <slot slot="default"></slot> |
| ... | ... | @@ -8,7 +8,7 @@ |
| 8 | 8 | <slot name="label" slot="label"></slot> |
| 9 | 9 | </CellItem> |
| 10 | 10 | </a> |
| 11 | - <div class="ivu-cell-link" v-else> | |
| 11 | + <div class="ivu-cell-link" v-else @click="handleClickItem"> | |
| 12 | 12 | <CellItem :title="title" :label="label" :extra="extra"> |
| 13 | 13 | <slot name="icon" slot="icon"></slot> |
| 14 | 14 | <slot slot="default"></slot> |
| ... | ... | @@ -32,6 +32,7 @@ |
| 32 | 32 | |
| 33 | 33 | export default { |
| 34 | 34 | name: 'Cell', |
| 35 | + inject: ['cellGroup'], | |
| 35 | 36 | mixins: [ mixinsLink ], |
| 36 | 37 | components: { CellItem, Icon }, |
| 37 | 38 | props: { |
| ... | ... | @@ -83,5 +84,10 @@ |
| 83 | 84 | ]; |
| 84 | 85 | }, |
| 85 | 86 | }, |
| 87 | + methods: { | |
| 88 | + handleClickItem () { | |
| 89 | + this.cellGroup.handleClick(this.name); | |
| 90 | + } | |
| 91 | + } | |
| 86 | 92 | } |
| 87 | 93 | </script> |
| 88 | 94 | \ No newline at end of file | ... | ... |