Vue_HR项目中遇见的坑

注册全局公共组件

• 在src/componenst/index.js文件中

import PageTools from './pageTools'
export default {
  install(Vue) {
    Vue.component('PageTools', PageTools)
  }
}

• 在入口main.js 文件中

import Components from '@/components/index.js' //引入src/componenst中的index.js文件
// 注册全局组件
Vue.use(Components)

注册全局指令

• 在src/directives/index.js文件中

export const imgerror = {
  inserted(dom, options) {
    dom.onerror = function() {
      dom.src = options.value
    }
  }
}

• 在入口main.js文件中

// 注全局 指令
import * as directives from '@/directives/index.js'
Object.keys(directives).forEach(x => {
  Vue.directive(x, directives[x])
})

生成二维码

import QrCode from 'qrcode'

QrCode.toCanvas(this.$refs.myCanvas, url) // 将地址转化成二维码

/*
QrCode.toCanvas(dom, info), dom用来放置二维码的元素，info是个字符串，转化为二维码的内容，如果是一个地址的话 就会跳转到该地址 如果不是地址就会显示内容
*/

打印

import Print from 'vue-print-nb'
Vue.use(Print);  //注册之后会生成一个v-print指令

  <div id='myPrint'></div>
  <el-row type="flex" justify="end">
          <el-button v-print="printObj" size="small" type="primary">打印</el-button>
   </el-row>
   
   data(){
   returun {
      printObj: {
        id: 'myPrint' //指定打印的区域
        }
     }
   }