voinc vue实现级联选择
生活随笔
收集整理的這篇文章主要介紹了
voinc vue实现级联选择
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
需求： vonic中實現(xiàn)級聯(lián)選擇
<!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,//是否顯示區(qū)選擇divtabShow:1,//顯示區(qū), 街, 社區(qū) area: "請選擇",//區(qū)名street:"",//街名community:"",//社區(qū)名areaList:["一區(qū)","二區(qū)"],//查詢出來的區(qū)列表streetList:[],//查詢出來的街列表communityList:[],//查詢出來的社區(qū)列表 };var index = {template: '#index',data: function(){return areaData;},created: function () {},methods: {areaSel: function () {//點擊 下拉選擇 初試彈出區(qū)選擇var self = this;self.areaShow=true;self.tabShow=1;},areaSelClose: function () {//點擊彈出框以外, 關(guān)閉彈出框var self = this;if(self.street=="請選擇"){alert("請選擇街");self.areaShow=false;self.area="請選擇";self.street="";}else if(self.community=="請選擇"){alert("請選擇社區(qū)");self.streetList=[];self.areaShow=false;self.area="請選擇";self.street="";self.community="";}else{self.areaShow=false;}},areaLi: function (n) {//選擇后,還沒退出, 需要修改相應(yīng)的位置,點擊后彈出相應(yīng)的列表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;//將傳過來的區(qū)名賦值給屬性,并顯示self.street="請選擇";self.community="";self.tabShow=2;},reCommunity: function (name) {//查詢社區(qū)列表var self = this;/*Vue.resource("接口地址" name).get().then(function (response) {var data = response.data.data;self.communityList= data;});*/self.communityList= ["一社區(qū)","二社區(qū)"];self.street=name;//將傳過來的社區(qū)名賦值給屬性,并顯示self.community="請選擇";self.tabShow=3;},areaComp: function (name) {//用來賦值最后的社區(qū)屬性,并顯示var self = this;self.community=name;self.areaSelClose();},}}var routes = [{ path: '/', component: index }]Vue.use(Vonic.app, {routes: routes})?
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的voinc vue实现级联选择的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js 编辑数组
- 下一篇： webpack编译时No PostCSS