Skip to content
On this page

卡片

普通卡片

卡片组件
卡片组件是一个基础组件
It is a Card component
<template>
  <v-card header="卡片组件">
    <div>卡片组件是一个基础组件</div>
  </v-card>
</template>

卡片阴影

始终显示阴影
卡片组件是一个基础组件
<template>
  <v-card header="始终显示阴影" shadow="always">
    <div>卡片组件是一个基础组件</div>
  </v-card>
</template>
鼠标移上去显示阴影
卡片组件是一个基础组件
<template>
  <v-card header="鼠标移上去显示阴影" shadow="hover">
    <div>卡片组件是一个基础组件</div>
  </v-card>
</template>

自定义卡片 body 样式

鼠标移上去显示阴影
卡片组件是一个基础组件
It is a Button component
<template>
  <v-card
    header="鼠标移上去显示阴影"
    shadow="hover"
    :body-style="{ color: 'skyblue' }"
  >
    <div>卡片组件是一个基础组件</div>
  </v-card>
</template>

自定义 header 内容

这里是自定义header
卡片组件是一个基础组件
<template>
  <v-card>
    <template #header>这里是自定义header</template>
    <div>卡片组件是一个基础组件</div>
  </v-card>
</template>

Released under the MIT License.