vue-insagent-pc/src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import api from './http'
import i18n from './i18n'
import store from './store'
import global from '@/config/global'
import ElementUI from 'element-ui'
import '@/utils/directives.js'
import VueSplit from 'vue-split-panel'
import VueDirectiveWindow from 'vue-directive-window';
import {dateFormat} from '@/utils/dataformat.js'
import btnPermission from '@/utils/btnPermission'
import dialogDrag from '@/utils/dialogDrag'
import VueClipboard from 'vue-clipboard2'

import 'element-ui/lib/theme-chalk/index.css'
// import 'element-ui/lib/'
import 'font-awesome/css/font-awesome.min.css'
import './assets/css/global.css' //导入全局样式表
import './assets/css/common.css' //导入全局样式表

//预览图片Start
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,
    inline: false, //启动inline模式
    button: false, //显示右上角关闭按钮
    loop: true,
    loading: false
  }
})
// 注册一个全局自定义指令 `v-watermark`
Vue.directive('watermark', {
  inserted: function (el, binding) {
    // 获取绑定的水印文字
    // const text = binding.value || '水印';
    // const canvas = document.createElement('canvas');
    // const ctx = canvas.getContext('2d');
    // canvas.width = 250;
    // canvas.height = 200;
    // ctx.font = '16px Arial';
    // ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
    // ctx.textAlign = 'center';
    // ctx.textBaseline = 'middle';
    // ctx.translate(canvas.width / 2, canvas.height / 2);
    // ctx.rotate(-30*Math.PI/180);
    // ctx.fillText(text,0,10);
    // const base64 = canvas.toDataURL('image/png');
    // el.style.backgroundImage = `url('${base64}')`;
    // el.style.backgroundColor = '#fff';


    const watermarkText = binding.value || '默认水印';
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 300;
    canvas.height = 250;
    ctx.fillStyle = 'rgba(180, 180, 180, 0.3)';
    // ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.font = '16px Arial';
    ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.translate(canvas.width / 2, canvas.height / 2);
     ctx.rotate(-30*Math.PI/180);
    ctx.fillText(watermarkText, 0, 0);
    const base64 = canvas.toDataURL('image/png');
    const watermarkDiv = document.createElement('div');
    watermarkDiv.style.position = 'absolute';
    watermarkDiv.style.top = '0px';
    watermarkDiv.style.left = '0px';
    watermarkDiv.style.width = `${el.offsetWidth}px`;
    watermarkDiv.style.height = `${el.offsetHeight}px`;
    watermarkDiv.style.pointerEvents = 'none';
    watermarkDiv.style.backgroundImage = `url('${base64}')`;
    // watermarkDiv.style.backgroundSize = '100% 100%';
    // watermarkDiv.style.backgroundColor = 'rgba(255,255,255,0.1)';
    watermarkDiv.style.zIndex = '1000';
    el.appendChild(watermarkDiv);
  }
});
// ElementUI.Dialog.props.lockScroll.default = false;
Vue.config.productionTip = false;
VueClipboard.config.autoSetContainer = true
Vue.use(VueClipboard)
//预览图片End
Vue.use(VueDirectiveWindow);
Vue.use(VueSplit)
Vue.use(ElementUI)
Vue.use(api)
Vue.use(router)
Vue.use(dateFormat)//日期组件格式化
Vue.use(btnPermission)
Vue.use(dialogDrag)
Vue.prototype.global = global

new Vue({
  el: '#app',
  i18n,
  router,
  store,
  render: h => h(App)
});