voinc+vue实现级联选择
需求： vonic中实现级联选择
<!DOCTYPE html>
<html>
<head>
<title>下拉框</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.css">
<style>
.areaCom .tab-item{float:left; width:33%!important; flex:none;}
.areaCom .page-content{ padding-top:92px!important;}
</style>
</head>
<body> <von-app></von-app> <script type="text/x-template" id="index">
<div class="ss" v-nav="{ title: '首页' }">
<div class="list list-borderless hl-list list-ios von-cascade areaCom">
<label class="item item-ios item-icon-right" v-on:click="areaSel" style="margin-top: 80px;">
<span>下拉选择</span> <i class="icon ion-ios-arrow-right"></i>
<span class="item-note">{{area}}{{street}}{{community}}</span>
<div class="hairline-bottom"></div>
</label>
</div>
<div class="areaCom von-cascade-panel active" v-if="areaShow" style="height:300px">
<div class="title">选择</div>
<div class="page has-navbar">
<div class="tabs-striped tabs-top tabs-background-light tabs-color-positive">
<div class="tabs">
<a class="tab-item" v-bind:class="{'active':tabShow==1}" v-on:click="areaLi(1)">{{area}}</a>
<a class="tab-item" v-bind:class="{'active':tabShow==2}" v-on:click="areaLi(2)" v-if="streetList.length>0">{{street}}</a>
<a class="tab-item" v-bind:class="{'active':tabShow==3}" v-on:click="areaLi(3)" v-if="communityList.length>0">{{community}}</a>
</div>
</div>
<div class="page-content" v-if="tabShow==1">
<div class="list list-borderless options">
<div class="item" v-for="(item,index) in areaList" v-on:click="reStreet(item)">
<div class="hairline-top"></div>
<span>{{item}}</span>
<div class="hairline-bottom" v-if="index!=areaList.length-1"></div>
</div>
</div>
</div>
<div class="page-content" v-if="tabShow==2">
<div class="list list-borderless options">
<div class="item" v-for="(item,index) in streetList" v-on:click="reCommunity(item)">
<div class="hairline-top"></div>
<span>{{item}}</span>
<div class="hairline-bottom" v-if="index!=streetList.length-1"></div>
</div>
</div>
</div>
<div class="page-content" v-if="tabShow==3">
<div class="list list-borderless options">
<div class="item" v-for="(item,index) in communityList" v-on:click="areaComp(item)">
<div class="hairline-top"></div>
<span>{{item}}</span>
<div class="hairline-bottom" v-if="index!=communityList.length-1"></div>
</div>
</div>
</div>
</div>
</div>
<div von-backdrop="" class="backdrop visible active" v-if="areaShow" v-on:click="areaSelClose"></div>
</div>
</script> <script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<script src="plugins/vue/vue-resource.min.js"></script>
<script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/vuex@2.2.1/dist/vuex.min.js"></script>
<script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script> <script>引入下面的js</script> </body> </html>
js
var areaData = {
areaShow:false,//是否显示区选择div
tabShow:1,//显示区, 街, 社区
area: "请选择",//区名
street:"",//街名
community:"",//社区名
areaList:["一区","二区"],//查询出来的区列表
streetList:[],//查询出来的街列表
communityList:[],//查询出来的社区列表
};
var index = {
template: '#index',
data: function(){
return areaData;
},
created: function () {
},
methods: {
areaSel: function () {//点击 下拉选择 初试弹出区选择
var self = this;
self.areaShow=true;
self.tabShow=1;
},
areaSelClose: function () {//点击弹出框以外, 关闭弹出框
var self = this;
if(self.street=="请选择"){
alert("请选择街");
self.areaShow=false;
self.area="请选择";
self.street="";
}else if(self.community=="请选择"){
alert("请选择社区");
self.streetList=[];
self.areaShow=false;
self.area="请选择";
self.street="";
self.community="";
}else{
self.areaShow=false;
}
},
areaLi: function (n) {//选择后,还没退出, 需要修改相应的位置,点击后弹出相应的列表
var self = this;
self.tabShow=n;
},
reStreet: function (name) {//查询街列表
var self = this;
/*Vue.resource("接口地址"+name).get().then(function (response) {
var data = response.data.data;
self.streetList= data;
});*/
self.streetList= ["一街","二街"];
self.area=name;//将传过来的区名赋值给属性,并显示
self.street="请选择";
self.community="";
self.tabShow=2;
},
reCommunity: function (name) {//查询社区列表
var self = this;
/*Vue.resource("接口地址"+name).get().then(function (response) {
var data = response.data.data;
self.communityList= data;
});*/
self.communityList= ["一社区","二社区"];
self.street=name;//将传过来的社区名赋值给属性,并显示
self.community="请选择";
self.tabShow=3;
},
areaComp: function (name) {//用来赋值最后的社区属性,并显示
var self = this;
self.community=name;
self.areaSelClose();
},
}
}
var routes = [
{ path: '/', component: index }
]
Vue.use(Vonic.app, {
routes: routes
})
voinc+vue实现级联选择的更多相关文章
- React 还是 Vue: 你应该选择哪一个Web前端框架？
学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue 如果你喜欢简单和“能用就行”的东西 ...
- XML：使用DOM技术解析xML文件中的城市，实现select级联选择
中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...
- ExtJs4中的复选树级联选择
好久没有写新的博文了,过了个年休息了近一个月,人都懒散了.. 这几天要把项目中的几个模块有ext3升级到ext4,还要保持页面展示和功能要跟3.x版本的一样.升级并不是一件简单的是,基本相当于重写了, ...
- extjs tree check 级联选择
extjs4 tree check 级联选择 实现效果: 关键代码: function changeAllNode(node, isCheck) { allChild(node, isCheck); ...
- Ajax级联选择框
Ajax级联选择框 级联选择框常用与比较负责的网页开发,例如实现的商品添加页面中,需要选择商品的分类,而分类信息又有层次,例如大分类和小分类就是两层级联,在用户选择商品所属大类时,所属小类的内容需要根 ...
- .NET快速信息化系统开发框架 V3.2 -> Web 用户管理模块编辑界面-组织机构选择支持级联选择
下拉框级联选择功能非常的实用,框架用户管理编辑界面对组织机构的选择在3.2版本中新增了级联选择的支持,让组织机构的选择更加的方便与高效,也不容易出错. 我们框架的组织机构结合实际分成了5种类型,分别为 ...
- 利用InfoPath实现SharePoint Server 2013列表的级联选择（Cascading Drop Down List）
最近在利用SharePoint Server 2013的列表组织和存储数据,发现SharePoint列表原始不支持级联选择的功能. 谷歌百度一通以后,发现了很多通过代码实现的方案,利用第三方的插件sp ...
- js省市区级联选择联动
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...
- angular 级联选择
HTML: <link rel="stylesheet" href="views/tree/checkbox.css"/> <div clas ...
随机推荐
- 第一册：lesson sixty seven。
原文: The weekend. A:Hello , were you an tht butcher's? B:Yes I was. A:Were you at the butcher's too? ...
- c# 画布验证码
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- C#实现给图片加边框的方法
Bitmap bit= new Bitmap(@"" + Path);//给图片加边框 //Bitmap bit = new Bitmap(Screen.AllScreens[0] ...
- mysql各种操作记录
MySQL设置数据集为UTF8仍无法输入中文的解决办法: mysql -uroot -p --default-character-set=gbk 可用命令status 和 show variables ...
- 【JDK和Open JDK】平常使用的JDK和Open JDK有什么区别
注意到这个问题,是在CentOS7上安装JDK的时候,查找相关的资料,发现安装JDK之前都需要检查或卸载系统上原生的Open JDK,这才引起了注意. 到了这里,引用查到的一篇说明. 转自:http: ...
- Hibernate入门(五)---------事务管理
在Hibernate中,可以通过代码来操作管理事务,如通过“Transaction tx = session.beginTransaction()”,开启一个事务,持久化操作后,通过"tx. ...
- EF实现增删改查
从来没想到过能在这个上面翻车,感慨自学没有培训来得系统啊,废话不多说 ORM:对象关系映射(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一 ...
- laravel使用Schema创建数据表
1.简介 迁移就像数据库的版本控制,允许团队简单轻松的编辑并共享应用的数据库表结构,迁移通常和Laravel的schema构建器结对从而可以很容易地构建应用的数据库表结构.如果你曾经告知小组成员需要手 ...
- angularJs - cynthia娆墨旧染－响应式文章发布系统
(0)功能 a.添加新文章 b.修改已发布文章 c.搜索已经发布的文章 d.demo链接: http://cynthiawupore.github.io/angularJS (1)界面 a.文章列 ...
- 中文汉字和常见英文数字等的unicode编码范围