前端杂记6（Ant组件、Vue）

1.ant菜单和路由同步高亮

a-menu的设置：

<a-menu
      style="width: 100%"
      :open-keys.sync="openKeys"
      v-model="current"
      :defaultSelectedKeys="[keyVal]"
      :selectedKeys="[keyVal]"
      mode="inline"
      @click="handleClick"
      
    >

vue的data：

current: [],
openKeys: ['sub1','sub2','sub3','sub4'],
keyVal:'',

利用中间实例bus达到组件间的通信
在进入其他对应页面路由的时候this.$bus.emit触发事件

this.bus.$on("onSidermenuChangeCurrent", function(keyVal){
      that.keyVal=keyVal;
      that.current[0] = keyVal;
      console.log('当前菜单key：',that.current);
      //that.focus();
    });

2.ant下拉选择框的选择经过确认后才改变

<a-popconfirm :title="'确定要回滚版本至' + rollbackVersion + '吗？'" @cancel="cancelRollbackDeploy()" @confirm="confirmRollbackDeploy()" :visible="record.deployId == rollbackDeployId" >
  <a-select
    v-if="refreshSelect"
    :value="text"
    style="width: 100%"
    @change="rollbackDeploy($event,record.deployId)"
    :disabled="record.deployStatus=='UPGRADING'||record.deployStatus=='ROLLBACKING'"
  >

  <a-select-option :key="index" :value="item" v-for="(item,index) in record.deployHistoryVersion">
    {{item}}
  </a-select-option>

  </a-select>
</a-popconfirm>

①利用 :value 绑定住表格当前值，用默认初始值参数是会被改变的

②利用$event获取选择值，同时也能达到传参的效果。

2.img的src动态绑定(vue)

①背景图片：

<div class="video-preview-picture" :style="{backgroundImage:'url('+video.picture_url+')'}">

②src:

引用本地图片需要加上require，使用require定义之后，就可以动态使用了。 :src="’…/img/image.jpg’" 会被解析为字符串

3.this.$refs取到的组件实例为undefined

在created中使用 this.$refs时 dom没有加载成功 所以为undefined

1. 写在mounted中 此时dom已经挂载完成
2. ②使用this.$nextTick（function()）：this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法Vue.nextTick一样，不同的是回调的 this 自动绑定到调用它的实例上。

4.HTML识别换行符输出

①CSS中 设置：white-space: pre-line;

②pre标签是可以的，但不推荐

5.【TS】RangeError: Maximum call stack size exceeded

同名错误：

6.npm依赖包版本号的~和^

_{会匹配最近的小版本依赖包，比如}1.2.3会匹配所有1.2.x版本，但是不包括1.3.0

^{会匹配最新的大版本依赖包，比如}1.2.3会匹配所有1.x.x的包，包括1.3.0，但是不包括2.0.0

*会安装最新版本的依赖包