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 ...
随机推荐
- Oracle 如何开启归档模式
Oracle开启归档 场景:某所的数据库没有开启归档,如何开启归档模式的文档. 1.查看oracle归档状态 SQL> archive log list; 数据库日志模式 非存档模式 //目前不 ...
- linux学习基础1
简介 包含计算机组成,发行.核心思想.主要目录,一些命令ifconfig.echo.tty.startx.export.pwd.history.shutdown.poweroff.reboot.hwc ...
- flex属性
一.flex属性的归纳 flex-direction flex-wrap flex-flow justify-content align-items align-content 1.1 flex-di ...
- asp.net core 依赖注入几种常见情况
先读一篇注入入门 全面理解 ASP.NET Core 依赖注入, 学习一下基本使用 然后学习一招, 不使用接口规范, 直接写功能类, 一般情况下可以用来做单例. 参考https://www.cnblo ...
- Docker虚拟机理论
Docker虚拟机架构 ◆ Docker架构 Docker创建的所有虚拟实例共用同一个Linux内核,对硬件占用较小,属于轻量级虚拟机 Docker镜像与容 ...
- 创作型---原型模式(C# ICloneable接口的实现)
在软件系统中,当创建一个类的实例的过程很昂贵或很复杂,并且我们需要创建多个这样类的实例时,可以通过对原来对象拷贝一份来完成创建,这样在内存中不需要创建多个相同的类实例,从而减少内存的消耗和达到类实例的 ...
- ___简单的MVC单个图片上传预览
js: $("#btnImg").click(function () { $("#form0").ajaxSubmit({ url: "/Studen ...
- VS2013 OpenGL 开发程序时: error LNK2019: 无法解析的外部符号 __imp____glutInitWithExit@12,error LNK2019: 无法解析的外部符号 __imp____glutCreateWindowWithExit@8
环境:Windows 下 OpenGL ,Used in VS2013 前言:刚接触 OpenGL 的人,第一件事当然就是配置环境,说起配置环境 OpenGL 和 DirectX 相差不多,同时也基本 ...
- node起步
首先,在项目目录下创建一个叫 app.js 的文件,并写如以下代码: app.js const http = require('http'); const hostname = '127.0.0.1' ...
- 2018-06-21 中文代码示例视频演示Python入门教程第五章 数据结构
知乎原链 续前作: 中文代码示例视频演示Python入门教程第四章 控制流 对应在线文档: 5. Data Structures 这一章起初还是采取了尽量与原例程相近的汉化方式, 但有些语义较偏(如T ...