Vue 如何在creatElement 得到的input中,设置v-model

Question

const inpuVal = ref<string>('')
function showInput(){
    const inputDom = document.createElement('input')
    // 试看这样给input , 写入 v-model 属性, 失败的写法, 请教正确解答
    inputDom.setAttribute('v-model',inputVal.value)

    const parent = document.querySelector('.workgroup-details')
    parent?.insertBefore(inputDom,null)
    
}

<table>
<td> 
     <SearchBoxVue/>  // 子组件 ,点击出一个 有input的菜单,  怎么让这个子组件,可以不受范围td局限
 </td>
</table>

<template>
    <span id="asdxdfads111" @click="showInput()">
        <a-tooltip placement="topLeft" :title="$t('general.search')" :mouseEnterDelay='0.8'>
            <button class="btn-transparent">
                <search-outlined class="filter-grey-3" />
            </button>
        </a-tooltip>
    </span>
//主要是怎么如这个 input 不被 td 限制的弹出来
    <input class="input-border" v-model="inputVal" v-if="showInputMenu"/>
</template>
<script setup lang="ts">
import { ref,onMounted,watch } from 'vue'
interface Props {
    font_size?:string

}
const props = defineProps<Props>()
const showInputMenu = ref<boolean>(false)
const inputVal = ref<string>('')

function showInput(){
    const inputDom = document.createElement('input')
    inputDom.className ='input-border'
    inputDom.setAttribute('v-model',inputVal.value)
    const parent = document.querySelector('.workgroup-details')
    parent?.insertBefore(inputDom,null)

}

watch(()=>inputVal.value,(newValue)=>{
    console.log('sssssssssssssss',newValue)
})

onMounted(()=>{
    const dom = document.getElementById('asdxdfads111')!
    if(dom.parentElement){
        dom.parentElement.style.position = 'relative'
    }
    
})

Answer 1

可以添加input事件，更新v-model绑定的变量值就行了，实际v-model实现也用到input事件

    const inpuVal = ref<string>('')
    function showInput() {
        const inputDom = document.createElement('input')
        // 试看这样给input , 写入 v-model 属性, 失败的写法, 请教正确解答
        inputDom.addEventListener('input',function() {
            inputVal.value = this.value;
        }, false);
        //不受限于td，可以用fixed定位，absolute也行，但是absolute是相对于第一个出现的relative定位的父元素来定位，没有的话则是相对于body。fixed是相对于body
        inputDom.style.cssText = `position:fixed;left:50%;top:50%;margin-left:-${input宽度}/2px;margin-top:-${input高度}/2px`
        //inputDom.setAttribute('v-model', inputVal.value)
        const parent = document.querySelector('.workgroup-details')
        parent?.insertBefore(inputDom, null)
    }