vue开发todolist

todolist 开发流程

1. 框架： Vue.js
2. 组件库：SUI-mobile
   • SUI
     • pc： http://sui.taobao.org/sui/docs/gallery.html
     • 移动： http://m.sui.taobao.org/

tips

1. 利用事件冒泡来实现mask的关闭
2. tab选项卡效果切换–使用计算属性过滤值
3. 减少使用margin，多使用padding，因为移动端有时会失效
4. 弹出框绝对居中

   position: absolute;
   left:0;top:0;right:0;bottom:0;
   margin:auto;
   

5. css类名规则：BEM,OOCSS
6. .circle.circle-success 两个类名中间没有空格，是捆绑类名，即两个类型同时存在才生效
7. input自动获得焦点html中autofocus属性
8. 短路操作性能比三元运算高

   <p :class = "[size, flag?bg:color ]"></p>
   <p :class = "[size, flag && bg || color ]"></p>
   

html代码

<div class="page-group">
      <div class="page page-current">
      <!-- 你的html代码 -->
      <!-- header -- start -->
        <header class="bar bar-nav">
          <a class="icon icon-star pull-left"></a>
          <a class="icon icon-edit pull-right"
            @click = "inputFlag = !inputFlag"
          ></a>
          <h1 class="title"> todolist </h1>
        </header>
      <!-- header -- end -->

      <!-- content --  start  -->
        <section>
          <div class="content">
            <input type="text" 
              v-show = "inputFlag" 
              v-model = 'val' 
              placeholder="请输入代办事项"
              @keyup.13 = "addItem"
            >
            <div class="card"
              v-for = "( item,index ) in newTodos"
            >
              <div class="card-content">
                <div class="card-content-inner">
                  <p> {{ item.task }} </p>
                  <div class="btn-box">
                    <button class = "button button-danger pull-right"
                      @click = "check( index )"
                    >
                      <i class = "icon icon-remove"></i>
                    </button>
                    <button class = "button button-success pull-right"
                      :class = "[ item.flag && 'button-fill' ]"
                      @click = " item.flag = !item.flag "
                    >
                      <i class = "icon icon-check"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      <!-- content --  end  -->
      

        <div class="mask-box"
          v-show = "maskFlag"
          @click = "maskFlag = false"
        >
          <div class="mask-bg"></div>
          <div class="mask-content">
            <p> 您确定要删除吗？ </p>
            <button class = "button button-fill button-danger pull-right"
              @click = "ensure( activeIndex )"
            > 确定 </button>
          </div>
        </div>

      <!-- tabbar -- start  -->
        <div class="tab-bar">
          <ul>
            <li class = "circle"
              v-for = " item in tabbars "
              :class = "[ 'circle-'+item.style, type === item.text && 'circle-fill'  ]"
              @click = " type = item.text "
            > 
              {{ item.text }}
            </li>
          </ul>
        </div>
      <!-- tabbar -- end -->
        
    </section>
  </div>

js代码

new Vue({
  el: '.page-group',
  data: {
    todos: [
      {
        id: 1,
        task: '任务一',
        flag: true
      },
      {
        id: 2,
        task: '任务二',
        flag: true
      }
    ],
    inputFlag: false,
    val: '',
    maskFlag: false,// 遮罩的开关
    activeIndex: 0,
    type: 'A',
    tabbars: [
      {
        id: 1,
        text: 'A',
        style: 'all'
      },
      {
        id: 2,
        text: 'F',
        style: 'finish'
      },
      {
        id: 3,
        text: 'U',
        style: 'unfinish'
      }
    ]
  },
  methods: {
    flagChange ( i ) { //是用来切花卡片 中的 开关
      this.todos[ i ].flag = !this.todos[ i ].flag
    },
    check ( index ) { // 当我们点击删除按钮时，判断用户任务完成状态
      if ( this.todos[index].flag ) {
        //证明已经完成了，可以直接删除

        this.remove( index )

      } else {
        // 证明是没有完成的，不可以直接删除，我们得出用户友好提示
        this.activeIndex = index 
        this.maskFlag = true

      }
    },
    remove ( index ) {
      this.todos.splice( index, 1 )
    },
    addItem () {
      this.todos.push({
        id: this.todos.length + 1,
        task: this.val
      })
      this.val = ''
      this.inputFlag = false
    },
    ensure ( index ) { //它是遮罩里面的确定按钮上执行的事件
      this.remove( index )
    }

  },
  computed: {
    allTodos () {
      // 所有任务
      return this.todos 
    },
    finishTodos () {
      //表示已经完成的任务
      return this.todos.filter( item => item.flag && item )
    },
    unfinishTodos () {
      // 表示未完成的任务
      return this.todos.filter ( item => !item.flag && item )
    },
    newTodos () {
       switch ( this.type ) {
         case 'A':
           return this.allTodos
           break;
         case 'F':
           return this.finishTodos 
           break;
         case 'U': 
           return this.unfinishTodos
           break;
         default:
           break;
       }
    }
  }
})