移动端(vue)如何调用手机拨号功能

简介: 移动端(vue)如何调用手机拨号功能

1. 简介

在挪动前端编写 HTML 当中, 标签meta:<meta name="format-detection"/>有什么用法呢

当用手机浏览该 HTML 页面在手机上浏览时,该标签会将网页内容中的手机号码主动识别拨号的超链接。

在 iPhone 上默认值是:

<meta name="format-detection" content="telephone=yes"/>

如果你不想将手机主动将网页中的电话号码显示为拨号的超链接,那么可以:

<meta name="format-detection" content="telephone=no"/>

2. 在vue中如何调用手机拨号功能

2.1 配置index.html

如上图所示,在该HTML文件里面的head里面添加如下代码:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=yes" /> //添加该代码 
    <title>项目名称</title> 
  </head>
  <body>
  </body>
</html>

2.2 配置要调用的页面或者组件

在所需要调用的页面上的DOM示例代码:

 <div @click="callPhone">
     <van-icon name="phone-circle-o" />联系客户
 </div>

methods里面的方法示例代码:

  // 调用拨号功能
    callPhone(phoneNumber) {
      //window.location.href = "tel://158xxxx1317";
      window.location.href = "tel://"+phoneNumber;
    },

3. 结语

  以上为个人遇到的问题,及其记录,欢迎大家指正!

相关文章
|
15天前
|
JavaScript NoSQL Redis
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
这篇文章记录了在Vue中实现修改手机号和邮箱的大致流程,包括使用过滤器部分隐藏展示的手机号和邮箱,以及通过点击触发路由跳转的便捷方式。文章还描述了旧号码和新号码验证的界面实现,其中验证码由后端生成并通过弹窗展示给用户,未来可以接入真正的手机验证码接口。此外,还提供了修改邮箱的页面效果截图,并强调了学习是一个永无止境的过程。
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
|
15天前
|
JavaScript 数据安全/隐私保护
Vue中如何使用过滤器来隐藏手机号、邮箱等字符串的中间部分内容
这篇文章介绍了在Vue中如何使用过滤器来隐藏手机号和邮箱等字符串的中间部分内容,以提高隐私保护。文章展示了实现效果,并提供了实现过程的代码示例,包括HTML部分的绑定、data部分的数据定义和script部分的过滤器定义。文章还解释了过滤器的概念、语法和使用方式,并提供了一个外部链接供读者获取更加详细的过滤器知识。
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
2月前
|
缓存 开发框架 前端开发
循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理
循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
41 1
|
2月前
|
关系型数据库 MySQL 测试技术
基于SpringBoot+Vue华强北商城二手手机管理系统(源码+部署说明+演示视频+源码介绍+lw)(4)
基于SpringBoot+Vue华强北商城二手手机管理系统(源码+部署说明+演示视频+源码介绍+lw)
30 2
|
2月前
|
数据库
基于SpringBoot+Vue华强北商城二手手机管理系统(源码+部署说明+演示视频+源码介绍+lw)(3)
基于SpringBoot+Vue华强北商城二手手机管理系统(源码+部署说明+演示视频+源码介绍+lw)
41 2
|
2月前
|
存储 安全 Java
基于SpringBoot+Vue华强北商城二手手机管理系统(源码+部署说明+演示视频+源码介绍+lw)(2)
基于SpringBoot+Vue华强北商城二手手机管理系统(源码+部署说明+演示视频+源码介绍+lw)
57 1
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
vue 前端 邮箱、密码、手机号码等输入验证规则
vue 前端 邮箱、密码、手机号码等输入验证规则
192 0

热门文章

最新文章

下一篇
云函数