可视化大屏插件使用笔记

一、数字滚动插件

1、vue-count-to

//1、安装
cnpm install vue-count-to --save
//2、使用

2、@huoyu/vue-digitroll（https://github.com/yingtian666/vue-digitroll）

//1、安装
cnpm i -S @huoyu/vue-digitroll  
//2、使用

二、滚屏插件

1、vue-seamless-scroll（https://github.com/chenxuan0000/vue-seamless-scroll） 

//1、安装
cnpm install vue-seamless-scroll --save
//2、使用

                

                  

                    

                      
                    
                  
                  

                    
 ：{{item.buildAdminName}}
                    
 ：{{item.buildAdminTel}}
                    
 ：{{item.buildAdminAddress}}
                  
                
              
 
import vueSeamlessScroll from 'vue-seamless-scroll'
 components: {
    vueSeamlessScroll,
  },
data(){
    return {
        classOption: {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      },
  }
}
.seamless-warp{
  width: 100%;
  height: 69.7rem;
  overflow: hidden;
}

四、获取当前时间及天气

   
{{ title.time }}
   
周{{ title.week }}
   
{{ title.date }}
   
{{ title.weather }}
   
{{ title.temperature }}
   
{{ title.wind }}

data(){
    return {
        weekMap: {
        0: "日",
        1: "一",
        2: "二",
        3: "三",
        4: "四",
        5: "五",
        6: "六",
      },//星期
      title: {
        time: "",
        week: "",
        date: "",
        temperature: "", //温度
        weather: "", //天气
        wind: "", //风向
      },//天气对象
    }
}

//获取天气
    async getWeather() {
      const res = await this.$http.get(
        "https://tianqiapi.com/api?version=v6&appid=58192418&appsecret=K8vdzO7t"
      );
      if (res.status == 200) {
        this.title.weather = res.data.wea;
        this.title.temperature = `${res.data.tem2}-${res.data.tem1}℃`;
        this.title.wind = res.data.win;
      }
    },
//获取时间
    setTimeLoop() {
      if (this.timeInterval) {
        clearInterval(this.timeInterval);
      }
      const nowDate = new Date();
      this.title.time = dayjs(nowDate).format("hh:mm:ss");
      this.title.week = this.weekMap[nowDate.getDay()];
      this.title.date = dayjs(nowDate).format("YYYY/MM/DD");
      this.timeInterval = setInterval(() => {
        const nowDate = new Date();
        this.title.time = dayjs(nowDate).format("hh:mm:ss");
        this.title.week = this.weekMap[nowDate.getDay()];
        this.title.date = dayjs(nowDate).format("YYYY/MM/DD");
      }, 1000);
    },

五、DataV安装使用（DataV）

//1、安装
npm install @jiaminghi/data-view
//2、使用
// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
//按需加载
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)

状态更新

避免你的组件更新了数据后，状态却不刷新，也就是没变化，请务必看这里

组件props均未设置deep监听，刷新props时，请直接生成新的props对象（基础数据类型除外），或完成赋值操作后使用ES6拓展运算符生成新的props对象（this.someProps = { ...this.someProps }）。

六、echarts(Apache ECharts) 

//1、安装
cnpm install echarts -S
//2、使用
在main.js中
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

7、禁止鼠标选择呈现蓝色样式

 -webkit-user-select: none;  /* 禁止 DIV 中的文本被鼠标选中 */

  -moz-user-select: none;     /* 禁止 DIV 中的文本被鼠标选中 */

  -ms-user-select: none;      /* 禁止 DIV 中的文本被鼠标选中 */

  user-select: none;             /* 禁止 DIV 中的文本被鼠标选中 */

8、数字液晶字体DS-DIGIT

新建font文件夹

将DS-DIGIT.TTF放入，新建dsfont.css

@font-face {
    font-family: 'electronicFont';
    src: url('./DS-DIGIT.TTF');
    font-weight: normal;
    font-style: normal;
  }
  .font_number{
    font-family: "electronicFont"!important;
  }

在main.js中引入

import './assets/font/dsfont.css'

使用