iosselect简单使用(三级联动)

npm安装

npm install iosselect --save

index.html引入文件

<link rel="stylesheet" href="static/iosSelect.css"> <script type="text/javascript" src="static/iosSelect.js"></script> <template><div class="menu-container" ref="menuContainer"><div class="referen-btn">保存</div><!-- 这个是内容 --><div class="contents"><div class="userdatum-info"><label for="">店铺名称</label><input type="text" placeholder="请填写店铺名称"></div><div class="userdatum-info userdatum-info-next" @click.stop="changeMastDisplay('mastuserdatum')"><label for="">所属行业</label><input type="text" placeholder="请填写所属行业"></div><div class="userdatum-info" @click="initIosSelect"><label for="">所属区域</label><!-- <input type="text" placeholder="请填写所属区域"> --><!-- 三级联动 --><input type="hidden" ref="contact_province_code" name="contact_province_code" data-id="0001" id="contact_province_code" value="" data-province-name=""> <input type="hidden" ref="contact_city_code" name="contact_city_code" id="contact_city_code" value="" data-city-name=""><span ref="show_contact" data-city-code="52" data-province-code="2" data-district-code="50" id="show_contact">北京 北京 东城区</span> </div><div class="userdatum-info"><label for="">详细地址</label><input type="text" placeholder="请填写详细地址"></div><div class="userdatum-info"><label for="">联系人</label><input type="text" placeholder="请填写联系人"></div><div class="userdatum-info"><label for="">手机</label><input type="text" placeholder="请填写手机"></div><div class="userdatum-info"><label for="">邮箱</label><input type="text" placeholder="请填写邮箱"></div></div></div> </template><script> export default {name: 'UserDatum',data () {return {iosProvinces:[],iosCitys:[],iosCountys:[]}},methods: {topath: function (name) {this.$router.push({path:name});},changeMastDisplay: function (name) {this.$store.commit('mastdisplay',name);},initIosSelect: function () {let showContactDom = this.$refs.show_contact;let contactProvinceCodeDom = this.$refs.contact_province_code;let contactCityCodeDom = this.$refs.contact_city_code;let sccode = showContactDom.getAttribute('data-city-code');let scname = showContactDom.getAttribute('data-city-name');let oneLevelId = showContactDom.getAttribute('data-province-code');let twoLevelId = showContactDom.getAttribute('data-city-code');let threeLevelId = showContactDom.getAttribute('data-district-code');let iosSelect = new IosSelect(3, [this.iosProvinces, this.iosCitys, this.iosCountys],{itemHeight: 35,itemShowCount: 5,relation: [1, 1],oneLevelId: oneLevelId,twoLevelId: twoLevelId,threeLevelId: threeLevelId,callback: function (selectOneObj, selectTwoObj, selectThreeObj) {contactProvinceCodeDom.value = selectOneObj.id;contactProvinceCodeDom.setAttribute('data-province-name', selectOneObj.value);contactCityCodeDom.value = selectTwoObj.id;contactCityCodeDom.setAttribute('data-city-name', selectTwoObj.value);showContactDom.setAttribute('data-province-code', selectOneObj.id);showContactDom.setAttribute('data-city-code', selectTwoObj.id);showContactDom.setAttribute('data-district-code', selectThreeObj.id);showContactDom.innerHTML = selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value;}});},getareadata: function () {this.API.getareadata().then((response) => {response.filter((item,index) => {//拼接三级联动数据let area = {parentId:item.region_type,id:item.region_id,value:item.region_name,...item};//过滤省市区的数据if(item.parent_id == 1){this.iosProvinces.push(area);}else if(item.parent_id == 2){this.iosCitys.push(area);}else if(item.parent_id == 3){this.iosCountys.push(area);}});}, (response) => {mui.toast('网络错误');});}},components: {},computed: {},created: function () {this.getareadata();}} </script> <style scoped>*{margin: 0;padding: 0;font-size: 14px;font-family: "微软雅黑";color: #333;}.menu-container{/*overflow: hidden;*/background: #eee;}.contents{margin-top: 44px;position: relative;padding: 0;/*overflow: scroll;*/}.userdatum-info{height: 44px;line-height: 44px;padding: 0px 10px;background: #fff;border-bottom: 1px solid #e7e7e7;position: relative;}.userdatum-info label, .userdatum-info input{float: left;margin: 0;padding: 0;}.userdatum-info:after{content: "";display: block;width: 0;height: 0;visibility: hidden;clear: both;}.userdatum-info label{width: 20%;}.userdatum-info input{width: 80%;border: none;height: 43px;line-height: 44px;text-align: right;}.userdatum-info-next input{padding-right: 15px;background: url("../../../../assets/right-arrow.png") no-repeat right center;}.userdatum-info #show_contact{position: absolute;right: 10px;top: 0px;height: 44px;line-height: 44px;width: 80%;text-align: right;color: #666;}.referen-btn{position: absolute;top: 0;right: 0;width: 44px;height: 44px;text-align: center;color: #fff;font-size: 14px;z-index: 10001;line-height: 44px;} </style>

总结

以上是生活随笔为你收集整理的iosselect简单使用(三级联动)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。