日常笔记

1.watch监听路由的变化

watch: {
      $route:{
            handler:  function (val,  oldval){
                 if(val.path == '/地址'){
                    this.handleSeach()
                 }
                },
                deep: true
            }
        }                

2.路由的跳转

this.$router.push("/index")

 3.echart重新绘制画布

setTimeout(() => {
   mychart.resize()
},100)

4.eventBus的使用

1.在main.js里面添加
import eventBus from '../src/access/js/eventBus'
vue.protype.$eventBus = eventBus

2.需要调用的页面
this.$eventBus.emit("a1")

3.被调用的页面
mounted(){
   this.$eventBus.on("a1", () => {
     this.handleSeach()
})
}

5.Object.freeze的使用

this.yesPoints = Object.freeze(res[0].yesPoints)
this.totalPoints = Object.freeze([...this.yesPoints,  ...this.absentPoints,  ...this.noPoints,])
<p v-for="(item,index) in totalPoints" :key="index">
{{ `${index + 1 + '.'}${item}`}}
</p>

 6.computed的使用

data()下定义 noPoints = []
computer: {
      aiResults(){
            const aiYesResult ='符合'
            const aiNoResult ='不符合'
            const {noPoints} = this
            if(noPoints.length>0){
                return aiNoResult
             }
             return aiYesResult
  }
}

<input :value = "aiResults"></input>
调用computer里面的aiResults进行动态赋值

7.解决html2canvas 白边问题

html2canvas 白边问题
html

<div ref="imageWrapper" class="iswap" id="imageWrapper">
<!--这里是省略的html内容-->
</div>

css
#imageWrapper{
 340px;
height: 480px;
overflow: visible !important;
}
 
js，由于canvas在绘制过程中
down(){
var _this = this
window.scrollTo(0, 0); //如果你的窗口滚动的话需要，
let imageWrapper = document.getElementById('imageWrapper')
html2canvas(imageWrapper, {
x: imageWrapper.getBoundingClientRect().left + 13, // 绘制的dom元素相对于视口的位置，由于获取的位置比原本往前偏离的所以要加上，你需要根据自己的视图去计算
y:imageWrapper.getBoundingClientRect().top, // top没有偏离所以不用修改
backgroundColor: null, // 解决生成的图片有白边，只单单加和这个并没有效果
imageWrapper.offsetWidth - 15, // 因为多出的需要剪裁掉，
height:imageWrapper.offsetHeight,
useCORS: true,
scale:3, // 因为生成图片会模糊，但是这个会使下载的图片变大，可以使用base64压缩
dpi: window.devicePixelRatio, //z
}).then(canvas => {
const img = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,", "")
const finalImageSrc = "data:image/jpeg;base64," + img

// 添加a标签用于下载
const aElem = document.createElement('a')
document.body.appendChild(aElem) // 223kb
aElem.href = finalImageSrc

// 图片下载名
aElem.download = "erwei.jpg"
aElem.click()
document.body.removeChild(aElem) // 完成后移除
})
},

8.兼容ie浏览器，实现base64图片下载

// 这里是获取到的图片base64编码,这里只是个例子哈，要自行编码图片替换这里才能测试看到效果
const imgUrl = 'data:image/png;base64,...'

// 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
if (window.navigator.msSaveOrOpenBlob) {
var bstr = atob(imgUrl.split(',')[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
var blob = new Blob([u8arr])
window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
} else {
// 这里就按照chrome等新版浏览器来处理
const a = document.createElement('a')
a.href = imgUrl
a.setAttribute('download', 'chart-download')
a.click()
}

9.复制canvas图片

// 尝试过复制canvas和table，但不能达到预期效果。所以这里还是转为img再下载
if (window.getSelection) {

//chrome等主流浏览器
var selection = window.getSelection();
var range = document.createRange();
range.selectNode($("#imgTitle")[0]);
selection.removeAllRanges();
selection.addRange(range);
} else if (document.body.createTextRange) {

//ie

var range = document.body.createTextRange();
range.moveToElementText($("#imgTitle")[0]);
range.select();
}

if (document.execCommand("Copy", "false", null)) {
hrc.box.messageBox({ type: "dismiss", title: "复制成功" });
} else {
hrc.box.messageBox({ type: "error", title: "复制失败" });
return;
}

// copy之后清空选择区域
window.getSelection().removeAllRanges();

10.点击其他区域，给el-tree加高亮显示

 /deep/.el-tree-node.is-current > .el-tree-node_content {
     background-color: #c2d6ea;
}

11.el-tree加滚动条 

#scroll-2{
200px;
height:200px;
overflow:auto;
margin-bottom: 20px;
}
#scroll-2 div{
400px;
height:400px;
}
#scroll-2::-webkit-scrollbar{
4px;
height:4px;
}
#scroll-2::-webkit-scrollbar-track{
background: #f6f6f6;
border-radius:2px;
}
#scroll-2::-webkit-scrollbar-thumb{
background: #aaa;
border-radius:2px;
}
#scroll-2::-webkit-scrollbar-thumb:hover{
background: #747474;
}
#scroll-2::-webkit-scrollbar-corner{
background: #f6f6f6;
}

hover动态修改滚动条宽度 

&::-webkit-scrollbar-thumb{
background-clip: padding-box;
border: 1px solid transparent;
}

12.编辑获取父节点展开

<el-tree :data="treeData" ref="tree" :load="loadNode" lazy node-key="id" check-strictly 
@node-click="hadleCheckChange" highlight-current :default-expanded-keys="parentList>
</el-tree>


//点击所选树
hadleCheckChange(data: any,node: any,e: any){
     TestcaseApi.selectId(data.id).then((resp: any) => {
           if(resp.code === 200){
             this.data = resp.data

           }).catch((e) => {
             this.$message.error(e.message)
          })

 // 点击
const{tree} = this.$refs;
this.parentList = [ ]
this.getTreeNode(node);
}

 

//递归获取所点击节点的id生成新的id数组，用于默认展开
getTreeNode(node: any){
  if(node){
    if(node.label !== undefined){
       this.parentList.unshift(node.data.id)
       this.getTreeNode(node.parent)
}

13.js获取7天之前的日期或者7天之后的日期

function fun_date(num) { 
    var date1 = new Date();
    //今天时间
    var time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate()
    console.log(time1);
    var date2 = new Date(date1);
     date2.setDate(date1.getDate() + num);
     //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
     var time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate(); 
    console.log(time2);
    return time2;
    }
    fun_date(7);
    //2019-6-28
    //2019-7-5

// js获取指定日期是周几
function fun_week(datestr){
    var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
    var week = weekArray[new Date(datestr).getDay()];
    console.log(week);
    return week;
}
 fun_week('2019-6-28') //周五

14.锚点定位

<button @click="returnToA">跳转至</button>
<div id="header"></div>

methods:{
   returnToA(){
      document.querySelector("#header").scrollIntoView();
}    
}

15.全屏

<div class="btn-fullscreen" @click="handleFullScreen">
     <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
           <i class="el-icon-rank"></i>
     </el-tooltip>
</div>

// 全屏事件

 handleFullScreen(){

   let element = document.documentElement;

   if (this.fullscreen) {

      if (document.exitFullscreen) {

            document.exitFullscreen();

         } else if (document.webkitCancelFullScreen) {

            document.webkitCancelFullScreen();

         } else if (document.mozCancelFullScreen) {

            document.mozCancelFullScreen();

         } else if (document.msExitFullscreen) {

            document.msExitFullscreen();

         }

      } else {

         if (element.requestFullscreen) {

            element.requestFullscreen();

         } else if (element.webkitRequestFullScreen) {

            element.webkitRequestFullScreen();

         } else if (element.mozRequestFullScreen) {

            element.mozRequestFullScreen();

         } else if (element.msRequestFullscreen) {

            // IE11

            element.msRequestFullscreen();

         }

       }

        this.fullscreen = !this.fullscreen;

   }

16.切换中英文

<el-dropdown class="user-name" trigger="click" @command="handleCommand">
// 显示用户名
     <span class="el-dropdown-link">
           {{username}} <i class="el-icon-caret-bottom"></i>
     </span>
  <el-dropdown-menu slot="dropdown">
        <el-dropdown-item divided  command="changeZh">切换中文</el-dropdown-item>
        <el-dropdown-item command="changeEn">切换英文</el-dropdown-item>
        <el-dropdown-item divided  command="loginout">退出登录</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

// 用户名下拉菜单选择事件
handleCommand(command) {
    if(command == 'loginout'){
       this.$common.removeSessionStorage('token');
           this.$router.push('/login');
       }
    else if(command == 'changeZh'){
           this.$i18n.locale = 'zh_CN';
    }
    else if(command == 'changeEn'){
           this.$i18n.locale = 'en_US';
    }
},