场景

• 私信的组件多次点击发送按钮，造成同一条私信的重复发送

分析

• 在等待发送组件模态框自动关闭的过程中, 多次触发了发送按钮的click事件,导致多次发送了同样的数据
• 解决方案可以利用 form disabled属性

解决

• 在私信发送之后禁用send button , 在关闭模态框之后，解禁send button

<template>
    <div>
        <span class="btn btn-sm btn-default" data-target="#modal-send-message" data-toggle="modal">
            <font-awesome-icon icon="comment"/>发送私信
        </span>

        <div class="modal fade" id="modal-send-message" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            发送私信
                        </h4>
                    </div>

                    <div class="modal-body">
                        <span v-show="errors.has('body')" class="alert-danger">{{ errors.first('body') }}</span>
                        <textarea class="form-control" placeholder="私信内容" rows="3" data-vv-as="私信内容"  data-vv-name="body" v-validate.initial="'required'"
                                  v-model="body" v-if="!success_status"></textarea>
                        <div class="alert alert-success" v-if="success_status">
                            <strong>私信发送成功</strong>
                        </div>
                    </div>

                    <!-- Modal Actions -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" :disabled="send_disabled" @click="sendMessage">
                            发送
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['user_id'],
        data: function () {
            return {
                body: '',
                success_status: false,
                send_disabled : false,
            };
        },
        methods: {
            // 发送私信
            sendMessage: function () {
                let url = '/api/message/store';
                let vm = this;
                vm.send_disabled = true;
                this.$http.post(url, {to_user_id: vm.user_id, body: this.body}).then(function (response) {
                    vm.success_status = response.body.status === 0;
                    if (response.body.status === 0) {
                        // 防止一瞬间关闭模态框 导致看不到提示
                        setTimeout(function () {
                            $('#modal-send-message').modal('toggle');

                            // 将模态框重置为默认的状态 方便再次发送私信
                            vm.success_status = false;
                            vm.body = '';
                            vm.send_disabled = false;
                        }, 2000);
                    }


                }, function (response) {
                    console.log(response);
                })
            },
        }
    }
</script>

<style scoped>
    .btn_margin {
        margin-left: 5px;
    }

</style>