您的位置：首页 > 产品设计 > UI/UE

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

2017-04-22 11:57 645 查看

【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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航