扩展 element Plug card
增加全屏，折叠操作项
核心代码
<template><div class="cc-card-component"><el-card v-if="state.isShow" :class="state.class" :bodyStyle="bodyStyle" :shadow="props.shadow"><template #header v-if="props.title"><slot name="leftIcon"></slot><span>{{ props.title }}</span><div class="component-header-icon"><template v-if="props.showFullScreen"><i v-if="state.isFullscreen" @click="toggleFullscreen" class="iconfont icon--fullscreen-exit"></i><i v-else @click="toggleFullscreen" class="iconfont icon--fullscreen"></i></template><i v-if="props.showClose" @click="handleBeforeClose" class="iconfont icon--close"></i><i v-if="props.showExpand" @click="toggleExpand" class="iconfont icon--arrow-right"></i></div></template><template v-for="(slot, slotName) in $slots" #[slotName]><slot :name="slotName"></slot></template></el-card></div>
</template><script setup lang="ts">
import { reactive } from 'vue'const props = defineProps({shadow: {type: String,default: 'hover', // always | never | hover},title: {type: String,default: '',},showFullScreen: {type: Boolean,default: false,},showExpand: {type: Boolean,default: true,},showClose: {type: Boolean,default: false,},bodyStyle: {type: String,default: '',},
})const state = reactive({isShow: true,isExpand: false,isFullscreen: false,class: '',
})const toggleFullscreen = () => {state.isFullscreen = !state.isFullscreenstate.class = state.isFullscreen ? 'max-fullscreen' : ''
}const toggleExpand = () => {state.isExpand = !state.isExpandstate.class = state.isExpand ? 'card-isExpand' : ''
}const handleBeforeClose = () => {state.isShow = false
}
</script><style lang="scss">
.cc-card-component {.el-card__header {padding: 0 10px;line-height: 40px;}.component-header-icon > i {display: inline-block;}.max-fullscreen {width: 100% !important;height: 100% !important;position: fixed;top: 0;left: 0;bottom: 0;right: 0;z-index: 10;transition: all 0.3s ease 0.1s;}.icon--arrow-right {cursor: pointer;transform: rotate(90deg);transform-origin: center center;transition: all 0.3s ease 0.1s;}.card-isExpand {.icon--arrow-right {transform: rotate(-90deg);}.el-card__body {display: none;}}
}.cc-card-component.left-card .el-card {overflow-y: auto;height: calc(100vh - 120px);
}
</style>一般使用
<cc-card title="设置验证码">
...
</cc-card>
效果图
)
