vue-scroll-menu-list

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

---

目录

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

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

---