【IMWeb训练营作业】vuejs【组件-下拉列表】实现

最新推荐文章于 2020-11-20 07:00:47 发布

土文

最新推荐文章于 2020-11-20 07:00:47 发布

阅读量277

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/szu_ningtowen/article/details/70405366

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

【IMWeb训练营作业】vuejs【组件-下拉列表】实现

主要包括如下内容：

演示效果
任务内容
核心代码

演示效果

PC端效果
手机端效果
网上演示url

http://vueimweb.oschina.mopaasapp.com/

任务内容

下拉列表
组件之间传值
组件编写

核心代码

所有代码托管在 https://git.oschina.net/marknings/vuelearn1.git

vm代码如下所示


var store = {
    save(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    fetch(key){
        return JSON.parse(localStorage.getItem(key)) || [];
    }
}

var list = store.fetch("todolist");

var filter = {
    all:function(list){
        return list;
    },
    finished:function(list){
        return list.filter(function(item){
            return item.isChecked;
        })
    },
    unfinished:function(list){
        return list.filter(function(item){
            return !item.isChecked;
        })
    }
};

//作业2
Vue.component('my-select',{
    data:function(){
        return {
            isShowSelect:false,
            val:""
        }
    },
    props:['list']
    ,
    methods:{
        changeShow:function(){
            this.isShowSelect=!this.isShowSelect;
        },
        selectValue:function(value){
            this.val=value;
            this.isShowSelect=false;
        }
    },
    template:`<div>
                <input type="text" placeholder="点击下拉" v-model="val" v-on:click="changeShow()" class="form-control w200" />
                <div  v-if="isShowSelect">
                    <ul-select v-on:selectVal="selectValue" v-bind:list="list"></ul-select>
                </div>

            </div>`
});

Vue.component('ul-select',{
    props:['list'],
    methods:{
        selectChange:function(value){
            this.$emit('selectVal',value);
        }
    },
    template:`<ul class="select">
                    <li v-for="item in list" v-on:click="selectChange(item)" class="select-item">{{item}}</li>
                </ul>`
});

var cityList=["北京","上海","广州","深圳"];

var vm = new Vue({
    el:".main",
    data:{
        list:list,
        todo:"",
        editortodos:"",
        beforeContent:"",
        visibility:"all",  //all finished unfinished
        cityList:cityList
    },
    watch:{
        /*list:function(){
            store.save("todolist",this.list);
        }*/
        list:{
            handler:function(){
                store.save("todolist",this.list);
            },
            deep:true
        }
    },
    methods:{
        addTodo(event){
            this.list.push({
                content:this.todo,
                isChecked:false
            });
            this.todo = "";
        },
        removeTodo(todo){
            var index = this.list.indexOf(todo);
            this.list.splice(index,1);
        },
        editorTodo(todo){
            this.beforeContent = todo.content;
            this.editortodos = todo;
        },
        editorTodoend(todo){
            this.editortodos = "";
        },
        cancelTodo(todo){
            todo.content = this.beforeContent;
            this.editortodos = "";
        }
    },
    directives:{
        "foucs":{
            update(el,binding){
                if (binding.value) {
                    el.focus();
                }
            }
        }
    },
    computed:{
        noCheckLength:function(){
            return this.list.filter(function(item){
                return !item.isChecked
            }).length;
        },
        filterList:function(){
            return filter[this.visibility]?filter[this.visibility](list):list;
        }
    }
});

function watchHashChange(){
    var hash = window.location.hash.slice(1);
    vm.visibility = hash;
}

watchHashChange();

window.addEventListener("hashchange",watchHashChange);

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>宁土文vue任务计划</title>
    <link rel="stylesheet" type="text/css" href="index.css" />      
    <link rel="stylesheet" type="text/css" href="./lib/bootstrap/3.3.0/css/bootstrap.css"/>
</head>
<body >
   <div class="main container">
       <div class="row">
        <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#all">宁土文任务计划列表</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#all">所有任务</a></li>
                <li ><a href="#unfinished">未完成任务</a></li>
                <li><a href="#finished">已完成任务</a></li>

            </ul>
        </div>
        </div>
    </nav>
</div>
    <div class="row">
            <p><strong>作业2:下拉选择</strong></p>
    </div>
    <div class="row"> 
        <div class="col-xs-12 col-md-6">
            <my-select v-bind:list="cityList"></my-select>
        </div>
    </div>
    <div class="row">
            <p><strong>作业1:任务列表</strong></p>
        </div>
    <div class="row">
            <span>添加任务：</span>
    </div>
    <div class="row">
        <input @keyup.enter="addTodo"
                           v-model="todo" placeholder="提示：按回车添加" class="form-control"  />
    </div>

    <br/>
    <br />
    <div class="row mt50">
        <span>任务列表：</span>
        <span v-show="list.length"> {{noCheckLength}}个未完成任务</span>
     </div>

     <div class="row">
         <table class="table table-bordered">
            <thead>
                <tr>                    
                  <th class="text-center" width="15%">完成</th>
                  <th width="70%">任务</th>
                  <th class="text-center" width="15%">删除</th>
                </tr>
              </thead>
              <tbody>
                <tr :class="{ completed:item.isChecked,editing:item === editortodos}" v-for="item in filterList">
                  <td class="text-center">
                    <input type="checkbox" name="" v-model="item.isChecked">
                  </td>
                  <td>
                        <label v-if="editortodos !== item" v-on:dblclick="editorTodo(item)">{{ item.content }}</label>
                        <input v-if="editortodos === item" 
                                type="text" 
                                class="form-control"
                                name="" 
                                v-model="item.content" 
                                v-foucs="editortodos === item"
                                @blur="editorTodoend(item)"
                                @keyup.enter = "editorTodoend(item)"
                                @keyup.esc = "cancelTodo(item)"
                            />
                  </td>
                  <td class="text-center">
                        <button class="btn btn-primary" @click="removeTodo(item)">删除</button>
                  </td>
                </tr>
                <tr v-if="!list.length">
                    <td colspan="3">
                        <span v-show="!list.length">还未添加任何任务</span>
                    </td>
                </tr>
              </tbody>
         </table>
    </div>
</div>
    <script type="text/javascript" src="./lib/jquery/1.11/jquery.js"></script>
    <script type="text/javascript" src="./lib/bootstrap/3.3.0/js/bootstrap.js"></script>
    <script type="text/javascript" src="./lib/vue/2.2.6/vue.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>