Menu

79.最佳回复(二)

本节说明

  • 对应视频教程第 79 小节:Mark the Best Reply: Part 2

本节内容

本节我们完成前端效果的初步展示。首先我们运行迁移:

$ php artisan migrate:refresh

进入Tinker:

$ php artisan tinker

填充数据:

>>> factory('App\Thread',30)->create();

清除 Redis 缓存:

$ redis-cli
> flushall

然后我们要修改Reply组件:
forum\resources\assets\js\components\Reply.vue

<template>
    <div :id="'reply'+id" class="panel" :class="isBest ? 'panel-success' : 'panel-default'">
        .
        .
        <div class="panel-footer level">
            <div v-if="canUpdate">
                <button class="btn btn-xs mr-1" @click="editReply">Edit</button>
                <button class="btn btn-xs btn-danger mr-1" @click="destroy">Delete</button>
            </div>

            <button class="btn btn-xs btn-default ml-a" @click="markBestReply" v-show="! isBest">Best Reply</button>
        </div>
    </div>
</template>
<script>
    .
    .
    data() {
            return {
              editing: false,
              id: this.data.id,
              body: this.data.body,
              isBest: false
            };
        },
    .
    .
            markBestReply() {
                this.isBest = true;
            }
        }
    }
</script>

更改下Best Reply按钮的样式:
orum\resources\views\layouts\app.blade.php

    .
    .
    <style>
        body{ padding-bottom: 100px; }
        .level { display: flex;align-items: center; }
        .flex { flex: 1 }
        .mr-1 {margin-right: 1em;}
        .ml-a { margin-left: auto; }
        [v-cloak] { display: none; }
    </style>
    .
    .

查看效果:
file
但是我们的工作仅仅完成了一小半而已,我们下一节继续。

本文章首发在 Laravel China 社区
上一篇 下一篇
讨论数量: 0
发起讨论


暂无话题~