滚动菜单列表组件使用文档

目录

1. 概述
2. 安装
3. 快速开始
4. API 参考
   • Props
   • Slots
   • Events
5. 示例
6. 常见问题
7. 更新日志

概述

滚动菜单列表组件是一个适用于大屏可视化项目的自定义组件。它支持自定义表格头部、多种数据格式、自动滚动显示数据，并具有高度的灵活性和可配置性。无论是单列数据还是多列数据，都可以通过简单配置快速展示，并且支持自定义样式以匹配不同的视觉风格。

安装

1. 通过 npm 安装:

   npm install vue-scroll-menu-list --save

2. 通过 yarn 安装:

   yarn add vue-scroll-menu-list

快速开始

在 Vue 项目中使用滚动菜单列表组件：

<template>
  <ScrollMenuList 
    :data="menuData"
    :headers="['项目名称', '漏洞数量', '严重等级']"
    :columns="['name', 'count', 'severity']"
    :rows="5"
    :scrollSpeed="3000"
    :itemFormatter="formatMenuItem"
    rowHeight="19%"
    fontSize="18px"
    textAlign="center"
    headerBackground="rgba(10, 10, 50, 0.7)"
    rowBackground="rgba(0, 0, 50, 0.3)"
    alternateRowBackground="rgba(62, 62, 173, 0.3)"
  />
</template>

<script>
import ScrollMenuList from 'vue-scroll-menu-list';

export default {
  components: { ScrollMenuList },
  data() {
    return {
      menuData: [
        { name: '项目A', count: 100, severity: '高' },
        { name: '项目B', count: 200, severity: '中' },
        // 更多数据...
      ],
    };
  },
  methods: {
    formatMenuItem(item, field) {
      return item[field] || '-';
    }
  }
};
</script>

API 参考

Props

| Prop 名称 | 类型 | 默认值 | 说明 | |--------------------------|--------------------|-------------|---------------------------------------------------------------------------------------------------------------------------------------------------| | data | Array | [] | 必需。要显示的数据列表。每个对象表示一行数据。 | | headers | Array | [] | 可选。表头名称列表。与 columns 对应，若为空则不显示表头。 | | columns | Array | [] | 必需。要显示的列名列表，定义每列对应的数据字段。 | | rows | Number | 5 | 显示的行数。默认为5。 | | scrollSpeed | Number | 3000 | 可选。自动滚动的速度，单位为毫秒。 | | itemFormatter | Function | (item, field) => item[field]?.toString() || '' | 可选。自定义列数据格式化函数，默认显示字段值。 | | rowHeight | String | '20%' | 可选。每行的高度，支持百分比或像素值，默认为父容器高度的20%。 | | fontSize | String | '16px' | 可选。表格文字的大小。 | | textAlign | String | 'center' | 可选。文字对齐方式。可以是 'left', 'center', 'right'。 | | headerBackground | String | 'rgba(0, 0, 50, 0.5)' | 可选。表头背景颜色。 | | rowBackground | String | 'rgba(0, 0, 50, 0.2)' | 可选。表格行的背景颜色。 | | alternateRowBackground | String | 'rgba(62, 62, 173, 0.2)' | 可选。表格隔行背景颜色。 |

示例

<template>
  <ScrollMenuList 
    :data="menuData"
    :headers="['项目名称', '漏洞数量', '严重等级']"
    :columns="['name', 'count', 'severity']"
    :rows="5"
    :scrollSpeed="3000"
    :itemFormatter="formatMenuItem"
    rowHeight="19%"
    fontSize="18px"
    textAlign="center"
    headerBackground="rgba(10, 10, 50, 0.7)"
    rowBackground="rgba(0, 0, 50, 0.3)"
    alternateRowBackground="rgba(62, 62, 173, 0.3)"
  />
</template>

<script>
export default {
  data() {
    return {
      menuData: [
        { name: '项目A', count: 100, severity: '高' },
        { name: '项目B', count: 200, severity: '中' },
        { name: '项目C', count: 150, severity: '低' },
        // 更多数据...
      ],
    };
  },
  methods: {
    formatMenuItem(item, field) {
      return item[field] || '-';
    }
  }
};
</script>

常见问题

1. 组件不滚动: 检查 scrollSpeed 是否设置过长或者数据量是否不足以触发滚动。
2. 自定义样式未生效: 请确保传入的 props 符合组件要求，并且样式值合法。

更新日志

v1.0.0

• 初始发布，支持基本滚动功能和自定义配置。