elementui card 禁用效果
完整代码
<template>
<div id="app">
<!-- .native原生事件 -->
<!-- .stop阻止事件 -->
<!-- el-card有divcard类名就有禁用效果 -->
<el-card
class="box-card divcard"
@click.native="cardFn"
@click.stop="cardFn1"
>
<!-- shadow="never" -->
<div slot="header" class="clearfix">
<span>卡片名称</span>
<el-button style="float: right; padding: 3px 0" type="text"
>操作按钮</el-button
>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{ "列表内容 " + o }}
</div>
<div class="discard"></div>
</el-card>
<router-view />
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
cardFn() {
console.log("点击了卡片");
},
},
};
</script>
<style lang="scss">
#app {
display: flex;
align-items: center;
justify-content: center;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.box-card {
width: 480px;
}
.divcard {
position: relative;
.discard {
position: absolute;
top: 0;
left: 0;
background: gray;
width: 100%;
height: 100%;
opacity: 0.2;
&:hover {
cursor: not-allowed;
}
}
}
</style>