vue使用小技巧记录

1. ❤ 将异步方法处理成同步的常用方式 a. promise.all

b. async await

2. ❤ 在vue中，方法返回promise，适用场景如：动态生成表单，每个表单的表格校验结果获取。 A：return new Promise

    funName () {
      return new Promise((resolve) => {
        axiosFun(this.id).then((res) => {
          resolve(res)
        })
      })
    }
    
    // 调用promise方法
    
    axios.all([this.funName()]).then(
        axios.spread((acct) => {
          
        })
      )

B：用async返回promise

      this.objFun = async (parameter) => {
        const data = await batchDownloadCheck(caseId)
        return data ? data : false
      }

3. ❤ slot插槽 a. 定义插槽

b. 使用插槽

定义插槽： <slot name="content"></slot>

使用插槽： <div slot="content">// 具体内容</div>

其中，content是插槽的名字

4. ❤ 样式穿透

     1. >>> 只作用于 css
     2. ::v-deep 只作用于 sass
     3. /deep/ 只作用于 less

5. ❤ 在el-table的列render方法中，渲染自定义的组件

       {
          prop: 'keyname1',
          label: '文件Hash值',
          render: (h, params) => {
            const cellValue = params.row.keyname2
            const renderDom = [h('span', cellValue)]
            // 渲染自定义组件
            renderDom.push(
              h(copyOpt,
                {
                  props: {
                    copyContent: cellValue
                  },
                  on: {
                    click: (val) => { this.yourFunName(val, parms.row) }
                  },
                [h('div', '--')]
              )
            )
            return renderDom
          }
        }

copyOpt是组件名称，传参放props中,方法放on中；若有参数回传，则自己写个箭头函数，把传参传回自己的方法，再加上自己需要的额外参数。ps:以下是一种错误写法

   on: {
     click: this.yourFunName(val, parms.row) // 错误写法，不能这样写括号，传参
   }

6. ❤ 移动端适配解决方案 布局全部使用rem.引入rem.js。此处以100px为单位，即1rem=100px

rem.js内容如下

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

//清除滚动的时候触发触摸事件
function stopTouchendPropagationAfterScroll(){
	    var locked = false;
	    window.addEventListener('touchmove', function(ev){
	        locked || (locked = true, window.addEventListener('touchend', stopTouchendPropagation, true));
	    }, true);
	    function stopTouchendPropagation(ev){
	        ev.stopPropagation();
	        window.removeEventListener('touchend', stopTouchendPropagation, true);
	        locked = false;
	    }
}

//激活:active状态
document.body.addEventListener('touchstart', function () {});

在vue文件中引入，rem.js

<script>
import './rem'
</script>

在style中直接书写样式，例如

.info-wrapper {
  font-size: .28rem;
  min-width: 1rem;
  padding: .55rem 0 1.29rem 0;
}