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 ...
随机推荐
- html引用外部js和css
html引用外部js和css css:<link rel="stylesheet" type="text/css" href="xx.css&q ...
- Response.Redirect()和Response.RedirectPermanent()区别
备注:这里我用到了Response.RedirectPermanent()用于做301跳转, 如:我希望访问网站的url访问地址为:http://m.shop/abc.html ,用户输入的访问地址: ...
- [转]Angular4 数据请求 POST、GET
本文转自:https://blog.csdn.net/dailuwen/article/details/79375980 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...
- 动态编程（Dynamic Programming）
本文素材来自视频,请自备梯子观看:What Is Dynamic Programming and How To Use It Dynamic Programming:动态编程分为如下几步: 将复杂问题 ...
- JavaScript机器学习之KNN算法
译者按: 机器学习原来很简单啊,不妨动手试试! 原文: Machine Learning with JavaScript : Part 2 译者: Fundebug 为了保证可读性,本文采用意译而非直 ...
- js 面向对象 ES5 AND ES6
1. ES5实现 父类: // 职员类 function Employees(id,name,salary) { // 属性 this.id = id; this.name = name; this. ...
- jsp引入本地图片
jsp引入本地图片 通用解决方法: 在tomcat的server.xml配置文件中,在<host></host>标签中间添上一句 <!-- docBase : 磁盘绝对路 ...
- K8s helm 创建自定义Chart
# 删除之前创建的 chart helm list helm delete --purge redis1 # 创建自定义 chart myapp cd ~/helm helm create myapp ...
- K8S flannel
kubernetes网络通信方式有: 容器间的通信 : pod内的容器通信 通过(lo)设备 Pod之间的通信 :pod IP <-----> pod IP ,K8S 要求所有的 pod ...
- 2016年 CodePen 最热门的前端代码 Top 100
每年 Codepen 都会公布年度最热门的代码片段,这些片段有的技术超弦,有的超实用.有的超有创意,有空看看都能给我们带来灵感. 同时从 Codepen 的代码上也能学习一些牛人的写法,不管是设[…… ...