我找到了一个 codepen,它演示了可以将 @input
与 contentEditable
结合起来创建自定义输入 dom,而不必是输入元素。但是,我无法在 VueJS 中使用 JSX 添加 @input
。难道不能用jsx吗?
这是不使用 JSX 的演示,@input
在常规 dom 中工作:
https://codepen.io/supraniti/pen/Lypobx?editors=0010
谢谢
JS
Vue.component('editable',{
template:'<div contenteditable="true" @input="update"></div>',
props:['content'],
mounted:function(){
this.$el.innerText = this.content;
},
methods:{
update:function(event){
this.$emit('update',event.target.innerText);
}
}
})
var example = new Vue({
el: '#example',
data: {
text:"This text is editable!"
}
});
HTML
<div id="example">
<editable :content="text" @update="text = $event"></editable>
<div>
<pre>{{$data |json }}</pre>
</div>
</div>
最佳答案
啊啊啊啊啊。我在 JSX 中发现,您实际上可以在常规 span
上使用 onInput
!
希望它能节省一些人的时间!
关于javascript - 如何在 Vuejs 中使用 @input 和 contentEditable 与 JSX 语法将 dom 转换为可输入的 dom?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52266985/