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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/517230.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里巴巴叔同谈云原生和云计算

本文系『CSDN云计算』对阿里云云原生应用平台负责人叔同的专访&#xff0c;阿里巴巴中间件受权转载。通过本文&#xff0c;您将了解到云计算时代容器技术的发展路径&#xff0c;阿里云在容器领域的产品矩阵、技术迭代以及未来趋势等方面&#xff0c;以及阿里云的容器技术演进历…

谷歌排名第一的编程语言,收下这份资料,小白也能学的会!

学习 Python 的过程中你是否有过这样的问题&#xff1a; 应用方向太多了&#xff0c;不知道该选择哪个&#xff0c;也不知道学习路径是什么。 入门简单&#xff0c;但是精通很难&#xff0c;每次学完做练习项目时都头疼&#xff0c;没思路&#xff0c;甚至怀疑自己不适合编程。…

SpringBoot2 集成xJar插件 动态解密jar包,避免源码泄露或反编译

文章目录一、集成1. 官方介绍地址2. 添加仓库和插件3. 编译打包二、安装go环境和编译2.1. 安装go2.2. 编译三、运行3.1. 正常运行3.2. 二次加密运行3.3. 测试结果四、IntelliJ IDE 反编译测试4.1. 将加密的jar进行解压4.2. 打开解压后的文件夹4.3. class文件查看4.4. 配置文件反…

通过网络地址进行真机调试

开发调试&#xff1a; 1.修改webpack创建的本地的服务器地址为开发的网络地址或者是全网段0.0.0.0 2.调试的时候直接使用配置的地址去访问当前的服务器 3.调式的时候可以直接在手机上查看&#xff0c;如果需要看log&#xff0c;打开chrome进行调试 4.检测到手机后webview调试可…

每秒7亿次请求,阿里新一代数据库如何支撑?

阿里妹导读&#xff1a;Lindorm&#xff0c;就是云操作系统飞天中面向大数据存储处理的重要组成部分。Lindorm是基于HBase研发的、面向大数据领域的分布式NoSQL数据库&#xff0c;集大规模、高吞吐、快速灵活、实时混合能力于一身&#xff0c;面向海量数据场景提供世界领先的高…

拼不过 GO?阿里如何重塑云上的 Java

阿里妹导读&#xff1a;Java 诞生于20年前&#xff0c;拥有大量优秀的企业级框架&#xff0c;践行 OOP 理念&#xff0c;更多体现的是严谨以及在长时间运行条件下的稳定性和高性能。反观如今&#xff0c;在要求快速迭代交付的云场景下&#xff0c;语言的简单性似乎成了首要的要…

centos7 修改默认yum源为国内的阿里云

# 安装wget yum -y install wget# 备份当前的yum源 mv /etc/yum.repos.d /etc/yum.repos.d.backup4comex# echo 新建空的yum源设置目录 mkdir /etc/yum.repos.d# echo 下载阿里云的yum源配置 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Cento…

腾讯云数据库 MySQL 8.0 正式上线,性能全面超越官方版本

7月8日&#xff0c;拥有60全新特性&#xff0c;性能全面超越官方版本的腾讯云MySQL 8.0正式发布。在全新引擎的驱动下&#xff0c;在MySQL官方版本大幅度提升性能的基础上&#xff0c;腾讯云MySQL8.0数据库通过优化锁系统&#xff0c;事务系统等模块&#xff0c;进一步提升性能…

android studio打包纯H5项目(集成5+SDK)

下载地址 http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/103 我们下载5SDK直接复制demo出来 可以自行修改名字&#xff0c;上面两个dome都可以使用 使用Android Studio打开后 默认目录结构如下 替换HTML文件 找到目录下app/src/main/assets/apps/HelloH5/www…

Apache Flink CEP 实战

本文根据Apache Flink 实战&进阶篇系列直播课程整理而成&#xff0c;由哈啰出行大数据实时平台资深开发刘博分享。通过一些简单的实际例子&#xff0c;从概念原理&#xff0c;到如何使用&#xff0c;再到功能的扩展&#xff0c;希望能够给打算使用或者已经使用的同学一些帮…

docker 加速镜像 阿里云镜像

https://blog.csdn.net/weixin_40816738/article/details/113825637

图神经网络(AliGraph)在阿里巴巴的发展与应用

背景 为什么做GNN? 在大数据的背景下&#xff0c;利用高速计算机去发现数据中的规律似乎是最有效的手段。为了让机器计算的有目的性&#xff0c;需要将人的知识作为输入。我们先后经历了专家系统、经典机器学习、深度学习三个阶段&#xff0c;输入的知识由具体到抽象&#xf…

实用!五款新型 Linux 命令行工具

作者 | Ricardo Gerardi译者 | 弯月&#xff0c;责编 | 屠敏出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;在Linux/Unix系统的日常使用中&#xff0c;我们需要使用很多命令行工具来完成工作&#xff0c;以及理解和管理我们的系统&#xff0c;例如使用du来监视磁盘…

regedit或child_process添加注册表

使用regedit包添加注册表&#xff0c;regedit是对node的子进程模块进行了封装&#xff0c;使得我们不用去写shell脚本或者window命令之类的 安装 npm install --save regedit使用&#xff0c;注意这里我是把作者的vbs目录拷贝到我的项目里了&#xff0c;要不然无法使用&#…

从零开始入门 K8s | 手把手带你理解 etcd

导读&#xff1a;etcd 是用于共享配置和服务发现的分布式、一致性的 KV 存储系统。本文从 etcd 项目发展所经历的几个重要时刻开始&#xff0c;为大家介绍了 etcd 的总体架构及其设计中的基本原理。希望能够帮助大家更好的理解和使用 etcd。 一、etcd 项目的发展历程 etcd 诞生…

minio 单机安装、部署 centos7环境

文章目录一、默认模式下载运行1. 下载2. 访问minio控制台3. 创建目录3. 上传文件二、企业自定义模式2.1. 指定用户密码2.2. 配置目录2.3. 控制台端口2.4. 启动2.5. minio控制台登录2.6. 效果图一、默认模式下载运行 1. 下载 官网地址&#xff1a;https://docs.min.io/docs/ …

Kubernetes 日志查询分析实践

准备工作 为了完成后续的相关操作&#xff0c;我们需要准备一个 K8s 集群&#xff0c;操作步骤如下&#xff1a; 登陆容器服务控制台。创建一个标准托管集群&#xff08;杭州区域&#xff09;&#xff0c;在向导中勾选上【使用 EIP 暴露 API Server】 和【使用日志服务】。集…

“编程能力差,90%是输在这点上!”谷歌AI开发专家:逆袭并没那么难!

Google 人工智能开发者专家彭靖田老师说——超90%的程序员在初学Python 人工智能时&#xff0c;都会遇到下面3个问题&#xff1a;1.想入门人工智能&#xff0c;但不知从何学起&#xff0c;也不知道该选择什么方向...2.Python语法、机器学习/深度学习框架、算法都能看懂&#xf…

移动端调起数字键盘的问题

在做移动端调起数字键盘的时候&#xff0c;碰到了不少的问题&#xff0c;在网上找到了方案&#xff0c;但是却不符合我的要求的&#xff0c;现在总结下: 1.使用input type为number的类型&#xff0c;这种确实可以调起数字键盘&#xff0c;但是存在以下问题&#xff0c;会忽略掉…

这群程序员疯了!他们想成为IT界最会带货的男人

随着网红主播越来越火&#xff0c;通过直播带货种草的形式也成了今年双12的热点。 不过&#xff0c;网红主播带货早已见怪不怪&#xff0c;但你们见过程序员直播带货吗!? 近日&#xff0c;趁着阿里云双12年末采购节&#xff0c;阿里云邀请了一波程序员GG来为大家直播带货&am…