扩展 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.isFullscreen
	state.class = state.isFullscreen ? 'max-fullscreen' : ''
}

const toggleExpand = () => {
	state.isExpand = !state.isExpand
	state.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>

效果图