XDataItem 数据项

示例

基础用法

应用名称

占位内容加载失败

可通过lazy开启懒加载功能，当图片滚动到可视范围内才会加载。可通过 scroll-container 来设置滚动容器，若未定义，则为最近一个 overflow 值为 auto 或 scroll 的父元素。

<template>
  <div class="page">
    <XDataItem title="应用名称" :icon="icon"></XDataItem>

    <XDataItem
      @imageClick="onClick"
      @title-click="onTitleClick"
      :icon="Setting"
      image-src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
      image-height="100px"
      image-width="100%"
      title="占位内容加载失败"
      description="可通过lazy开启懒加载功能， 当图片滚动到可视范围内才会加载。 可通过 scroll-container 来设置滚动容器， 若未定义，则为最近一个 overflow 值为 auto 或 scroll 的父元素。"
      :action-bar-props="actionBarProps"
      @actionClick="onActionClick"
      @action-command="onActionCommand"
      split>
    </XDataItem>
  </div>
</template>
<script lang="ts" setup>
  import { Setting } from '@element-plus/icons-vue';
  import { XDataItem, type ActionBarItems } from '@vtj/ui';
  import { VtjIconPlus, VtjIconBug, VtjIconApi } from '@vtj/icons';

  const icon = {
    icon: Setting,
    color: '#fff',
    background: '#409eff',
    padding: 2,
    radius: 4,
    size: 30
  };

  const menus = [
    {
      command: 'a',
      label: '菜单 一'
    },
    {
      command: 'a1',
      label: '菜单 二'
    },
    {
      command: 'b',
      label: '菜单 三',
      divided: true,
      icon: VtjIconBug
    }
  ];

  const items: ActionBarItems = [
    {
      label: '按钮一',
      icon: VtjIconPlus,
      tooltip: '提示信息内容',
      draggable: true,
      onDragstart: (d: any, e: any) => {
        console.log(d, e);
      }
    },
    {
      label: '按钮二',
      icon: VtjIconBug,
      menus,
      onCommand(item: any) {
        console.log('onCommand', item);
      }
    },
    '|',
    {
      label: '按钮三',
      icon: VtjIconApi,
      badge: 1,
      onClick() {
        // alert('clicked!');
      }
    }
  ];

  const actionBarProps = {
    items: items,
    mode: 'button'
  };

  const onClick = () => {
    console.log('clicked!');
  };

  const onTitleClick = () => {
    console.log('onTitleClick');
  };

  const onActionClick = (e: any) => {
    console.log('onActionClick', e);
  };

  const onActionCommand = (action: any, menu: any) => {
    console.log('onActionCommand', action, menu);
  };
</script>

<style scoped>
  .page {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
</style>

排列展示

占位内容加载失败

按钮一

按钮二

占位内容加载失败

按钮一

按钮二

占位内容加载失败

按钮一

按钮二

<template>
  <XDataItem
    v-for="_n in 3"
    @imageClick="onClick"
    @title-click="onTitleClick"
    direction="row"
    :icon="Setting"
    image-src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
    image-height="100px"
    image-width="100%"
    title="占位内容加载失败"
    description="可通过lazy开启懒加载功能， 当图片滚动到可视范围内才会加载。 可通过 scroll-container 来设置滚动容器， 若未定义，则为最近一个 overflow 值为 auto 或 scroll 的父元素。"
    :actions="actions"
    @actionClick="onActionClick"
    @action-command="onActionCommand"
    split>
  </XDataItem>
</template>
<script lang="ts" setup>
  import { Setting } from '@element-plus/icons-vue';
  import { XDataItem } from '@vtj/ui';
  import { VtjIconPlus } from '@vtj/icons';

  const actions = [
    {
      label: '按钮一',
      icon: VtjIconPlus
    },
    {
      label: '按钮二',
      icon: VtjIconPlus
    }
  ];

  const onClick = () => {
    console.log('clicked!');
  };

  const onTitleClick = () => {
    console.log('onTitleClick');
  };

  const onActionClick = (e: any) => {
    console.log('onActionClick', e);
  };

  const onActionCommand = (action: any, menu: any) => {
    console.log('onActionCommand', action, menu);
  };
</script>

插槽展示

自定义标题插槽

自定义描述插槽

默认插槽

actions插槽

<template>
  <div>
    <XDataItem title="应用名称" :icon="icon">
      <template #image>
        <img
          src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
          style="width: 100%; height: 100px"
          alt="图片插槽" />
      </template>

      <template #title>自定义标题插槽</template>
      <template #description>自定义描述插槽</template>
      <template #actions>actions插槽</template>

      <template #default>默认插槽</template>
    </XDataItem>
  </div>
</template>
<script lang="ts" setup>
  import { Setting } from '@element-plus/icons-vue';
  import { XDataItem } from '@vtj/ui';

  const icon = {
    icon: Setting,
    color: '#fff',
    background: '#409eff',
    padding: 2,
    radius: 4,
    size: 30
  };
</script>

API

属性

属性名	说明	类型	默认值
direction	排列方式	`string<'row' \| 'column'>`	column
imageSrc	图片路径	`string`	-
imageWidth	图片宽度	`number \| string`	-
imageHeight	图片高度	`number \| string`	-
icon	图标	`string \| object`	-
title	数据项标题	`string`	-
description	数据项描述	`string`	-
actions	底部按钮	`array`	-
actionBarProps	XActionBar 的属性对象	`object`	-
split	css控制间隔	`boolean`	pt-[10px],mt-[10px],bt-[1px solid #e4e7ed]
onImageClick	点击图片	`function`	-
onTitleClick	点击标题	`function`	-

事件

名称	说明	参数
imageClick	点击图片	-
titleClick	点击标题	-
actionClick	点击图标	(action)
actionCommand	点击图标	(action,menu)

插槽

插槽名	说明	类型
default	默认插槽	-
image	-	-
title	-	-
description	-
actions	-	-

XDataItem 数据项 ​

示例 ​

基础用法 ​

排列展示 ​

插槽展示 ​

API ​

属性 ​

事件 ​

插槽 ​

XDataItem 数据项

示例

基础用法

排列展示

插槽展示

API

属性

事件

插槽