项目积累 - 掘金

一、js改变对象的属性名

var a = JSON.stringify(arr).replace(/courseName/g, "title").replace(/code/g, "name");

var b = JSON.parse(b);

var arr = [
    {
        "courseName": "英语",
        "code": "english"
    },
    {
        "courseName": "药物化学",
        "code": "ywhx"
    }
];
var a = JSON.stringify(arr).replace(/courseName/g, "title").replace(/code/g, "name");
var b = JSON.parse(b);
console.log(b)

二、将el-table表格导出excel文件

1、首先安装依赖：xlsx、file-saver：

npm install xlsx --save
npm install file-saver --save

2、在main.js中导入

// vue中导出excel表格模板
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

Vue.prototype.$FileSaver = FileSaver; //设置全局
Vue.prototype.$XLSX = XLSX; //设置全局

3、点击导出按钮

<el-button @click="exportToExcel">导出</el-button>
<el-table id="out-table">
   <el-table-column prop="id" label="编号"></el-table-column>   
</el-table>

4、在组件的methods中写入方法

methods: {
   //   点击按钮  导出excel表格：
   exportToExcel() {
       var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
       	   let tables = document.getElementById("out-table");
      	   let table_book = this.$XLSX.utils.table_to_book(tables,xlsxParam);
           var table_write = this.$XLSX.write(table_book, {
               bookType: "xlsx",
               bookSST: true,
               type: "array"
        });
        try {
           this.$FileSaver.saveAs(
               new Blob([table_write], { type: "application/octet-stream" }),
               "sheetjs.xlsx"
            );
        } catch (e) {
           if (typeof console !== "undefined") console.log(e, table_write);
        }
        return table_write;
  },
  }

当表格存在fixed固定列属性时

exportToExcel() {
      var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
      let fix = document.querySelector('.el-table__fixed');
      let wb;
      if (fix) {
        //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
        wb = this.$XLSX.utils.table_to_book(
          document.getElementById("out-table").removeChild(fix),
          xlsxParam
        );
        document.getElementById("out-table").appendChild(fix);
      } else {
        wb = this.$XLSX.utils.table_to_book(
          document.getElementById("out-table"),
          xlsxParam
        );
      }
      var wbout = this.$XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });

      try {
        this.$FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          this.title+'.xlsx'
        );
      } catch (e) {
        if (typeof console !== "undefined") {
        }
      }
      return wbout;
    },

5、注意：

this.$XLSX.utils.table_to_book中放的是table的dom节点 sheetjs.xlsx导出的是表格的名字

三、我用CSS做了100个Loading加载动画

网址：mp.weixin.qq.com/s/NtDrqK9E8…

四、vue项目中实现网页的截图功能 (html2canvas)

1、先安装html2canvas

npm install html2canvas --save

或者

yarn add html2canvas

2、引入html2canvas

import html2canvas from 'html2canvas'

3、主要实现代码：

1、HTML中：

<template>
    <!--超级地图-->
    <div id="superMap"/>
    
    <!--点击button即可实现页面的截图-->
    <div id="test">
      <el-button @click="getImg">截图</el-button>
    </div>
</template>

2、JavaScript中：

methods:{

//截图方法
 getImg(){
   html2canvas(
     document.getElementById('superMap'),
     {
       backgroundColor:null,//画出来的图片有白色的边框,不要可设置背景为透明色（null）
       useCORS: true,//支持图片跨域
       scale:1,//设置放大的倍数
     }
   ).then(canvas => {
     //截图用img元素承装，显示在页面的上
     let img = new Image();
     img.src = canvas.toDataURL('image/jpeg');// toDataURL :图片格式转成 base64
     document.getElementById('test').appendChild(img);
 
     //如果你需要下载截图，可以使用a标签进行下载
     let a = document.createElement('a');
     a.href = canvas.toDataURL('image/jpeg');
     a.download = 'test';
     a.click();
   })
 }
 
}

4、在使用html2canvas时，估计大家可能会遇到下面的问题

1、图片跨域：如果需要截图的地方包含其他域名的图片，那么会出现跨域问题
解决：
	1）设置useCORS:true,
	2）把后端的图片转成base64
	3）将图片都放在同一个域名下

2、画出来的图片有白色的边框解决: 1）设置 backgroundColor: null

具体可见官网:html2canvas.hertzen.com/

五、vue 中使用rem布局

1、安装postcss-px2rem及px2rem-loader

npm install postcss-px2rem px2rem-loader --save

2、在根目录src中新建util目录下新建rem.js等比适配文件

// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

3、在main.js中引入适配文件

import ‘./util/rem’

4、到vue.config.js中配置插件

// 引入等比适配插件
const px2rem = require('postcss-px2rem')

// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 16
})

// 使用等比适配插件
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

六、vuex存储路由

如图，每次点击负荷预测时，路径和下面的菜单栏及主体内容都要对应上，通过思考，想到vuex可以存储路由。

之前每次点击总是对应不上，存在的问题是，再router中定义路由的redirect时，每次都指向了一个固定的路由，以至于菜单和主体对应不上。

解决：

1、sotre中,定义事件，改变vuex中存储的路由，vuex此时可以起到本地存储的功能

export default {
  state: {
    loadRoute: '/index/loadFore/heatBegin',
  },
  mutations: {
    changeForeRoute(state, val) {
      state.loadRoute = val;
    },
  },
  actions: {
    
  },
  getters:{
    loadRoute(state){
      return state.loadRoute
    }
  }
}

2、点击菜单时触发事件

<el-menu
    :default-active="activePage"
    class="el-menu-vertical-demo"
    text-color="#fff"
    :unique-opened="true"
    router
    @select="handleSelect"
>

handleSelect(path) {
      this.$store.commit("changeForeRoute", path);
    },

3、router中

 redirect: to => {
    return store.state.load.loadRoute
},