【vue页面数据请求进度条--页面爱心--借助插件实现页面防抖-echarts实现自适应】

1.页面爱心

点击出现随机颜色小爱心

它是一个js文件实现的
我们首先创建一个love.js文件，然后把下面代码拿过去并导出

export function love() {
  ;(function (window, document) {
    var hearts = []
    window.requestAnimationFrame = (function () {
      return (
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
          setTimeout(callback, 1000 / 60)
        }
      )
    })()
    init()

    function init() {
      css(
        ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
      )
      attachEvent()
      gameloop()
    }

    function gameloop() {
      for (var i = 0; i < hearts.length; i++) {
        if (hearts[i].alpha <= 0) {
          document.body.removeChild(hearts[i].el)
          hearts.splice(i, 1)
          continue
        }
        hearts[i].y--
        hearts[i].scale += 0.004
        hearts[i].alpha -= 0.013
        hearts[i].el.style.cssText =
          'left:' +
          hearts[i].x +
          'px;top:' +
          hearts[i].y +
          'px;opacity:' +
          hearts[i].alpha +
          ';transform:scale(' +
          hearts[i].scale +
          ',' +
          hearts[i].scale +
          ') rotate(45deg);background:' +
          hearts[i].color
      }
      requestAnimationFrame(gameloop)
    }

    function attachEvent() {
      var old = typeof window.onclick === 'function' && window.onclick
      window.onclick = function (event) {
        old && old()
        createHeart(event)
      }
    }

    function createHeart(event) {
      var d = document.createElement('div')
      d.className = 'heart'
      hearts.push({
        el: d,
        x: event.clientX - 5,
        y: event.clientY - 5,
        scale: 1,
        alpha: 1,
        color: randomColor()
      })
      document.body.appendChild(d)
    }

    function css(css) {
      var style = document.createElement('style')
      style.type = 'text/css'
      try {
        style.appendChild(document.createTextNode(css))
      } catch (ex) {
        style.styleSheet.cssText = css
      }
      document.getElementsByTagName('head')[0].appendChild(style)
    }

    function randomColor() {
      return (
        'rgb(' +
        ~~(Math.random() * 255) +
        ',' +
        ~~(Math.random() * 255) +
        ',' +
        ~~(Math.random() * 255) +
        ')'
      )
    }
  })(window, document)
}

然后在你需要使用的页面引入

import { love } from '../../public/love'

在当前使用的页面的mounted函数里调用

mounted () {
    love()
  }

这样小心心效果就实现了

2.页面加载显示进度条

借助插件nprogress，安装方法

npm i nprogress  || yarn add nprogress

请求时配置

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
axios.interceptors.request.use(config => {
  // 开始进度条
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})
axios.interceptors.response.use(config => {
  // 结束进度条
  NProgress.done()
  return config
})

3.借助插件实现页面防抖

npm i  lodash||yarn add lodash     //-s全局安装

在需要使用的页面引入
import _ from 'lodash'
data(){
	return:{
      _: _,
    	}
	}

触发input事件
 input: _.debounce(function () {
      this.send()
    }, 300),
    //渲染页面

4.echarts实现自适应

myChart.setOption(option);//使用刚指定的配置项和数据显示图表后。
 window.onresize = function () {
      myChart.resize()//窗口变化时，重新绘制,实现自适应大小
    }