2019遇到的问题

I belong to : Experience

2019/2

IE浏览器url中文乱码

IE浏览器直接拼接url,中文会乱码，需要像下面这样进行转码

 <a :href="`/ctyun/clientcase?tag=${encodeURI(data[current].tag)}`" >

用router-link的就不用转码：

 <router-link :to="{name:'clientcase',query:{tag:item.tag}}" >
 或者
<router-link v-if="item.id" :to="{path:`/clientcase?tag=${item.tag}&id=${item.id}`}" >

组件上有ref的话，这个组件不可以使用懒加载

  <template v-for="item in partnerList">
    <case-item :data="item" :key="item.index" :ref="`case${item.id}`"></case-item>
</template>

    components: { CaseItem },//正确的做法
    components: { CaseItem:()=>import('....') },//懒加载的做法  
 getData(type, offset, limit) {
    xxxxx.then((res) => {
    this.partnerList.push(...res.item);
    this.scrollTo(this.selectedId);
    });
},
scrollTo(id) {
    this.$nextTick(() => {
        const target = this.$refs[`case${id}`];
        xxxxx
    });
},

如果<case-item>是懒加载的话，第一次进入这个页面target = this.$refs[`case${id}`];是undefined

@click="func"和@click="fun()"的区别

如果func函数没有参数，就没有区别
如果func函数有参数，例如func(arg){...}，那么@click="func" 在func(arg)里面输出arg并不是undefined，而是一个事件对象

:class可以是一个数组

boxClazz(){
    return ['box',  !this.canAddHideAnimationLater ? '' : this.visible ? 'show': 'hide']
}
<nav :class="boxClazz" ></nav>

动态挂载组件

import Vue from 'vue';
import imgPreview from './img-preview.vue';
let instance;

let imgPreviewConsturctor = Vue.extend(imgPreview);


const initInstance = () => {
  const el = document.createElement('div')
  el.id="__img_preview_box"
  document.body.appendChild(el);
  instance = new imgPreviewConsturctor().$mount(`#${el.id}`);

};

const init = (imgSrc) => {
    if(!instance){
        initInstance();
    }
    instance.imgSrc = imgSrc;
    instance.visible = true;
}
export default {
    init
}

body上加上over-flow:hidden获取scrollTop会不准确

fixed定位页面抖动解决方法

这方法是看微博网站代码看到的，完美！！其他百度上的方法没一个管用

fixed定位的元素加上

nav-tab{
  z-index: 10;
  transform: translateZ(0px);
  position: relative;
  transition: top 0.3s ease 0s;
  will-change:top;
}

页面上加多一个同等高度的容器

<!--关键-->
<div :style="{height:fixNav?`${nav-height}px`:0}"></div>
<!--fixed定位的元素-->
<nav-tab  :class="{'fix-nav':fixNav}"></nav-tab>

vucli3构建库模式大坑

1、代码里不能有懒加载，不然打出来的文件不止1个，引入的时候路径不对

2、图片不能<img src>渲染，会找不到路径。可以用background-image解决

3、 new consturctor().$mount();的时候，生命周期钩子mouted在$mount()过程中就会执行.

4、 import Vue from 'vue' 得到的也不是主项目的vue

//方案：把vue实例当做props传进去
instance = new feedbackConsturctor({
     //！！！依赖库手动挂载的节点的__proto__跟主项目的__proto__不是同一个，会导致断链
     propsData:{
         http$ : _VUE_.prototype.http$
     }}).$mount();

5、 vue父子组件之间是没有原型链的，手动$mount()的组件$root是自己。所以子组件如果要使用主项目的数据，可以

data(){
    return { http$:this.$root.http$ }
}

可以利用src做请求

send(url, params){

        const img = new Image;
        img.src = `${url}?${this.serializeParams(params, true)}`;
    }

2019/6

overflow-y: visible不起作用

在container上添加以下样式

padding-top: 20px;
margin-top: -20px;

IE在本地运行出错

但是部署到测试环境是正常的，吓死个人了

函数节流

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现

2019/10

IE el-button嵌套`<a>`不能跳转

IE 下修改window.location.href不能跳转

弹出新标签页

chrome都可以

window.open(nextUrl);// firefox\IE\chrome都可以

let a = document.createElement('a');
a.click();// firfox不行

//firefox提示弹窗允许
const evt = document.createEvent('MouseEvents');
    evt.initEvent('click', true, true);
    a.dispatchEvent(evt);