Vue 自定义指令生成 placeholder

<el-form-item label="姓名">
  <el-input></el-input>
</el-form-item>

<div class="el-form-item">
  <label for="title" class="el-form-item__label">姓名</label>
  <div class="el-form-item__content">
      <div class="el-input">
      <input type="text" class="el-input__inner">
    </div>
  </div>
</div>

import _ from 'lodash'
export default { 
  beforeMount(el) {
    if (!(_.isFunction(_.get(el.classList, 'contains')) && el.classList.contains('el-form'))) {
      console.warn('v-auto-placeholder 指令需要放在 el-form 上使用')
      return
    }
    // 取出 form 下所有 el-form-item
    const formItems = el.querySelectorAll('.el-form-item')
    _.forEach(formItems, item => {
      // label element
      const labelEl = _.get(item.children, '0', '')
      // label 文本，如果 label 有子级，则取出子级第一个的 文本
      const label = _.get(labelEl.children, 'length', 0) > 0 ? _.get(labelEl.children, '0.children.0.innerText', '') : _.get(labelEl, 'innerText', '')
      // content element
      const contentEl = _.get(item.children, '1')
      // input 框
      const input = contentEl && contentEl.querySelector ? contentEl.querySelector('input,textarea') : null
      // 原 placeholder
      const placeholder = _.get(input, 'placeholder')
      // 如果有值则不替换
      if (placeholder && placeholder !== '' && placeholder !== '请选择') {
        return
      }
      // 取出内容第一个元素的 classList
      const classList = _.get(contentEl, 'children.0.classList')
      // 根据不同组件显示不同文本
      if (_.some(classList, (className) => ~[
        'el-select',
        'el-cascader'
      ].indexOf(className))) {
        if (input) input.setAttribute('placeholder', `请选择${label}`)
      } else {
        if (input) input.setAttribute('placeholder', `请输入${label}`)
      }
    })
  }
}

<el-form v-auto-placeholder>
  <el-form-item label="姓名">
    <el-input></el-input>
  </el-form-item>
  <!-- ... -->
</el-form>