Vue中TodoList案例_动画-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue中TodoList案例_动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

MyItem.vue : 主要是引入了import 'animate.css'样式库，animate.css样式库配置见上一篇文章animate.css样式库，然后再li标签外套了transition标签，引用了name里面的名称是animate.css拿过来的，绑定了enter-active-class和leave-active-classanimate库内自带的绑定样式

<template>
  <!--appear上来就有动画-->
  <transition
        name="animate__animated animate__bounce"
        appear
        enter-active-class="animate__jackInTheBox"
        leave-active-class="animate__zoomOutDown"
    >
      <li>
        <label >
          <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/> <!--给input指定一个checked选项，如果是true就勾选上，如果是false就不勾选-->
          <span v-show="!todo.isEdit">{{todo.title}}</span>
          <input
              type="text"
              v-show="todo.isEdit"
              :value="todo.title"
              @blur="handleBlur(todo,$event)"
              ref="inputTitle"
          >
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
        <button class="btn btn-edit" @click="handleEdit(todo)" v-show="!todo.isEdit">编辑</button>
      </li>
    </transition>
</template>

<script>
import 'animate.css'
import pubsub from 'pubsub-js'
export default {
  name: "MyItem",
  //声明接收对象
  props:[
      'todo',
  ],
  methods:{
    //勾选or取消勾选
    handleCheck(id){
      //通知App组件将对应的todo对象的done值取反
      // this.checkTodo(id)
      this.$bus.$emit('checkTodo',id)
    },
    //删除
    handleDelete(id){
        if (confirm('确定删除吗')){  //confirm根据用户的交互来决定到底是布尔值为真还是为假，点击确定为真，点击取消为假
          // this.deleteTodo(id)
            pubsub.publish('deleteTodo',id)
        }
    },
    //编辑
    handleEdit(todo){
      if (todo.hasOwnProperty.call('isEdit')){
        todo.isEdit = true
      }else {
        console.log('a@@')
        this.$set(todo,'isEdit',true)
      }
      // setTimeout(()=>{
      //   this.$refs.inputTitle.focus()
      // },20)
      this.$nextTick(function (){
           this.$refs.inputTitle.focus()
      })
    },
    //失去焦点回调（真正执行修改逻辑）
    handleBlur(todo,e){
      todo.isEdit=false
      if (!e.target.value.trim())return alert('输入不能为空')
      this.$bus.$emit('updateTodo',todo.id,e.target.value)
    }
  }
}
</script>

<style scoped>
li{
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}
li label{
  float:left;
  cursor: pointer;
}

li label li input{
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button{
  float: right;
  display: none;
  margin-top: 3px;
}

li:before{
  content: initial;
}
li:last-child{
  border-bottom: none;
}
li:hover{
  background-color: #ddd;
}
li:hover button{
  display: block;
}
</style>

Vue中TodoList案例_动画,linerVue,vue.js,前端,javascript