v-scale-screen和dataV大屏组件试用报告

最近同事在开发大屏项目，开发完后向我强烈安利了两个组件，分别是大屏自适应组件 v-scale-screen 和大屏可视化组件库 dataV。

于是乎，我就在一个Vue3项目中尝试用了下这两个组件。

一、 v-scale-screen

v-scale-screen根据CSS3的scale缩放功能对页面进行适配，不受浏览器窗口缩放的影响。

1.安装依赖

Vue3或Vue2 >=2.7,使用2.2.0及以上的版本，而Vue2.6及以下项目，则使用1.x版本。

// Vue3或Vue2 >=2.7
npm install v-scale-screen@2.2.0

// vue2 <= 2.6
npm install v-scale-screen@1.0.0

2.项目引入

// Vue3或Vue2 >=2.7 需要的页面按组件方式导入即可
import VScaleScreen from 'v-scale-screen'

// vue2 <= 2.6 main.js文件中进行注册
import Vue from 'vue'
import VScaleScreen from 'v-scale-screen'

Vue.use(VScaleScreen)

3.页面使用

<template>
  <v-scale-screen>
    <div>
    </div>
  </v-scale-screen>
</template>

4.试用评价

大屏项目使用起来比较简单，自适应的效果也不错，但是非大屏项目不建议使用。

二、dataV

dataV 是一个大屏数据展示库。

1.安装依赖

官网提供的vue3版本还不完善，建议安装@kjgl77/datav-vue3版本。

// Vue3
npm install @kjgl77/datav-vue3

// Vue2
npm install @jiaminghi/data-view

2.项目引入

Vue3、Vue2项目均在main.js文件中进行全局注册。

// vue3
import DataV from '@kjgl77/datav-vue3';

app.use(DataV)

// Vue2
import DataV from '@jiaminghi/data-view';

Vue.use(DataV)

3.页面使用

<template>
   <div class="">
     <dv-border-box-12 key="1"> 
       <div class="">111</div>
       <div class="">
          <dv-charts :option="state.option" key='2' />
        </div>
     </dv-border-box-12>
  </div>
</template>

注意事项（防止dataV组件不能正常显示，样式错乱）：

1）在每一个dataV组件（即以dv开头的组件）外层最好都包裹一个div 2）不要在dataV组件上写非组件内容的样式 3）如果不给dataV组件写固高固宽时，每一个dataV组件最好都设置一个唯一key

4.试用评价 1）组件动态效果较好，适用于大屏项目 1）图表组件没有echart丰富，不能悬浮提示，非大屏项目不适用 3）官网推荐使用Chrome浏览器，但火狐、360、edge浏览器试用了也能正常打开，但是IE浏览器无法打开。