TestCard

示例

基础卡片

这是一个基础卡片

基础卡片

卡片内容

<template>
  <gd-test-card title="基础卡片">
    <div>卡片内容</div>
  </gd-test-card>
</template>

<script setup lang="ts">
import { GdTestCard } from '../index'
</script>

<style scoped>
.test-css {
  padding: 8px;
}
</style>

无标题卡片

这是一个无标题卡片，他没有边框

没有标题的卡片

<template>
  <gd-test-card>
    <div>没有标题的卡片</div>
  </gd-test-card>
</template>

<script setup lang="ts">
import { GdTestCard } from '../index'
</script>

响应点击的卡片

这是一个响应点击的卡片

响应点击的卡片

点击卡片试一试

对于卡片组件没有实际意义，仅为了测试 组件 emit

<template>
  <gd-test-card title="响应点击的卡片" @show-message="handleShowMessage">
    <div>点击卡片试一试</div>
    <i class="comment">对于卡片组件没有实际意义，仅为了测试 组件 emit</i>
  </gd-test-card>
</template>

<script setup lang="ts">
import { GdTestCard } from '../index'

const handleShowMessage = (msg: string) => alert(msg)
</script>

<style scoped>
.comment {
  font-size: small;
}
</style>

API

Attributes

名称：title

说明：卡片的标题

类型：string | undefined

默认值：-

Events

名称：showMessage

说明：尚不支持

类型：[msg: string]

Slots

名称：default

说明：卡片的默认插槽

Exposes

名称：anExposedData

说明：卡片的一个 exposed 数据

类型：string