工作日记 - 掘金

一、div、span聚失焦，绑定keydown、keyup等事件的方法

tabindex：全局属性，所有元素上都可以添加，值为整数

tabindex="-1"（为负数是无法通过Tab键给元素聚焦）

<!-- 无法通过tab键切换获得焦点 -->
<div tabindex="-1"></div>

tabindex="0"(可通过Tab键切换获得焦点，顺序有元素的先后顺序定义)

<!-- 切换获取焦点的顺序为 1->2 -->
<div tabindex="0">1</div>
<div tabindex="0">2</div>

tabindex为正值(会根据值得大小依次获得焦点，但尽量避免值大于0，可能会使一些辅助设备难以阅读和操作页面内容)

<!-- 切换获取焦点的顺序为 1->2->3 -->
<div tabindex="3">3</div>
<div tabindex="2">2</div>
<div tabindex="1">1</div>

元素添加tabindex属性，它的子元素不会获得焦点，如需子元素获得焦点，则子元素加tabindex属性
div模拟select下拉框，就需添加tabindex属性

<!-- 切换获取焦点的顺序为 1->2->3 -->
<div class="select-title" tabindex="0"></div>
<div class="select-drop">
	<div class="select-dropItem">选项</div>
</div>

二、VUE中对象属性改变，视图不更新问题解决方法

- Vue.set(Object,key,val) —— Vue.set(vm.obj,'k1','v1')
- this.$set (this.obj,key,val) —— this.$set (this.obj,'k1','v1')
- Object.assign({},this.obj)创建新对象 —— this.obj=Object.assign({},this.obj,{'k1':'v1'})

三、js去除字符串中空格

replace正则匹配方法

去除字符串所有空格：str=str.replace(/\s*/g,"")
去除字符串两头空格：str=str.replace(/^\s*|\s*$/g,"")
去除字符串左侧空格：str=str.replace(/^\s*/g,"")
去除字符串所有空格：str=str.replace(/(\s*$)/g,"")

四、解决element-UI，Table设置高度后，.el-table__body-wrapper高度错乱问题

表格设置固定高度

.el-table__body-wrapper {
   height: calc(100% - 45px（header高度）) !important;
}

表格动态计算高度

created(){
	window.addEventListener('resize',()=>{
    	this.tableHeight=calcHeight(120)
    })
    this.tableHeight=calcHeight(120)
}

cacl.js:
export function calcHeight(value){
	// 自定义公共header部分的高度
	let header=variable.headerHeight
    
    // value 为动态计算table界面的高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分）
    value=value==='undefined'?100:value
    
    //通过原生方法，获取dom节点的高度------获取element-ui table表格body的元素
    let wapper = window.document.getElementsByClassName('el-table__body-wrapper');
    
    //通过原生方法，获取dom节点的高度------获取element-ui table表格header的元素
    let header = window.document.getElementsByClassName('el-table__header-wrapper');
    
    //必须加延时，要不然赋不上去值
    setTimeout(() => {
      //通过上边计算得到的table高度的value值，减去table表格的header高度，剩下的通过dom节点直接强行赋给table表格的body
      wapper[0].style.height = (value - header[0].clientHeight) + 'px';
    }, 100)
    
    return res
}

五、Vue CLI 3.x 移动端适配方案（postcss-px-to-viewport插件px转vw，postcss-pxtorem插件px转rem），配置postcss.config.js

方案一：配置在vue.config.js中
    const pxtovw = require('postcss-px-to-viewport')
     
    css:{
        loaderOptions:{
          postcss:{
            //给postcss-loader传递选项
            plugins:[
              new pxtovw({
                unitToConvert: 'px', // 需要转换的单位，默认为"px"；
                viewportWidth: 750, // 设计稿的视口宽度
                unitPrecision: 5, // 单位转换后保留的小数位数
                propList: ['*'], // 要进行转换的属性列表,*表示匹配所有,!表示不转换
                viewportUnit: 'vw', // 转换后的视口单位
                fontViewportUnit: 'vw', // 转换后字体使用的视口单位
                selectorBlackList: [], // 不进行转换的css选择器，继续使用原有单位
                minPixelValue: 1, // 设置最小的转换数值
                mediaQuery: false, // 设置媒体查询里的单位是否需要转换单位
                replace: true, // 是否直接更换属性值，而不添加备用属性
                exclude: [/node_modules/] // 忽略某些文件夹下的文件
              })
            ]
          }
        }
      }
 方案二：添加postcss.config.js文件
 module.exports = {
  plugins: {
  //px->vw
    'postcss-px-to-viewport': {
      unitToConvert: 'px',
      viewportWidth: 750,
      unitPrecision: 5,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      selectorBlackList: ['.ignore'],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [/(\/|\\)(node_modules)(\/|\\)/]
      // landscape: false, // 横屏配置
      // landscapeUnit: 'vw',
      // landscapeWidth: 568
    },
    //px->rem
    'postcss-pxtorem': {
       rootValue: 37.5,
       propList: ['*']
    }
  }
}