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 ...
随机推荐
- Linux文件权限与属性详解 之 su & sudo
Linux文件权限与属性详解 之 一般权限 Linux文件权限与属性详解 之 ACL Linux文件权限与属性详解 之 SUID.SGID & SBIT Linux文件权限与属性详解 之 ch ...
- [转]MySQL 表锁和行锁机制
本文转自:http://www.cnblogs.com/itdragon/p/8194622.html MySQL 表锁和行锁机制 行锁变表锁,是福还是坑?如果你不清楚MySQL加锁的原理,你会被它整 ...
- 第一册：lesson ninety-three。
原文: our new neighbor. Nigel is our new next-door neighbor. He is a pilot. He was in the R.A.F. He w ...
- js实现带上传进度的文件上传
//获取文件筐的文件集合 var files = document.getElementById("file1").files; //创建FormData对象 相当于参数集合 存储 ...
- python之strip()小记
描述 Python strip() 方法用于移除字符串头尾指定的字符(默认为空格或换行符)或字符序列. 注意:该方法只能删除开头或是结尾的字符,不能删除中间部分的字符. 语法 strip()方法语法: ...
- PHP7.27: pdf
http://www.fpdf.org/ https://github.com/Setasign/FPDF https://www.ntaso.com/fpdf-and-chinese-charact ...
- 小tips：JS中this操作执行像(object.getName = object.getName)()操作改变了this
var name = "The window"; var object = { name: "My Object", getName: function(){ ...
- iPhone X手机投屏电脑无线连接教程
iPhone X手机是一款非常有气场的手机,独特的设计,展现手机的独特魅力,手机外观让人一眼就爱上,手感也是超级的舒适,真的是堪称完美,但是iPhone X手机投屏电脑怎么无线连接呢? 使用工具: 电 ...
- Mysql 用户和权限
创建用户 CREATE USER '用户名'@'localhost' IDENTIFIED BY '密码'; 删除用户 DROP USER '用户名'@'localhost'; 权限列表 ALL 或 ...
- 20.Odoo产品分析 (三) – 人力资源板块(1) – 员工目录(1)
查看Odoo产品分析系列--目录 人力资源指在一个国家或地区中,处于劳动年龄.未到劳动年龄和超过劳动年龄但具有劳动能力的人口之和.狭义讲就是企事业单位独立的经营团体所需人员具备的能力(资源).(解释来 ...