Cell component add @on-click event

梁灏
1 parent 4258a559
Showing 3 changed files with 29 additions and 8 deletions Show diff stats
examples/routers/cell.vue
src/components/cell/cell-group.vue
src/components/cell/cell.vue
 <template>
     <div style="margin: 100px;background: #f8f8f9;padding: 100px;">
         <Card title="选项" :padding="0" shadow style="width: 300px;">
-            <CellGroup>
-                <Cell title="标题一" label="附属内容" to="/button"></Cell>
-                <Cell title="标题一" label="附属内容" extra="详细信息"></Cell>
-                <Cell title="标题一" label="附属内容" extra="详细信息" to="/button"></Cell>
-                <Cell title="标题一" label="附属内容" selected></Cell>
+            <CellGroup @on-click="handleClick">
+                <Cell title="标题一" name="a1" label="附属内容" to="/button"></Cell>
+                <Cell title="标题一" name="a2" label="附属内容" extra="详细信息"></Cell>
+                <Cell title="标题一" name="a3" label="附属内容" extra="详细信息" to="/button"></Cell>
+                <Cell title="标题一" name="a4" label="附属内容" selected></Cell>
                 <Cell title="标题二">
                     <Icon type="trash-a" slot="icon"></Icon>
                 </Cell>
@@ -30,6 +30,11 @@
             return {
                 switch1: false
             }
+        },
+        methods: {
+            handleClick (name) {
+                console.log(name);
+            }
         }
     }
 </script>
@@ -5,6 +5,16 @@
 </template>
 <script>
     export default {
-        name: 'CellGroup'
+        name: 'CellGroup',
+        provide () {
+            return {
+                cellGroup: this
+            }
+        },
+        methods: {
+            handleClick (name) {
+                this.$emit('on-click', name);
+            }
+        }
     }
 </script>
 \ No newline at end of file
 <template>
     <div :class="classes">
-        <a v-if="to" :href="linkUrl" class="ivu-cell-link" @click.prevent="handleClick">
+        <a v-if="to" :href="linkUrl" class="ivu-cell-link" @click.prevent="handleClick" @click="handleClickItem">
             <CellItem :title="title" :label="label" :extra="extra">
                 <slot name="icon" slot="icon"></slot>
                 <slot slot="default"></slot>
@@ -8,7 +8,7 @@
                 <slot name="label" slot="label"></slot>
             </CellItem>
         </a>
-        <div class="ivu-cell-link" v-else>
+        <div class="ivu-cell-link" v-else @click="handleClickItem">
             <CellItem :title="title" :label="label" :extra="extra">
                 <slot name="icon" slot="icon"></slot>
                 <slot slot="default"></slot>
@@ -32,6 +32,7 @@
     export default {
         name: 'Cell',
+        inject: ['cellGroup'],
         mixins: [ mixinsLink ],
         components: { CellItem, Icon },
         props: {
@@ -83,5 +84,10 @@
                 ];
             },
         },
+        methods: {
+            handleClickItem () {
+                this.cellGroup.handleClick(this.name);
+            }
+        }
     }
 </script>
 \ No newline at end of file