vue开发——可视化大屏_vue大屏

为了开发出一个美观的大屏可视化界面，我做了一些实践，主要是完成了对大屏首页的模块化以及给它加上美观的边框，结合组件的利用和一些图表的绘制。在前面的文章中，已经介绍过vue的大致使用和跳转页面的实现，此处不再介绍。下面是我做的效果。

1.DataV插件利用

      在平时作业中，难免会遇到开发大屏的需求，页面中有很多比较炫酷的CSS效果。这里我推荐一款大屏数据展示组件库——DataV，它里面有各种边框、装饰、图标、飞线图、水位图、轮播表等等，支持vue和react，有很多炫酷效果，官网地址是：边框 | DataV

下面是官网的页面：

（1）Datav插件安装

打开项目进入终端，在项目目录下，运行命令

npm install @jiaminghi/data-view

（2）自动注册所有组件为全局组件

找到src目录下的main.js添加以下代码：

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
 
Vue.use(dataV)

我的添加如下：

（3）调用喜欢的样式

我们可以去官网找自己喜欢的样式，我使用这个了下面的特效边框，它的名称是#dv-border-box-11.

我们打开自己的项目添加代码，为了给大家介绍，我特意增加了注释：

<!-- 定义一个全屏容器 -->
<dv-full-screen-container>
 
  <!-- 使用 dv-border-box-11 组件，并设置样式为全宽度和高度的 84% -->
  <dv-border-box-11 :style="{ width: '100%', height: '84%' }">
 
    <!-- 在默认插槽中插入文本，设置样式为 24px 字号，白色字体颜色，
         绝对定位在容器顶部居中显示 -->
    <div slot="default" style="font-size: 24px; color: rgb(250, 240, 240); position: absolute; top: 4%; left: 50%; transform: translate(-50%, -50%);">
      邮件管理系统
    </div>
 
  </dv-border-box-11>
 
</dv-full-screen-container>

根据项目的不同添加的位置不用，我的主页面再index.vue中实现，我们放在<template></template>标签中即可。添加的位置如下图所示，

此时运行成功页面就会有边框出现

需要注意的是，我们有可能一次性不能运行成功，会存在一些报错以及bug，我在第二点中详细介绍。

2.DataV插件使用常见的问题

（1）vue3+js引入DataV方法及报错处理

下面是我们安装@jiaminghi之后的文件列表，它放置在node_modules文件夹中。

在运行的时候，会出现以下报错：（此处由于我的已经解决，所以用了别人的图，但是错误是一样的）

这个错误是依赖包引入报错，key位置错误。解决方法如下：需要在/node_modules/jiaminghi/data-view/lib/components/decoration6/src/main.vue 下将

:key = 'i'

移动到<template>标签上，在template上遍历。效果如下：

这个错误改完还有/node_modules/jiaminghi/data-view/lib/components/decoration3/src/main.vue文件需要修改（相同错误，相同修改方法），修改后重启项目即可成功运行。

上面的错误最常见的，如果还有问题可以去网上找找教程，解决了问题模板就可以随意使用了。

（2）增加边框后按钮失效问题解决

我在要实现增加边框的页面上之前已经实现了几个按钮，但是发现在边框增加成功之后按钮按不动了，感觉就是和鼠标之间没有了交互，chat给我以下答复：

    我的理解是每一个组件都会在页面上堆积起来，一层覆盖一层，就好比有层“膜”一样。对于页面框架，虽然它只能在边界上看到，但是它会影响覆盖整个页面，为此，我们如果想让按钮继续能和鼠标产生交互，就必须将按钮“放在最上面”，用程序来实现的话就是z-index层级不够高,提高按钮的层级即可。下面是我将按钮的层级提到1000，使之层级绝对大于其他页面组件。

完成并理解上面的内容问题就基本能解决了。

3.页面分割线的绘制

    对于一个界面，我们在上面想展示的内容一般不止一点，为了更好区分差异，我们要将各个不同功能的模块隔离开，使页面具有更好的美观性。在不套用别人模板的情况下，我想到的简单的方法就是用直线段将页面划分成几个模块，这和我们在纸上画横竖线一个道理，但是在页面上画还是没有想象中那么容易。下面是我实现好的：

要实现这些线条，我们先在<template></template>标签中增加线条：

<div class="lines-container">
    <div class="horizontal-line1"></div>
    <div class="vertical-line1"></div>
    <div class="vertical-line2"></div>
    <div class="horizontal-line2"></div>
    <div class="vertical-line3"></div>
    <div class="vertical-line4"></div>
    <div class="horizontal-line3"></div>
  </div>

      上面添加代码的要结合我完成的图来看，horizontal-line表示横线，vertical-line表示竖线，它们的先后必须注意次序，先是一根横线，然后是两根竖线，然后又是一横线两根竖线，最后再加一根横线，将页面大致分成了6块。

然后我们再更改线条属性：

关于线条颜色和长度我们不再具体介绍，主要介绍线条的位置，看下面的代码：

.lines-container {
  display: flex;
  align-items: center; /* 使竖线和横线垂直居中 */
}

  上面的CSS 代码片段定义了一个名为 .lines-container 的类，它用于设置线条的属性容器，该容器中的竖线和横线应该垂直居中，并且竖线应该分布在容器的两端。下面是对这段代码的解释：

• display: flex;：将容器设置为弹性布局，允许其子元素在容器内自由伸缩和排列。
• align-items: center;：这个属性用于设置弹性布局中的子元素在垂直方向上的对齐方式。在这个例子中，它确保了子元素（竖线和横线）在 .lines-container 容器内垂直居中。

以上是我们必须设置的，不然线条的位置我们很难让它按我们目标的位置绘制，此处需要注意相对位置与绝对位置坐标。

4.给按钮添加边框

在前面的文章中介绍过当鼠标位于按钮上方时的按钮放大功能，在这个页面中，当按钮作为一个单独模块功能来使用时，原先的按钮显得很单调，于是我给按钮增加了边框。效果如下：

它的实现还是比较简单的，CSS代码实现如下：

/* 炫酷边框效果 */
  border: 2px solid; /* 设置边框大小和样式 */
  border-image: linear-gradient(45deg, rgb(86, 243, 55), rgb(244, 16, 28)) 1; /* 使用渐变作为边框图像 */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5), inset 0px 0px 10px rgba(255, 255, 255, 0.5); /* 添加内外阴影 */

     这段代码将创建一个具有炫酷边框效果和内外阴影效果的元素。边框将是渐变的，从绿色渐变到红色，并且元素将具有内外阴影效果，使得元素看起来更加立体和有趣。下面时详细的代码解读：

• border: 2px solid;  ：这行代码设置了边框的宽度为 2 像素，边框样式为实线。
• border-image: linear-gradient(45deg, rgb(86, 243, 55), rgb(244, 16, 28)) 1;：这行代码设置了边框图像为线性渐变，从 rgb(86, 243, 55) 渐变到 rgb(244, 16, 28)，渐变方向为 45 度，边框图像的宽度为 1。
• box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5), inset 0px 0px 10px rgba(255, 255, 255, 0.5); /* 添加内外阴影 */：这行代码设置了两个阴影效果。第一个阴影 0px 0px 10px rgba(0, 0, 0, 0.5) 表示在元素的外部添加一个从上到下、从左到右延伸的阴影，阴影的宽度为 10 像素，颜色为半透明的黑色。第二个阴影 inset 0px 0px 10px rgba(255, 255, 255, 0.5) 表示在元素的内部添加一个从上到下、从左到右延伸的阴影，阴影的宽度为 10 像素，颜色为半透明的白色。

以上内容就是在实践中的一些小总结，有些零乱，希望能给大家提供一点帮助，后面还会对页面持续进行完善。

参考网站：

jiaminghi/data-view是什么？（DataV，dv大屏数据可视化开源组件库）-CSDN博客文章浏览阅读2.1w次，点赞6次，收藏15次。简述：相信大家在平时工作中，难免会遇到开发大屏的需求，页面中有很多比较炫酷的CSS效果，这里给大家推荐一款大屏数据展示组件库，里面有各种边框、装饰、图标、飞线图、水位图、轮播表等等，支持vue和react，有很多炫酷效果，下面大家介绍一下；_data-viewhttps://blog.csdn.net/weixin_65793170/article/details/129285248

Welcome | DataVVue 大屏数据展示组件库https://datav-vue3.jiaminghi.com/