Card卡片

基本用法

默认标题

我是卡片

取消确认

使用 gan-card 标签可以添加一个基本的卡片

<template>
  <div>
    <gan-card header-text="我是标题">
      我是卡片
    </gan-card>
  </div>
</template>
<style>
  .base {
    margin-bottom: 20px;
  }
</style>

显示代码

隐藏头部

默认标题

我是卡片

取消确认

在基础的卡片上添加 headerHidden 属性可以对卡片头部进行隐藏

<template>
  <div>
    <gan-card header-text="我是标题" header-hidden>
      我是卡片
    </gan-card>
  </div>
</template>
<style>
  .base {
    margin-bottom: 20px;
  }
</style>

显示代码

隐藏底部

默认标题

我是卡片

取消确认

在基础的卡片上添加 footerHidden 属性可以对卡片底部进行隐藏

<template>
  <div>
    <gan-card header-text="我是标题" footer-hidden>
      我是卡片
    </gan-card>
  </div>
</template>
<style>
  .base {
    margin-bottom: 20px;
  }
</style>

显示代码

header & footer插槽

我是头部

我是卡片

我是底部

当存在插槽时，我们将对相应区域做插槽处理

<template>
  <div>
    <gan-card>
      <template slot="header">我是头部</template>
      我是卡片
      <template slot="footer">我是底部</template>
    </gan-card>
  </div>
</template>
<style>
  .base {
    margin-bottom: 20px;
  }
</style>

显示代码

基本的事件

默认标题

我是卡片

取消确认

对于原生，确认，取消，更多按钮的点击事件

<template>
  <div>
    <gan-card header-text="我是标题"
    @cancel="onCancel"
    @consent="onConsent">
      我是卡片
    </gan-card>
  </div>
</template>
<script>
export default {
  data: () => ({
  }),
  methods: {
    // 取消
    onCancel() {},
    // 确认
    onConsent() {}
  }
}
</script>
<style>
  .base {
    margin-bottom: 20px;
  }
</style>

显示代码