DataCardText 文本卡片

使用 avue-data-cardtext 展示文本卡片，通过 option 提供配置和数据。

使用示例

效果预览可直接操作下方示例

用短标题和正文展示一条内容，底部放置署名及日期。

正在加载示例…

<template>
  <avue-data-cardtext :option="option"></avue-data-cardtext>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  span: 6,
  data: [
    {
      click: (item) => {
        alert(JSON.stringify(item));
      },
      title: '香菜',
      color: 'yellow',
      icon: 'el-icon-mobile-phone',
      content: '殷其雷，天阴霾，雨零耶，盼君留。 殷其雷，纵不零，卿若留，吾将从。',
      href: "http://www.baidu.com",
      target: '_blank',
      name: '文件上传',
      date: '1天前'
    },
    {
      click: (item) => {
        alert(JSON.stringify(item));
      },
      title: '钉宫',
      icon: 'el-icon-bell',
      color: 'green',
      content: '殷其雷，天阴霾，雨零耶，盼君留。 殷其雷，纵不零，卿若留，吾将从。',
      href: "http://www.baidu.com",
      name: '流加载',
      date: '1天前'
    },
    {
      click: (item) => {
        alert(JSON.stringify(item));
      },
      title: '亚丝娜',
      icon: 'el-icon-service',
      color: '#3fa1ff',
      content: '殷其雷，天阴霾，雨零耶，盼君留。 殷其雷，纵不零，卿若留，吾将从。',
      href: "http://www.baidu.com",
      name: '表单',
      date: '1天前'
    },
    {
      click: (item) => {
        alert(JSON.stringify(item));
      },
      title: '狂三',
      icon: 'el-icon-time',
      color: 'red',
      content: '殷其雷，天阴霾，雨零耶，盼君留。 殷其雷，纵不零，卿若留，吾将从。',
      href: "http://www.baidu.com",
      name: '文件上传',
      date: '1天前'
    }
  ]
});
</script>

Props

参数	类型	默认值	说明
option	object	建议显式传入 { data: [] }	组件配置；不使用 option 外的独立 data 属性

option 配置

字段	类型	默认值	说明
data	array	[]	卡片数据，按数组顺序显示
span	number	8	中等及以上屏幕的 24 栅格占位，24 / span 为每行数量

data 数据项

字段	类型	默认值	说明
title / content	string	—	标题与正文
name / date	string	—	底部署名与日期文本
href	string	—	点击时跳转的地址；仅执行回调时可不设置
target	string	—	链接打开位置，例如 _blank
click	function	—	点击调用 click(item)，接收当前原始数据项

使用说明

日期按传入文本直接显示，不会自动格式化。当前模板未使用 option.icon、option.color。

span 使用 Element Plus 的 24 栅格体系。布局随屏幕宽度切换，不要把它当成像素宽度；给数字字段传原始数值，单位使用对应的文本字段。

事件与回调

组件没有通过 $emit 定义业务事件。data[i].click(item) 是配置回调，接收原始数据项；它不是组件 @click 的数据事件。配置 href 时还会进行链接跳转。

插槽与方法

当前组件未定义内容插槽。

不需要通过 ref 调用内部渲染方法；更新 option 或 option.data 即可刷新内容。