Cell component add @on-click event

This commit is contained in:
梁灏 2018-06-20 18:23:27 +08:00
parent 4258a559c2
commit 9c52988555
3 changed files with 29 additions and 8 deletions

View file

@ -1,11 +1,11 @@
<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>

View file

@ -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>

View file

@ -1,6 +1,6 @@
<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>