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'
}
})
可以添加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)
}
document.createElement创建的是一个实体DOM，而VUE的元素是虚拟DOM，两者不能交叉使用。一般做法思路是：
1、在html中预定义一个元素区域
<template>
<div v-if="show">
<input v-model="name" />
</div>
</template>
2、在data中定义两个数据量，show控制显示不显示，name直接获取值
data(){
return {
show:false,
name:''
}
}
我认同 miukoo 的说法。
我建议你这个需求还是 通过css样式控制+v-if来实现。还是把精力放在css布局上面。
如有帮助，望采纳
创建名为modelValue的属性：
props: {
modelValue: String
},
在更新值的时候要发送一个名为update:modelValue的事件
const updateValue = (e: KeyboardEvent) => {
const targetValue = (e.target as HTMLInputElement).value
inputRef.val = targetValue
context.emit('update:modelValue', targetValue)
}
注意在使用context.emit之前要在setup中添加第二个参数context
setup(props, context) {
const inputRef = reactive({
val: props.modelValue || '',
error: false,
message: ''
})
const updateValue = (e: KeyboardEvent) => {
const targetValue = (e.target as HTMLInputElement).value
inputRef.val = targetValue
context.emit('update:modelValue', targetValue)
}
}
https://blog.csdn.net/weixin_45745641/article/details/121526107
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！