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>
- 父组件引用：
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()
}
}
}
)
-
搞定
image.png
