日常小问题汇总（完善中）

导览

1、去掉img标签src为空时的默认边框
2、 判断是否点击在区域内
3、点击和长按
4、table圆角效果
5、拖拽
6、元素flex布局以后，在元素上面的滚动不能联动其他区域
7、vue添加二级动态路由的时候报错： Duplicate named routes definition
8、文字超出内容时，居中省略
9、vue项目国际化 vue-i18n 使用：https://juejin.cn/post/6992863276300238862

1、去掉img标签src为空时的默认边框

img[src=''],
img:not([src]) {
  opacity: 0;
}

2、 判断是否点击在区域内

 // 监听单击事件
   this.listenClick = (e) => {
     let searchResult = this.$refs.parent;
     if (!searchResult.contains(e.target)) {
       // 点击在了列表区域外
     } else {
       // 点击在了列表区域内
     }
   }; 
//addEventListener的第3个参数表示出发顺序，默认为false。如果为false则listenClick后于具体的元素事件执行，如果为true则先于具体的事件执行
document.addEventListener('click', this.listenClick, true);

3、点击和长按
移动端 touch

var timeOutEvent=0;//定时器  
// html 
// gotouchstart//手指放到屏幕上时触发
//touchmove: //手指在屏幕上滑动式触发
//touchend: //手指离开屏幕时触发
//touchcancel: //系统取消touch事件的时候触发，这个好像比较少用
<div @touchstart="gotouchstart" @touchmove="gotouchmove" @touchend="gotouchend"></div>
//js
gotouchstart(){
   let that = this;
   clearTimeout(timeOutEvent);//清除定时器
   timeOutEvent = 0;
   timeOutEvent = setTimeout(function(){
        //执行长按要执行的内容，
      ...
     },600);//这里设置定时
 },
      //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
gotouchend(){
    clearTimeout(timeOutEvent);
      if(timeOutEvent!=0){
        //这里写要执行的内容（尤如onclick事件）
     }
},
//如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按 
gotouchmove(){
     clearTimeout(timeOutEvent);//清除定时器
     timeOutEvent = 0;
},

pc端分别对应的事件为
mousedown：按下鼠标键时触发。
mouseup：释放按下的鼠标键时触发。
mousemove：鼠标移动事件。
全部鼠标事件
click：单击事件。
dblclick：双击事件。
mousedown：按下鼠标键时触发。
mouseup：释放按下的鼠标键时触发。
mousemove：鼠标移动事件。
mouseover：移入事件。
mouseout：移出事件。
mouseenter：移入事件。
mouseleave：移出事件。
contextmenu：右键事件
4、table圆角效果

   table {
        width: 100%;
        /* 消除单元格之间的空隙 */
        border-collapse: collapse;
        /* 消除掉外边框 */
        border-style: hidden;
       //让每个单元格平分宽度
        table-layout: fixed;
        position:relative;
        box-sizing: border-box;
    &::before{
     //利用伪元素产生圆角效果
      content:'';
      display:inline-block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      box-sizing: border-box;
      border-radius: 6px;
      border: 1px solid red;
      }
        th,
        td {
          border: 1px solid red;
          min-height: 48px;
          line-height: 20px;
        }
        tr:last-child td{
          border-bottom:none;
        }
      }
    }

5、拖拽：https://mp.weixin.qq.com/s/bfhh0QkeV1vAEcaEClZMxg
6、元素flex布局以后，在元素上面的滚动不能联动其他区域。需要把滚动加到页面根部，这样flex布局的元素滚动就可以和其他区域联动。但是会带来一个问题，当页面有弹窗时，不能阻止下面区域的滚动，此时要手动禁止页面滚动和放开页面滚动。

/**
 * @description: 禁止页面滚动
 */
export const rejectWindowScroll = function () {
  const documentElement = document.documentElement;
  documentElement && (documentElement.style.height = '100vh'); // 禁止页面滑动
  documentElement && (documentElement.style.overflow = 'hidden');
};
/**
 * @description: 允许页面滚动
弹窗消失的时候如果立刻放开滚动，有可能会让弹窗有左右偏移的效果，所以要对allowWindowScroll 做延时生效
 */
export const allowWindowScroll = function () {
  const documentElement = document.documentElement;
  documentElement && (documentElement.style.height = '');
  documentElement && (documentElement.style.overflow = 'overlay');//防止因为进度条占据页面空间造成其他元素的抖动，但overlay是有兼容性问题的。具体可通过can i use 去查询
};

7、添加二级动态路由
①、判断子路由是否已经存在当前的路由中，如果已经存在不做塞入
②、添加一个自定义方法，来清空之前的路由
以下的写法是在vue2框架下：

import VueRouter from 'vue-router';
//先清空
 this.$router.matcher = new VueRouter().matcher;
//再添加
 routerList.forEach((item) => {
     this.$router.addRoute(item);
 });

8、https://juejin.cn/post/6966042926853914654#heading-3