Cell component add @on-click event
This commit is contained in:
parent
4258a559c2
commit
9c52988555
3 changed files with 29 additions and 8 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
Loading…
Add table
Reference in a new issue