记录第一次掘金发帖

1.记录手动添加element下拉框底部按钮

需求需要在饿了么下拉框底部添加自定义品牌添加功能，因为饿了么并没有提供给下拉框添加其他ui操作的插槽功能，因此手动通过visible-change事件添加HTML片段，并且在事件中绑定点击需要执行的函数。上代码： html设置

<el-select
  ref="selectRef"
  @visible-change="(v) => visibleChange(v, 'selectRef', clicFn)"
></el-select>

js中visibleChange函数以及添加HTML片段

visibleChange(visible, refName, onClick) {
  if (visible) {
    const ref = this.$refs[refName]
    let popper = ref.$refs.popper
    if (popper.$el) popper = popper.$el
    if (!Array.from(popper.children).some(v => v.className === 'el-cascader-menu__list')) {
      const el = document.createElement('ul')
      el.className = 'el-cascader-menu__list'
      el.style = 'border-top: solid 1px #E4E7ED; padding:0; color: #606266;'
      el.innerHTML = `<li class="el-cascader-node" style="height:38px;line-height: 38px">
                      <span class="el-cascader-node__label" style="font-size:14px;text-align:center">添加自定义${refName === 'selectBrand' ? '品牌' : '出厂型号'}</span>
                      </li>`
      popper.appendChild(el)
      el.onclick = () => {
        // 底部按钮的点击事件 点击后想触发的逻辑也可以直接写在这
        onClick && onClick()
        // 以下代码实现点击后弹层隐藏 不需要可以删掉
        if (ref.toggleDropDownVisible) {
          ref.toggleDropDownVisible(false)
        } else {
          ref.visible = false
        }
      }
    }
  }
}

因为我的需求中有两个下拉框，因此代码中会有判断，忽略即可。该项目为vue2，因此用ref获取dom进行操作。