@tanzhenxing/zx-card v1.0.2

zx-card 卡片组件

一个功能丰富的卡片组件，用于显示图文内容，支持自定义样式、主题和交互效果。

介绍

zx-card 是一个通用卡片组件，可用于展示产品、文章、个人信息等内容。组件支持封面图、缩略图、标题、副标题、额外信息、内容区域以及底部操作区域，同时提供丰富的样式自定义选项。

基础用法

<template>
  <zx-card 
    title="卡片标题" 
    sub-title="卡片副标题" 
    :thumbnail="require('@/static/avatar.png')"
    extra="额外信息"
    @click="onClick"
  >
    这里是卡片的内容区域
  </zx-card>
</template>

<script setup>
const onClick = (type) => {
  console.log('点击了', type)
}
</script>

带封面图的卡片

<zx-card 
  title="带封面的卡片" 
  sub-title="这是一个带封面的卡片" 
  :cover="require('@/static/cover.jpg')"
  cover-radius="8"
>
  这里是卡片的内容区域
</zx-card>

可点击的卡片

<zx-card 
  title="可点击的卡片" 
  :clickable="true"
  @click="handleCardClick"
>
  点击此卡片会有轻微的缩放效果
</zx-card>

不同主题的卡片

<zx-card title="默认卡片" mode="default">默认主题</zx-card>
<zx-card title="主要卡片" mode="primary">主要主题</zx-card>
<zx-card title="成功卡片" mode="success">成功主题</zx-card>
<zx-card title="警告卡片" mode="warning">警告主题</zx-card>
<zx-card title="错误卡片" mode="error">错误主题</zx-card>
<zx-card title="信息卡片" mode="info">信息主题</zx-card>

自定义底部操作区

<zx-card title="带操作按钮的卡片">
  卡片内容区域
  
  <template #actions>
    <button @click="handleShare">分享</button>
    <button @click="handleLike">点赞</button>
    <button @click="handleComment">评论</button>
  </template>
</zx-card>

自定义底部区域

<zx-card title="带底部的卡片">
  卡片内容区域
  
  <template #footer>
    <view>底部区域内容</view>
  </template>
</zx-card>

通栏卡片

<zx-card 
  title="通栏卡片" 
  :is-full="true"
>
  这是一个通栏卡片，没有左右边距
</zx-card>

属性说明

插槽

事件

代码示例

商品卡片

<zx-card 
  title="iPhone 15 Pro" 
  sub-title="超瓷晶面板，钛金属边框"
  :cover="require('@/static/iphone.jpg')"
  extra="￥7999起"
  mode="primary"
  :clickable="true"
  :title-bold="true"
  title-color="#333"
  avatar-circle
  @click="goToDetail"
>
  A17 Pro 芯片，创新相机控制，4800万像素主摄，全新操作体验
  
  <template #actions>
    <button>加入购物车</button>
    <button>立即购买</button>
  </template>
</zx-card>

文章卡片

<zx-card 
  title="Vue 3.0新特性解析" 
  sub-title="发布于2023-10-12"
  :thumbnail="require('@/static/avatar.png')"
  :cover="require('@/static/vue.jpg')"
  content-size="30"
  :title-bold="true"
>
  Vue 3.0带来了Composition API、Teleport、Fragments等新特性，本文将详细解析这些特性的使用方法和实际应用场景...
  
  <template #footer>
    <view class="card-footer">
      <text>阅读量: 2380</text>
      <text>点赞: 168</text>
      <text>评论: 32</text>
    </view>
  </template>
</zx-card>

个人信息卡片

<zx-card 
  title="张三" 
  sub-title="前端工程师"
  :thumbnail="require('@/static/person.jpg')"
  avatar-circle
  avatar-size="100"
  mode="info"
  :clickable="true"
>
  <view class="info-item">
    <text class="label">邮箱：</text>
    <text>zhangsan@example.com</text>
  </view>
  <view class="info-item">
    <text class="label">电话：</text>
    <text>13800138000</text>
  </view>
  <view class="info-item">
    <text class="label">地址：</text>
    <text>北京市朝阳区</text>
  </view>
  
  <template #actions>
    <button>发送消息</button>
    <button>添加好友</button>
  </template>
</zx-card>