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>
|
<template>
|
||||||
<div style="margin: 100px;background: #f8f8f9;padding: 100px;">
|
<div style="margin: 100px;background: #f8f8f9;padding: 100px;">
|
||||||
<Card title="选项" :padding="0" shadow style="width: 300px;">
|
<Card title="选项" :padding="0" shadow style="width: 300px;">
|
||||||
<CellGroup>
|
<CellGroup @on-click="handleClick">
|
||||||
<Cell title="标题一" label="附属内容" to="/button"></Cell>
|
<Cell title="标题一" name="a1" label="附属内容" to="/button"></Cell>
|
||||||
<Cell title="标题一" label="附属内容" extra="详细信息"></Cell>
|
<Cell title="标题一" name="a2" label="附属内容" extra="详细信息"></Cell>
|
||||||
<Cell title="标题一" label="附属内容" extra="详细信息" to="/button"></Cell>
|
<Cell title="标题一" name="a3" label="附属内容" extra="详细信息" to="/button"></Cell>
|
||||||
<Cell title="标题一" label="附属内容" selected></Cell>
|
<Cell title="标题一" name="a4" label="附属内容" selected></Cell>
|
||||||
<Cell title="标题二">
|
<Cell title="标题二">
|
||||||
<Icon type="trash-a" slot="icon"></Icon>
|
<Icon type="trash-a" slot="icon"></Icon>
|
||||||
</Cell>
|
</Cell>
|
||||||
|
@ -30,6 +30,11 @@
|
||||||
return {
|
return {
|
||||||
switch1: false
|
switch1: false
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick (name) {
|
||||||
|
console.log(name);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -5,6 +5,16 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'CellGroup'
|
name: 'CellGroup',
|
||||||
|
provide () {
|
||||||
|
return {
|
||||||
|
cellGroup: this
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick (name) {
|
||||||
|
this.$emit('on-click', name);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="classes">
|
<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">
|
<CellItem :title="title" :label="label" :extra="extra">
|
||||||
<slot name="icon" slot="icon"></slot>
|
<slot name="icon" slot="icon"></slot>
|
||||||
<slot slot="default"></slot>
|
<slot slot="default"></slot>
|
||||||
|
@ -8,7 +8,7 @@
|
||||||
<slot name="label" slot="label"></slot>
|
<slot name="label" slot="label"></slot>
|
||||||
</CellItem>
|
</CellItem>
|
||||||
</a>
|
</a>
|
||||||
<div class="ivu-cell-link" v-else>
|
<div class="ivu-cell-link" v-else @click="handleClickItem">
|
||||||
<CellItem :title="title" :label="label" :extra="extra">
|
<CellItem :title="title" :label="label" :extra="extra">
|
||||||
<slot name="icon" slot="icon"></slot>
|
<slot name="icon" slot="icon"></slot>
|
||||||
<slot slot="default"></slot>
|
<slot slot="default"></slot>
|
||||||
|
@ -32,6 +32,7 @@
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Cell',
|
name: 'Cell',
|
||||||
|
inject: ['cellGroup'],
|
||||||
mixins: [ mixinsLink ],
|
mixins: [ mixinsLink ],
|
||||||
components: { CellItem, Icon },
|
components: { CellItem, Icon },
|
||||||
props: {
|
props: {
|
||||||
|
@ -83,5 +84,10 @@
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
handleClickItem () {
|
||||||
|
this.cellGroup.handleClick(this.name);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
Loading…
Add table
Reference in a new issue