Vue 3 实现与使用超好看卡片组件，附完整代码示例！

以下是一个使用 Vue 3 编写的好看的卡片组件示例。这个卡片包含、描述和一个行动按钮，并且有一定的样式美化。 ```vue <template> <!-- 卡片容器 --> <div class="card"> <!-- 卡片 --> <h2 class="card-title">{{ title }}</h2> <!-- 卡片描述 --> <p class="card-description">{{ description }}</p> <!-- 行动按钮 --> <button class="card-button" @click="onButtonClick">{{ buttonText }}</button> </div> </template> <script setup> import { ref } from 'vue'; // 定义组件的 props const props = defineProps({ // 卡片 title: { type: String, default: 'Default Title' }, // 卡片描述 description: { type: String, default: 'Default description text.' }, // 按钮文本 buttonText: { type: String, default: 'Click Me' } }); // 定义按钮点击事件处理函数 const onButtonClick = () => { console.log('Button clicked!'); }; </script> <style scoped> .card { /* 卡片的宽度 */ width: 300px; /* 卡片的内边距 */ padding: 20px; /* 卡片的外边距 */ margin: 20px; /* 卡片的颜色 */ background-color: #fff; /* 卡片的边框 */ border: 1px solid #e0e0e0; /* 卡片的圆角 */ border-radius: 8px; /* 卡片的阴影 */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 文本居中 */ text-align: center; } .card-title { /* 的字体大小 */ font-size: 24px; /* 的字体粗细 */ font-weight: bold; /* 的下边距 */ margin-bottom: 10px; } .card-description { /* 描述的字体大小 */ font-size: 16px; /* 描述的颜色 */ color: #666; /* 描述的下边距 */ margin-bottom: 20px; } .card-button { /* 按钮的颜色 */ background-color: #007bff; /* 按钮的文字颜色 */ color: #fff; /* 按钮的内边距 */ padding: 10px 20px; /* 按钮的边框 */ border: none; /* 按钮的圆角 */ border-radius: 4px; /* 鼠标悬停时的光标样式 */ cursor: pointer; /* 鼠标悬停时的颜色 */ transition: background-color 0.3s ease; } .card-button:hover { /* 鼠标悬停时的颜色 */ background-color: #0056b3; } </style> ``` 你可以将上述代码保存为一个 `.vue` 文件，然后在你的 Vue 3 项目中使用这个组件。例如： ```vue <template> <div> <!-- 使用自定义的卡片组件 --> <Card title="My Card" description="This is a description of the card." buttonText="Learn More" /> </div> </template> <script setup> import Card from './Card.vue'; </script> ``` [2026-02-12 10:47:56 | AI写代码神器 | 884点数解答]