移动端（vue）如何调用手机拨号功能

Posted 2021-06-19 天界程序员

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端（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. 结语

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

以上是关于移动端（vue）如何调用手机拨号功能的主要内容，如果未能解决你的问题，请参考以下文章