需求： vonic中实现级联选择

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>下拉框</title>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <link rel="stylesheet" href="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.css">
  8.     <style>
  9.         .areaCom .tab-item{float:left; width:33%!important; flex:none;}
  10.         .areaCom .page-content{ padding-top:92px!important;}
  11.     </style>
  12. </head>
  13. <body>
  14.  
  15. <von-app></von-app>
  16.  
  17. <script type="text/x-template" id="index">
  18.     <div class="ss" v-nav="{ title: '首页' }">
  19.         <div class="list list-borderless hl-list list-ios von-cascade areaCom">
  20.             <label class="item item-ios item-icon-right" v-on:click="areaSel" style="margin-top: 80px;">
  21.                 <span>下拉选择</span> <i class="icon ion-ios-arrow-right"></i>
  22.                 <span class="item-note">{{area}}{{street}}{{community}}</span>
  23.                 <div class="hairline-bottom"></div>
  24.             </label>
  25.         </div>
  26.         <div class="areaCom von-cascade-panel active" v-if="areaShow" style="height:300px">
  27.             <div class="title">选择</div>
  28.             <div class="page has-navbar">
  29.                 <div class="tabs-striped tabs-top tabs-background-light tabs-color-positive">
  30.                     <div class="tabs">
  31.                         <a class="tab-item" v-bind:class="{'active':tabShow==1}" v-on:click="areaLi(1)">{{area}}</a>
  32.                         <a class="tab-item" v-bind:class="{'active':tabShow==2}" v-on:click="areaLi(2)" v-if="streetList.length>0">{{street}}</a>
  33.                         <a class="tab-item" v-bind:class="{'active':tabShow==3}" v-on:click="areaLi(3)" v-if="communityList.length>0">{{community}}</a>
  34.                     </div>
  35.                 </div>
  36.                 <div class="page-content" v-if="tabShow==1">
  37.                     <div class="list list-borderless options">
  38.                         <div class="item" v-for="(item,index) in areaList" v-on:click="reStreet(item)">
  39.                             <div class="hairline-top"></div>
  40.                             <span>{{item}}</span>
  41.                             <div class="hairline-bottom" v-if="index!=areaList.length-1"></div>
  42.                         </div>
  43.                     </div>
  44.                 </div>
  45.                 <div class="page-content" v-if="tabShow==2">
  46.                     <div class="list list-borderless options">
  47.                         <div class="item" v-for="(item,index) in streetList" v-on:click="reCommunity(item)">
  48.                             <div class="hairline-top"></div>
  49.                             <span>{{item}}</span>
  50.                             <div class="hairline-bottom" v-if="index!=streetList.length-1"></div>
  51.                         </div>
  52.                     </div>
  53.                 </div>
  54.                 <div class="page-content" v-if="tabShow==3">
  55.                     <div class="list list-borderless options">
  56.                         <div class="item" v-for="(item,index) in communityList" v-on:click="areaComp(item)">
  57.                             <div class="hairline-top"></div>
  58.                             <span>{{item}}</span>
  59.                             <div class="hairline-bottom" v-if="index!=communityList.length-1"></div>
  60.                         </div>
  61.                     </div>
  62.                 </div>
  63.             </div>
  64.         </div>
  65.         <div von-backdrop="" class="backdrop visible active" v-if="areaShow" v-on:click="areaSelClose"></div>
  66.     </div>
  67. </script>
  68.  
  69. <script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>
  70. <script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
  71. <script src="plugins/vue/vue-resource.min.js"></script>
  72. <script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js"></script>
  73. <script src="https://unpkg.com/vuex@2.2.1/dist/vuex.min.js"></script>
  74. <script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script>
  75.  
  76. <script>引入下面的js</script> 
  77.  
  78. </body> 
  79.  
  80. </html>

js

  1.     var areaData = {
  2.         areaShow:false,//是否显示区选择div
  3.         tabShow:1,//显示区, 街, 社区
  4.         area: "请选择",//区名
  5.         street:"",//街名
  6.         community:"",//社区名
  7.         areaList:["一区","二区"],//查询出来的区列表
  8.         streetList:[],//查询出来的街列表
  9.         communityList:[],//查询出来的社区列表
  10.     };
  11.     var index = {
  12.         template: '#index',
  13.         data: function(){
  14.             return areaData;
  15.         },
  16.         created: function () {
  17.  
  18.         },
  19.         methods: {
  20.             areaSel: function () {//点击  下拉选择  初试弹出区选择
  21.                 var self = this;
  22.                 self.areaShow=true;
  23.                 self.tabShow=1;
  24.             },
  25.             areaSelClose: function () {//点击弹出框以外, 关闭弹出框
  26.                 var self = this;
  27.  
  28.                 if(self.street=="请选择"){
  29.                     alert("请选择街");
  30.                     self.areaShow=false;
  31.                     self.area="请选择";
  32.                     self.street="";
  33.                 }else if(self.community=="请选择"){
  34.                     alert("请选择社区");
  35.                     self.streetList=[];
  36.                     self.areaShow=false;
  37.                     self.area="请选择";
  38.                     self.street="";
  39.                     self.community="";
  40.                 }else{
  41.                     self.areaShow=false;
  42.                 }
  43.             },
  44.  
  45.             areaLi: function (n) {//选择后,还没退出, 需要修改相应的位置,点击后弹出相应的列表
  46.                 var self = this;
  47.                 self.tabShow=n;
  48.             },
  49.             reStreet: function (name) {//查询街列表
  50.                 var self = this;
  51.                 /*Vue.resource("接口地址"+name).get().then(function (response) {
  52.                     var data = response.data.data;
  53.                     self.streetList= data;
  54.                 });*/
  55.                 self.streetList= ["一街","二街"];
  56.  
  57.                 self.area=name;//将传过来的区名赋值给属性,并显示
  58.                 self.street="请选择";
  59.                 self.community="";
  60.                 self.tabShow=2;
  61.             },
  62.             reCommunity: function (name) {//查询社区列表
  63.                 var self = this;
  64.                 /*Vue.resource("接口地址"+name).get().then(function (response) {
  65.                  var data = response.data.data;
  66.                  self.communityList= data;
  67.                  });*/
  68.                 self.communityList= ["一社区","二社区"];
  69.  
  70.                 self.street=name;//将传过来的社区名赋值给属性,并显示
  71.                 self.community="请选择";
  72.  
  73.                 self.tabShow=3;
  74.             },
  75.             areaComp: function (name) {//用来赋值最后的社区属性,并显示
  76.                 var self = this;
  77.                 self.community=name;
  78.                 self.areaSelClose();
  79.             },
  80.         }
  81.     }
  82.  
  83.     var routes = [
  84.         { path: '/', component: index }
  85.     ]
  86.  
  87.     Vue.use(Vonic.app, {
  88.         routes: routes
  89.     })

voinc+vue实现级联选择的更多相关文章

  1. React 还是 Vue: 你应该选择哪一个Web前端框架？

    学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西 ...

  2. XML：使用DOM技术解析xML文件中的城市，实现select级联选择

    中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...

  3. ExtJs4中的复选树级联选择

    好久没有写新的博文了,过了个年休息了近一个月,人都懒散了.. 这几天要把项目中的几个模块有ext3升级到ext4,还要保持页面展示和功能要跟3.x版本的一样.升级并不是一件简单的是,基本相当于重写了, ...

  4. extjs tree check 级联选择

    extjs4 tree check 级联选择 实现效果: 关键代码: function changeAllNode(node, isCheck) { allChild(node, isCheck); ...

  5. Ajax级联选择框

    Ajax级联选择框 级联选择框常用与比较负责的网页开发,例如实现的商品添加页面中,需要选择商品的分类,而分类信息又有层次,例如大分类和小分类就是两层级联,在用户选择商品所属大类时,所属小类的内容需要根 ...

  6. .NET快速信息化系统开发框架 V3.2 -> Web 用户管理模块编辑界面-组织机构选择支持级联选择

    下拉框级联选择功能非常的实用,框架用户管理编辑界面对组织机构的选择在3.2版本中新增了级联选择的支持,让组织机构的选择更加的方便与高效,也不容易出错. 我们框架的组织机构结合实际分成了5种类型,分别为 ...

  7. 利用InfoPath实现SharePoint Server 2013列表的级联选择（Cascading Drop Down List）

    最近在利用SharePoint Server 2013的列表组织和存储数据,发现SharePoint列表原始不支持级联选择的功能. 谷歌百度一通以后,发现了很多通过代码实现的方案,利用第三方的插件sp ...

  8. js省市区级联选择联动

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...

  9. angular 级联选择

    HTML: <link rel="stylesheet" href="views/tree/checkbox.css"/> <div clas ...

随机推荐

  1. Linux文件权限与属性详解 之 一般权限

    目录 一般属性 1. iNode: 3152621 2. 文件类型 3.文件访问权限 4. 链接数目: 5. 文件所有者 6. 文件所属组 7. 文件大小 8. 修改时间 9. 文件名称 Linux文 ...

  2. java 开发 websocket 网页端聊天室

    博客地址:https://ainyi.com/67 WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端. ...

  3. 机器学习笔记(5) KNN算法

    这篇其实应该作为机器学习的第一篇笔记的,但是在刚开始学习的时候,我还没有用博客记录笔记的打算.所以也就想到哪写到哪了. 你在网上搜索机器学习系列文章的话,大部分都是以KNN(k nearest nei ...

  4. lua的面向对象

    Lua中的table就是一种对象,但是如果直接使用仍然会存在大量的问题,见如下代码: Account = {balance = } function Account.withdraw(v) Accou ...

  5. [转]php模拟post提交请求，调用接口

    本文转自:https://www.cnblogs.com/jiqing9006/p/3949190.html /** * 模拟post进行url请求 * @param string $url * @p ...

  6. 好好耕耘 redis和memcached的区别

    观点一: 1.Redis和Memcache都是将数据存放在内存中,都是内存数据库.不过memcache还可用于缓存其他东西,例如图片.视频等等: 2.Redis不仅仅支持简单的k/v类型的数据,同时还 ...

  7. 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  8. 4.4 explain 之 possible_keys 、key、key_len

    一.possible_keys 显示可能应用在这张表中的索引,一个或多个. 查询涉及到的字段上若存在索引,则该索引将被列出,但不一定被查询实际使用. 二.key 实际使用的索引.如果为null,则没有 ...

  9. 【Mysql】常用命令

    登录mysql -uroot -p 查看有哪些数据库show databases; 创建一个普通用户 sa ,密码是 some_passCREATE USER 'sa'@'%' IDENTIFIED ...

  10. JavaScript是如何工作的：事件循环和异步编程的崛起 + 5种使用 async/await 更好地编码方式！

    摘要: 深度理解JS事件循环!!! 原文:JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式! 作者:前端小智 Fundebug经授权转载, ...