更改编辑模式Vue.js + Typescript后如何专注于输入字段

Question

在我更改了 mode d'édition 之后，我尝试设置输入字段的焦点。但焦点未设置在输入字段上。在输入出现之前，我们有一个必须单击以显示输入的字段，因此我希望通过单击此字段直接设置输入的焦点，并且我没有再次单击输入。请帮帮我

感谢您的帮助

<script lang="ts">
    import Vue from 'vue';
    import ObjetDocument from '../../../models/IObjetDocument';
    import { textearaAutoHeight } from '../../../assets/scripts/animateInput';

    export default Vue.extend({
        props: {
            objetDocument: {
                type: String,
                required: true
            },
            enEditionObjet: {
                type: Boolean,
                required: true
            },
            typeDocument: {
                type: String,
                required: true
            }
        },
        data: function () {
            return {
                enEdition: this.enEditionObjet,
                messageErreur: "",
                objet: "",
                objetTextarea: ""
            }
        },
        watch: {
            objet: function () {
                if (!this.objet) {
                    this.messageErreur = this.$t('messageInputObjetVide').toString();
                }
                else {
                    this.messageErreur = "";
                }
            },
            objetTextarea: function () {
                if (!this.objetTextarea) {
                    this.messageErreur = this.$t('messageInputObjetVide').toString();
                }
                else {
                    this.messageErreur = "";
                }
            },
            objetDocument: function () {
                this.objet = this.objetDocument;
                this.convertObjetHtmlToObjetTextarea(this.objetDocument)
            },
            enEditionObjet: function () {
                this.enEdition = this.enEditionObjet;
            }
        },
        methods: {
            undoChange: function () {
                this.objet = this.objetDocument;
                this.convertObjetHtmlToObjetTextarea(this.objetDocument);
                this.changeModeEdition();
            },
            updateObjet: function (e) {
                if (!this.messageErreur) {
                    this.$emit('update', this.objet);
                }
                e.preventDefault();
            },
            changeModeEdition: function () {
                this.enEdition = !this.enEdition;
                this.$emit('changeModeEdition', this.enEdition);
                textearaAutoHeight()
            },
            convertObjetTextareaToObjetHtml: function (value: string) {
                this.objet = value.replace(/\n/gi, "<br/>");
            },
            convertObjetHtmlToObjetTextarea: function (value: string) {
                this.objetTextarea = value.replace(/<br\/>/gi, "\n");
            }
        },
        mounted: function () {
            textearaAutoHeight()
        },
        created: function () {
            this.objet = this.objetDocument;
            this.convertObjetHtmlToObjetTextarea(this.objetDocument);
        }
    })
</script>

<template>
    <div class="editable-container">
        <div v-if="objet" class="editable hover-pointer"
             v-show="!enEdition"
             @click="changeModeEdition"
             v-html="objet">
        </div>
        <div v-if="!objetDocument" class="editable hover-pointer text-grey"
             v-show="!enEdition"
             @click="changeModeEdition"
             style="font-style:italic">
            <div v-if="typeDocument=='Facture'">{{ $t('visualisationObjetVide_dela', { typeDocument : typeDocument.toLowerCase() } )}}</div>
            <div v-if="typeDocument=='Avoir' || typeDocument=='Acompte'">{{ $t('visualisationObjetVide_del', { typeDocument : typeDocument.toLowerCase() } )}}</div>
            <div v-if="typeDocument=='Devis'">{{ $t('visualisationObjetVide_du', { typeDocument : typeDocument.toLowerCase() } )}}</div>
        </div>

        <div v-show="enEdition">
            <form @submit="updateObjet">
                <div class="inputGroup inputGroup-white inputGroup-facturation">
                    <textarea v-model="objetTextarea" class="inputGroup--input form-control" rows="1"></textarea>
                    <label class="inputGroup--label">{{$t('texteLabelObjet')}} </label>
                    <div v-if="messageErreur" class="text-invalid">{{messageErreur}}</div>
                </div>
                <div class="navAction">
                    <button type="submit" class="navAction--btn" @click="convertObjetTextareaToObjetHtml(objetTextarea)"><i class="fas fa-check"></i></button>
                    <button type="button" @click="undoChange" class="navAction--btn"><i class="fas fa-undo-alt"></i></button>
                </div>
            </form>
        </div>
    </div>
</template>
<i18n src="../../../localization/facturation/Objet.json"></i18n>

Answer 1

向输入添加一个引用，如下所示：

  <textarea ref='objet' v-model="objetTextarea" class="inputGroup--input form-control" rows="1"></textarea>
            

然后在你的方法中添加这一行：

 this.$nextTick(() => this.$refs.objet.focus());

喜欢

  changeModeEdition: function () {
                this.enEdition = !this.enEdition;
                this.$emit('changeModeEdition', this.enEdition);
                textearaAutoHeight();
                 this.$nextTick(() => this.$refs.objet.focus());
            },

并在您的组件实例中声明$refs：

import Vue, { VueConstructor } from 'vue';

 export default (Vue as VueConstructor<Vue &
    {
        $refs:
        { objet: HTMLFormElement },
    }
    >).extend({
 props:{
  ...