javascript - 具有 CSS 动画和过渡效果的 Vue.js Todo 任务

Question

在下面的示例中，当您保存新任务时，您如何添加视觉指示器，例如微调器和勾号。

基本上，当我点击保存按钮时，应该会发生以下情况:

1. 保存按钮应该变得不可见

2. 取消图标应该变得不可见，应该出现一个微调器来指示正在发生的事情

3. 如果成功保存，勾号图标应该短暂出现，然后在显示删除图标之前消失。

当我尝试复制 sleep 效果以在 updateTask() 方法被触发时显示微调器时，我正在使用的 v-show 似乎不起作用？

<div class="container" id="el">

    <div class="row">
           <div class="col-md-10"><h1>Tasks</h1></div>
           <div class="col-md-2">
              <button id="" class="btn btn-primary pull-right" type="button" v-on:click="createTask()">
                  Add New
              </button>
           </div>
    </div>

    <div class="row" >
              <div class="col-sm-10 col-md-8">
                <table class="table table-striped">
                  <tr class="row" v-for="task in tasks">
                    <td class="col-sm-5">
                      <div class="form-group">
                        <label class="sr-only" for="name">
                          Name</label>
                          <input v-if="editKey == task.id" name="name" type="text" class="form-control"   v-model="task.name">

                          <span v-else v-on:click="editTask(task)">{{ task.name }}</span>
                         </div>
                    </td>
                    <td class="col-sm-5">
                      <div class="form-group">
                        <label class="sr-only" for="date">
                          Date</label>
                         <input v-if="editKey == task.id" name="date" type="text" class="form-control date-picker"  v-pikaday="task.date">
                         <span v-else v-on:click="editTask(task)">{{ task.date }}</span>

                      </div>
                    </td>
                    <td class="col-sm-2">
                      <ul class="list-inline">
                        <li v-if="editKey == task.id" >
                          <button class="btn btn-success btn-sm" type="button" v-on:click="updateTask(task)" v-show="!loading">
                             Save                               
                          </button>
                         </li>
                        <li v-if="editKey == task.id ">
                           <span v-show="!loading"><i class="fa fa-times text-danger" v-on:click="cancelEdit(task)" title="Cancel"></i></span>
                           <span v-show="loading"> <i class="fa fa-spinner"></i></span>
                        </li>
                        <li v-if="editKey !== task.id">
                           <i class="fa fa-trash-o text-muted" v-on:click="removeTask(task)" title="Delete"></i>
                        </li>
                        <li v-if="editKey !== task.id && task.id == -1">
                           <i class="fa fa-exclamation-triangle text-warning" title="Unsaved"></i>
                        </li>
                      </ul>

                   </td>
                  </tr>
               </table>
            </div>

            <pre>{{$data | json }}</pre>

    </div>

</div>

    <script>
          Vue.directive('pikaday', {
          twoWay: true,

          bind: function () {
            var self = this
            $(this.el)
               .pikaday({
                 format: 'D MMM YYYY',
                 defaultDate: moment().toDate()
               })
               .on('change', function () {
                    self.set(this.value)
                  })
          },
          update: function (value) {
            $(this.el).val(value).trigger('change')
          },
          unbind: function () {
            $(this.el).off().pikaday('destroy')
          }
        })

        var vm = new Vue({
          el: '#el',
          data: {
              editKey: '',
              loading: false,
              beforeEditCache: {
                id: '',
                name: '',
                date: ''
              },
              editedTask: null,
              tasks: [
                {id: 1, name: 'Task A', date: '25 Dec 2015'},
                {id: 2, name: 'Task B', date: '26 Dec 2015'}
              ]

          },
          methods: {
            createTask: function() {

                // if previously we were editing a task, lets cancel the edit
                if (this.editedTask){
                  this.cancelEdit();
                }

                // add new task with id -1 to indicate it hasn't been persisted
                this.tasks.push({
                    id: -1,
                    name: '',
                    date: ''
                });  

                // set edit key
                this.editKey = -1; 

            },
            storeTask: function(task) {

                // check if mandatory field completed
                if (!task.name || !task.date) {
                  return;
                }

                // persist the task by generating valid id
                task.id = Math.floor((Math.random() * 100) + 1);

            },

            editTask: function(task) {

                // if we were previously editing a task and clicked on another to edit without saving, let cancel the edit
                if (this.editedTask){
                  this.cancelEdit();
                }

                this.setBeforeEditCache(task);
                this.editedTask = task;
                this.editKey = task.id;
            },

            updateTask: function (task) {

              // if its a new task
              if (task.id == -1){
                this.storeTask(task);
              }
              // otherwise we are editing an existing task
              else {

                if (!this.editedTask.name || !this.editedTask.date) {
                  return;
                }

                this.loading = true;

                this.sleep(3000);

                this.editedTask = null;

                this.editKey = '';

                this.loading = false;

              }

            },

            cancelEdit: function (task = null) {

                if (task && task.id == -1) {
                  this.removeTask(task);
                }
                else {

                  this.editedTask.name = this.beforeEditCache.name;
                  this.editedTask.date = this.beforeEditCache.date;

                  this.editedTask = null;

                  this.editKey = '';
                }

            },

            removeTask: function(task) {
                  this.tasks.$remove(task);
            },

            setBeforeEditCache: function(task) {
                this.beforeEditCache.id = task.id;
                this.beforeEditCache.name = task.name;
                this.beforeEditCache.date = task.date;
            },

            sleep: function(milliseconds) {
              var start = new Date().getTime();
              for (var i = 0; i < 1e7; i++) {
                if ((new Date().getTime() - start) > milliseconds){
                  break;
                }
              }
            }
          }
        })

    </script>

这是 fiddle https://jsfiddle.net/ozzii/6oe2k3py/

* 更新 *

所以我设法更新了这个 - 请参阅新的 fiddle ，以提供所需的功能。但这是一个非常困惑的解决方案——代码到处都是。有谁知道更好/更简洁的方法来重构和实现相同的功能，并可能在保存元素时为刻度提供淡入/淡出效果？

Answer 1

这里是关于 sleep 效果的部分。您可以使用 setTimeout 并使用 bind 函数来确保其中的 this 上下文是 Vue 组件。

this.loading = true;

setTimeout((function(){ 

    this.editedTask = null;

    this.editKey = '';

    this.loading = false; 

}).bind(this), 3000);