blog-client/plugins/vue.js

import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
  faGithub,
  faQq,
  faWeixin,
  faWeibo,
  faTwitter,
  faFacebook,
  faGooglePlus,
  faTelegram
} from '@fortawesome/free-brands-svg-icons'
import {
  faEnvelope,
  faSearch,
  faThermometerEmpty,
  faThermometerQuarter,
  faThermometerHalf,
  faThermometerThreeQuarters,
  faThermometerFull,
  faAngleDoubleUp,
  faChevronLeft,
  faChevronRight,
  faRss
} from '@fortawesome/free-solid-svg-icons'
import {
  faClock,
  faCalendarAlt,
  faBookmark
} from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import hljs from 'highlight.js'
import { Loading } from 'element-ui'
import Slide from '../components/Slide'

library.add(
  faGithub,
  faQq,
  faWeixin,
  faWeibo,
  faTwitter,
  faFacebook,
  faGooglePlus,
  faTelegram,
  faEnvelope,
  faRss,
  faSearch,
  faClock,
  faCalendarAlt,
  faBookmark,
  faThermometerEmpty,
  faThermometerQuarter,
  faThermometerHalf,
  faThermometerThreeQuarters,
  faThermometerFull,
  faAngleDoubleUp,
  faChevronLeft,
  faChevronRight
)

Vue.component('Icon', FontAwesomeIcon)
Vue.component('Slide', Vue.extend(Slide))
Vue.use(Loading.directive)

export default function (ctx, inject) {
  inject('getHatValue', (count, hotConst = 1000) => {
    const hotTmp = count / hotConst

    if (hotTmp >= 1) {
      return 'full'
    } else if (hotTmp >= 0.75 && hotTmp < 1) {
      return 'three-quarters'
    } else if (hotTmp >= 0.5 && hotTmp < 0.75) {
      return 'half'
    } else if (hotTmp >= 0.25 && hotTmp < 0.5) {
      return 'quarter'
    } else if (hotTmp >= 0 && hotTmp < 0.25) {
      return 'empty'
    }

    return 'empty'
  })

  inject('finishLoad', () => {
    Array.prototype.forEach.call(
      document.querySelectorAll('pre code'),
      hljs.highlightBlock
    ) // 代码高亮
    document.getElementById('loading').style.display = 'none' // 隐藏Loading
  })
}