使用vue指令实现max-collapse-tags

使用vue指令实现max-collapse-tags

前言

当下拉内容选择过多时往往会造成高度太高，看起来有点突兀，右图对其进行了隐藏
这需要用到element的collapse-tags和max-collapse-tags

不过max-collapse-tags是element-ui(2.3.0)推出的新属性，下文照猫画虎使用vue指令的形式模仿这个属性以在老项目中使用

实现效果

注册指令

// 指令 v-selectShowLimit 方法
function showLimitFun(el,binding){
  setTimeout(() => {
    let tagWrap = el.querySelector(".el-select__tags>span");
    // 溢出隐藏
    for( let i=0;i<tagWrap.children.length;i++ ){
      if( (i+1) > binding.value ){
        tagWrap.children[i].style.display = "none";
      }else{
        tagWrap.children[i].style.display = "flex";
      }
    }
    // 改tag显示隐藏
    let selShowLimitTip = el.querySelector(".selShowLimitTip");
    if( tagWrap.children.length > binding.value ){
      selShowLimitTip.style.display="inline-block";
    }else{
      selShowLimitTip.style.display="none";
    }
    // 改tag内容
    selShowLimitTip.innerHTML = `+ ${( tagWrap.children.length - binding.value )}`;
    // 改高度
    let ipt = el.querySelector(".el-input__inner");
    let c = tagWrap.children.length > binding.value ? binding.value : tagWrap.children.length;
    ipt.style.height= ( 30 * c ) + ( 28 )  + "px";
  }, 200);
}

// 注册指令
app.directive("selShowLimit", {
  // inserted、created
  inserted: function (el, binding) {
    let tagWrap = el.querySelector(".el-select__tags>span");
    // 添加tag
    tagWrap.insertAdjacentHTML("afterend", `<span class="selShowLimitTip" 
      style="
      display: inline-block;
      line-height:28px;
      margin-left:6px;
      background-color:#F0F2F5;
      color:#909399;
      border-radius:4px;
      padding:0px 5px 0px 9px;
      font-size:14px;
      "
    ></span>`)
    tagWrap.insertAdjacentHTML("afterend","<section style='width:100%'></section>");
    showLimitFun(el, binding);
  },
  // update、updated
  update: showLimitFun
})

使用

<el-select
  v-model="form.productId"
  placeholder="请选择商品"
  clearable
  filterable
  multiple
  v-selShowLimit="3"
>