Locus Network Monitor

Introduction

Locus Network Monitor 是一个实时的网络状态检测组件，它可以实时监测网络连接状态、网络速度，并通过可视化的方式呈现出来。

Installation

npm install locus-network-monitor / yarn add locus-network-monitor

Usage

To use Locus Network Monitor, you need to follow these steps:

1. 局部引入 Locus Network Monitor

<script setup>
import { NetworkMonitor } from "locus-vue-speed-tester";
</script>

<template>
    <NetworkMonitor />
</template>

2. 全局引入 Locus Network Monitor

// main.js
import locusNetworkMonitor from "locus-vue-speed-tester";
import "locus-vue-speed-tester/locus-vue-speed-tester/style.css";

const app = createApp(App);
app.use(locusNetworkMonitor);
app.mount("#app");

// 在vue组件中使用
<template>
    <NetworkMonitor />
</template>

props

| 属性名 | 类型 | 默认值 | 说明 | | ----------------- | ------- | -------------------------------------------- | ---------------------- | | speedTestURL | String | "/icons/Logo.svg" | 速度测试的文件 url | | testFileSize | Number | 28 | 速度测试的文件大小 KB | | size | Number | 240 | wifi 图标的大小 px | | disconnectedColor | String | "#ccc" | 信号不连通时的颜色 | | connectedColor | Array | ["#1E9A78", "#8AC247", "#8AC247", "#B74918"] | 是否显示网络状态 | | speedLimits | Array | [50, 512, 3072] | 定义各档速度界限的数组 | | defaultCheckOpen | Boolean | true | 默认是否开启检测 |