ts+element plus 封装el-card

在src目录下新建components放置组件

 

直接采用ts进行类型限制defineProps 传过来的值

<script lang="ts" setup>

type Props = {

    title: string

    className?: string

    btnUrl?: string

    btnTitle?: string

}

defineProps<Props>()

</script>

<template>
	<el-card :class="className ? className : 'box-card'">
		<template #header>
			<span>{{ title }}</span>
            //判断有无返回按钮
			<el-button type="default" v-if="btnUrl" @click="$router.push(btnUrl)">{{ btnTitle }}</el-button>
		</template>

		<slot></slot>
		<!-- 表单 -->
	</el-card>
</template>

 使用

<pb-Card className="类名" title="标题" btnTitle="" btnUrl="">
    默认插槽写数据就行
</pb-Card>