vue项目实现地址自动识别功能

news2024/10/5 4:35:01

1、安装第三方依赖

npm install address-parse

2、在需要使用的页面引入

import AddressParse from 'address-parse';

3、在页面上写入静态的html代码,可以输入地址,加上识别的输入框;

<div class="auto_address">
    <van-field class="auto_recognition" v-model="message" autosize type="textarea" placeholder="粘贴信息,自动拆分姓名、电话和地址" />
    <van-button color="#17BF6A" @click="parseAddress">
      识别
    </van-button>
</div>

4、点击识别按钮,触发地址解析的方法,把返回结果一对一赋值。

parseAddress() {
  /*判断解析的地址内容不为空*/
  if (this.message != '') {
    const result = AddressParse.parse(this.message);
    this.name = result[0].name;
    this.phone = result[0].mobile;
    this.area = `${result[0].province}-${result[0].city}-${result[0].area}`
    this.areaDetail = result[0].details;
  } else {
    this.$toast('请输入您要识别的地址')
  }
}

5、效果展示。

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

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

相关文章

数据结构 - 链表

线性表的链式存储结构 概念 将线性表 L (a0, a1, … , an-1)中各元素分布在存储器的不同存储块&#xff0c;成为结点&#xff0c;通过地址或指针建立元素之间的联系。 结点的 data 域存放数据元素 ai &#xff0c;而 next 域是一个指针&#xff0c;指向 ai 的直接后继 ai1 …

医学影像信息(PACS)系统软件源码

PACS系统是PictureArchivingandCommunicationSystems的缩写&#xff0c;与临床信息系统&#xff08;ClinicalInformationSystem,CIS&#xff09;、放射学信息系统(RadiologyInformationSystem,RIS)、医院信息系统(HospitalInformationSystem,HIS)、实验室信息系统&#xff08;L…

FL Studio21.0.3最新中文版下载安装详解

安装第一步&#xff1a;卸载干净fl历史旧版本&#xff0c;彻底退出安全软件 &#xff08;如果下载好的文件无法打开&#xff0c;可以去百度下载一个解压工具&#xff0c;比如bandzip、360压缩、2345好压...&#xff09;&#xff08;卸载直接用电脑管家卸载或者在左下角开始处找…

2023年贵州省职业院校技能大赛高职组信息安全管理与评估竞赛试题

2023年贵州省职业院校技能大赛高职组 信息安全管理与评估 竞赛试题 第一阶段竞赛项目试题 根据信息安全管理与评估技术文件要求&#xff0c;第一阶段为网络平台搭建与网络安全设备配置与防护。本文件为信息安全管理与评估项目竞赛-第一阶段试题。 介绍 竞赛阶段 任务阶段 竞…

CDN加速器有哪些?

一、前端使用CDN加速的优缺点 1.CDN优点 (1). 提高网站性能&#xff1a; CDN&#xff08;内容分发网络&#xff09;可以将静态资源&#xff08;如脚本、样式表、图片等&#xff09;缓存在服务器节点上&#xff0c;并通过就近访问用户&#xff0c;从而提供更快的加载速度和更好…

激活函数之ReLU, GeLU, SwiGLU

&#x1f604; 废话不多说&#xff0c;直入主题。 ReLU&#xff1a;之前的一些经典网络里的标配&#xff0c;如ResNet等。GeLU&#xff1a;huggingface实现的bert里的标配激活函数。SwiGLU&#xff1a;目前很多大模型里的标配激活函数&#xff0c;如Google的PaLM&#xff0c;M…

基于复旦微的FMQL45T900全国产化ARM核心模块(100%国产化)

TES745D是一款基于上海复旦微电子FMQL45T900的全国产化ARM核心板。该核心板将复旦微的FMQL45T900&#xff08;与XILINX的XC7Z045-2FFG900I兼容&#xff09;的最小系统集成在了一个87*117mm的核心板上&#xff0c;可以作为一个核心模块&#xff0c;进行功能性扩展&#xff0c;能…

C++打印字符串数组中的元素(字符串)

C遍历字符串数组&#xff0c;在main函数里定义一个字符串数组&#xff0c;要求依次输出字符串元素&#xff1a; string a[4] {"a", "vag", "gwe", "gewa"};希望打印的结果 上面可以看做是二维指针&#xff0c;第一维是每个字符串&a…

绿色计算产业发展白皮书:2022年OceanBase助力蚂蚁集团减排4392tCO2e

9 月 15 日&#xff0c;绿色计算产业联盟在 2023 世界计算大会期间重磅发布了《绿色计算产业发展白皮书&#xff08;2023 版&#xff09;》。蚂蚁集团作为指导单位之一&#xff0c;联合参与了该白皮书的撰写。 白皮书中指出&#xff0c;落实“双碳”战略&#xff0c;绿色计算已…

Redis 数据结构

Redis 数据类型以及使用场景分别是什么&#xff1f; Redis 提供了丰富的 数据类型 &#xff0c; 常见的有五种数据类型&#xff1a;String(字符串)&#xff0c;Hash(哈希)&#xff0c;List(列表)、Set(集合)、Zset(有序集合)。 随着Redis 版本更新&#xff0c;后面又支持了四种…

深入探讨栈数据结构:定义、特性和应用

文章目录 &#x1f34b;介绍&#x1f34b;栈的定义&#x1f34b;栈的实现&#x1f34b;栈的应用&#x1f34b;练习题&#x1f34b;总结 &#x1f34b;介绍 在计算机科学中&#xff0c;栈&#xff08;Stack&#xff09;是一种基本的数据结构&#xff0c;它遵循特定的数据存储和操…

网络隔离下实现的文件传输,现有的方式真的安全吗?

在当今的信息化时代&#xff0c;网络安全已经成为了各个企业和机构不可忽视的问题。为了保护内部数据和系统不受外部网络的攻击和泄露&#xff0c;一些涉及国家安全、商业机密、个人隐私等敏感信息的企业和机构&#xff0c;通常会对内外网进行隔离&#xff0c;即建立一个独立的…

2023上海工博会,正运动展位现场直击(二)

9月21日&#xff0c;上海工博会已经成功开展了2天&#xff0c;热度仍旧不减&#xff0c;正运动技术展位6.1H-E261不仅吸引了大量工业自动化专业人士&#xff0c;而且也为他们呈现了一系列令人印象深刻的产品和运动控制解决方案。其中&#xff0c;高性能软硬件产品引发了广泛关注…

十大排序——4.堆排序

前面我们讲了堆&#xff0c;现在我们来看一下队排序。 堆排序的步骤&#xff1a; 首先将一个无序数组建立成一个大顶堆然后&#xff0c;将堆顶的元素和堆低的元素进行交换&#xff08;即将最大的元素交换的到堆底&#xff09;&#xff0c;缩小并下潜调整堆重复上一步&#xf…

Mac文件搜索工具HoudahSpot 6.4.1中文版

HoudahSpot是一款Mac电脑上的文件搜索工具&#xff0c;它可以帮助用户快速准确地找到文件和文件夹&#xff0c;支持高级搜索和过滤&#xff0c;同时提供了多种视图和操作选项&#xff0c;方便用户进行文件管理和整理。 HoudahSpot的主要特点包括&#xff1a; 高级搜索和过滤功…

HashMap中的hash 方法

HashMap中的hash方法为什么要右移 16 位异或&#xff1f; 之所以要对 hashCode 无符号右移 16 位并且异或&#xff0c;核心目的是为了让 hash 值的散列度更高&#xff0c;尽可能减少 hash 表的 hash 冲突&#xff0c;从而提升数据查找的性能。 HashMap 的 put 方法 在 HashMap …

Halcon模板匹配

halcon 创建模板 1、先用摄像头读取一张图片 2、在图片上画出模板 3、连续读取图片&#xff0c;进行模板匹配 dev_close_window ()* Image Acquisition 01: Code generated by Image Acquisition 01 open_framegrabber (GigEVision2, 0, 0, 0, 0, 0, 0, progressive, -1, def…

UI 自动化测试框架:PO 模式+数据驱动 【详解版】

目录 1. PO 设计模式简介 什么是 PO 模式&#xff1f; PO 模式的优点 2. 工程结构简介 工程结构 框架特点 3. 工程代码示例 page 包 action 包 business_process 包 util 包 conf 包 1. PO 设计模式简介 什么是 PO 模式&#xff1f; PO&#xff08;PageObject&am…

docker 配置 gpu版pytorch环境--部署缺陷检测--Anomalib

目录 一、docker 配置 gpu版pyhorch环境1、显卡驱动、cuda版本、pytorch cuda版本三者对应2、拉取镜像 二、部署Anomalib1、下载Anomalib2、创建容器并且运行3、安装Anomalib进入项目路径安装依赖测试&#xff1a; 一、docker 配置 gpu版pyhorch环境 1、显卡驱动、cuda版本、p…

mac安装运行superset及踩坑解决过程

介绍 Apache Superset 是一个现代的企业级商业智能 Web 应用程序。它快速、轻量、直观&#xff0c;并加载了各种选项&#xff0c;使所有技能的用户都可以轻松探索和可视化他们的数据&#xff0c;从简单的饼图到高度详细的 Deck.gl 地理空间图表。 安装 首先安装自制homebrew安…