element-plus 在VNode中使用input无法输入内容

1.单独封装input组件。
子组件:

<template>
  <el-input
    v-model="exclusiveMark"
    @input="handleInput"
    style="width: 300px"
    clearable
    required
    placeholder="请输入锁定备注"
  />
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    required: true
  }
})
const exclusiveMark = ref(props.modelValue)
const emit = defineEmits(['update:modelValue'])

const handleInput = (value: string) => {
  exclusiveMark.value = value
  emit('update:modelValue', value)
}
</script>

  1. 父组件引用:
    h函数定义inputVNode,。NewInput为定义的子组件

  const exclusiveMark = ref<any>()
  const inputVNode = h(NewInput, {
    modelValue: exclusiveMark.value,
    'onUpdate:modelValue': (val) => {
      exclusiveMark.value = val
    }
  })

通过confirm。VNode打开弹框

ElMessageBox.confirm(
    curBtnType.value === btnTypeMap.ALLLOCK
      ? h('div', { class: ['max-h-50vh', 'overflow-y-auto'] }, [
          h(
            'div',
            {
              class: ['mb-10px']
            },
            [h('span', null, '全部锁定原因:'), radioVNode]
          ),
          seatNameVNodeList
        ])
      : curBtnType.value === btnTypeMap.LOCK
        ? h('div', { class: ['max-h-50vh', 'overflow-y-auto'] }, [
            seatNameVNodeList,
            h(
              'div',
              {
                class: ['mb-10px']
              },
              [inputVNode]
            )
          ])
        : h('div', { class: ['max-h-50vh', 'overflow-y-auto'] }, seatNameVNodeList),
    msgBoxContext,

    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          if (curBtnType.value === btnTypeMap.LOCK && !exclusiveMark.value) {
            ElMessage.warning('请输入锁定备注')
            return false
          }
          done()
        } else {
          done()
        }
      }
    }
  )
  1. 搞定


    image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容