Question

以下代码允许我在我的应用程序中使用点击编辑标题标记。

我正在寻找在页面上执行任何其他操作时处理退出编辑模式的最佳方法...无论是点击还是拖放。

<validator name="teamSetValidation">
    <input id='teamSetName' v-if="isEditingName" type="text" v-model="teamSet.name" class="semi-bold p-t-10 p-b-10 m-l-15 edit-header" v-on:keyup.enter="saveTeamSetName()" v-on:keyup.esc="doneEditing()" v-validate:name.required.maxlength="teamSetRules" :isEditingName="true"/>
    <h3 v-else class="semi-bold p-t-10 p-b-10 m-l-15" v-on:click="editing()" :isEditingName="false">{{ teamSet.name }} <span class="fa fa-edit"></span></h3>
    <div class="text-small">
        <span class="text-danger" v-if="$teamSetValidation.teamSet.name.required">A name is required.</span>
        <span class="text-danger" v-if="$teamSetValidation.teamSet.name.maxlength">The name you provided is too long.</span>
    </div>
    <div class="b-grey b-b m-t-10"></div>
</validator>

使用Javascript：

 var vm = new Vue({
    el: '#page',
    data: {
        // When true, user can edit the teamSet name
        isEditingName: false,

        teamSet: teamSet,
        teamSetRules: {
            required: false,
            maxlength: 64
        }
    },
    methods: {
        editTeamSetName: function () {
            alert('editing');
        },
        saveTeamSetName: function () {
            if(this.$teamSetValidation.valid) {
                this.doneEditing();
                var teamSet = this.teamSet,
                    self = this;

                $.ajax({
                    url: '/team/'+teamSet.id,
                    type: 'PATCH',
                    data: {
                        'name': teamSet.name
                    },
                    error: function(res) {

                        Messenger().post({
                            message: 'Unable to save changes',
                            type: 'error',
                            hideAfter: 3
                        });

                        self.editing();
                    }
                });
            }
        },
        editing: function () {
            this.isEditingName = true;
            Vue.nextTick(function () {
                $('#teamSetName').focus();
            });
        },
        doneEditing: function () {
            this.isEditingName = false;
        }
    }
});

Answer 1

将一个模糊事件附加到输入应该可以解决问题：

<input id='teamSetName' v-if="isEditingName" 
 type="text" v-model="teamSet.name" 
 class="semi-bold p-t-10 p-b-10 m-l-15 edit-header" 
 v-on:keyup.enter="saveTeamSetName()" 
 v-on:keyup.esc="doneEditing()" 
 v-validate:name.required.maxlength="teamSetRules" 
 :isEditingName="true" v-on:blur="doneEditing()"
/>

单击元素时执行操作

1 个答案: