Artikelverzeichnis
Konflikt zwischen keyup.enter- und Blur-Ereignissen
Der Code lautet wie folgt (Beispiel):
<el-input class="input-new-tag"
v-if="row.inputVisible"
v-model="row.inputValue"
:ref="$index" size="small"
@keyup.enter.native="handleInputConfirm(row,$index)"
@blur="handleInputConfirm(row,$index)"
>
Als ich dieses Geschäft schrieb, stieß ich auf ein Problem
entermitblurKonflikten und drückte die Eingabetaste, was zuinputeinem Fokusverlust führte, der dazu führte, dass diese Funktion2nacheinander ausgelöst wurde.handleInputConfirm(row,$index)
Lösung
Der Code lautet wie folgt (Beispiel):
<el-input class="input-new-tag"
v-if="row.inputVisible"
v-model="row.inputValue"
:ref="$index" size="small"
@keyup.enter.native="$event.target.blur"
@blur="handleInputConfirm(row,$index)"
>
//将回车触发的方法改为去触发元素的blur事件 这样就不会重复触发了。
So vermeiden Sie das gleichzeitige Auslösen von „keyup.enter“ und „blur“.
Problembeschreibung
In einem bestimmten Szenario müssen Sie auf das Etikett klicken,
spanum es zuinputeinem Etikett zu machen, und danninputunter dem Etikett etwas bearbeiten. Drücken Sie nach der Bearbeitung die Eingabetasteenteroder klicken Sieinputaußerhalb des Etiketts, um wieder zumspanEtikett zu wechseln
- Initialisierung
- Nach Doppelklick:
- Eingeben:
实际上触发了两次
den Code implementieren
Der Code lautet wie folgt (Beispiel):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<template v-if="isShow">
<span @dblclick="showInput">{
{
msg}}</span>
</template>
<template v-else>
<input
@keyup.enter="hideInput"
@blur="hideInput"
v-focus
type="text"
v-model="msg"
/>
</template>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
msg: 'hello',
isShow: true,
},
directives: {
focus: {
inserted: (el) => {
el.focus()
},
},
},
methods: {
showInput() {
this.isShow = false
},
hideInput() {
console.log('触发')
this.isShow = true
},
},
})
</script>
</body>
</html>
Lösung
@keyup.enter="$event.target.blur()"
- Nach der Modifikation:
Gesamtrealisierung
Der Code lautet wie folgt (Beispiel):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<template v-if="isShow">
<span @dblclick="showInput">{
{
msg}}</span>
</template>
<template v-else>
<input
@keyup.enter="$event.target.blur()"
@blur="hideInput"
v-focus
type="text"
v-model="msg"
/>
</template>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
msg: 'hello',
isShow: true,
},
directives: {
focus: {
inserted: (el) => {
el.focus()
},
},
},
methods: {
showInput() {
this.isShow = false
},
hideInput() {
console.log('触发')
this.isShow = true
},
},
})
</script>
</body>
</html>