vue3实现Form的字段权限控制

正在开发的一个系统，需要根据权限进行可编辑字段的控制。备忘一下！

自定义指令：

const fieldHas = function (app) {

  app.directive('fieldHas', {

    mounted: function (el, binding) {

      const { value } = binding

      // 自定义指令的执行函数，，取到vuex保存的字段权限，格式类似于 {formName:{fieldName:fieldRule}}

//如果没有权限数据，视为该字段为完全控制

      const fieldPermissions = store.state.webRoot.fields[value]

      if (!fieldPermissions) { return }

      const elNames = Object.keys(fieldPermissions)

      elNames.forEach(item => {

        const els = el.querySelector('.' + item)

        if (!els) { return }

        switch (fieldPermissions[ item ])

        {

          case 'r'://只读权限

            let inputDivs = els.querySelectorAll('.el-textarea')//单独处理el-textarea的上层div,其余的输入控制好像都有el-input，具体还未深入研究

            inputDivs = inputDivs.length > 0 ? inputDivs : els.querySelectorAll('.el-input')

            if (inputDivs && inputDivs.length > 0)

            {

              inputDivs.forEach(div => {

                div.classList.add('is-disabled')

                div.classList.remove('el-input--suffix')

              })

            }

            let inputs = els.querySelectorAll('textarea')//单独处理textarea,其余的输入控制好像都是input，具体还未深入研究

            inputs = inputs.length > 0 ? inputs : els.querySelectorAll('input')

            if (inputs && inputs.length > 0)

            {

              inputs.forEach(ele => {

                ele.disabled = true

              })

            }

            els.querySelector('.el-input__suffix') && els.querySelector('.el-input__suffix').remove()

            el.addEventListener('click', (e) => { // 禁用单击事件，屏蔽clearable和列表框的下拉动作

              e.preventDefault()

              e.stopPropagation()

            }, true)

            break

          case 'h'://无权限

            els.style.display = 'none'

            break

        }

      })

    }

  })

使用：

<el-form v-fieldHas="'formName'">

       <el-form-item class="fieldName"/>

</el-form>

谁有更好的方案，欢迎留言！