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

最新推荐文章于 2024-06-22 11:57:18 发布

天界程序员

最新推荐文章于 2024-06-22 11:57:18 发布

阅读量3.1k

点赞数 10

分类专栏：前端应用 Vue 文章标签： vue html javascript 拨号移动端

本文链接：https://blog.csdn.net/qq_36362721/article/details/117411384

版权

前端应用同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

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. 结语

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

天界程序员

关注

10
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
3
评论
移动端（vue）如何调用手机拨号功能

1. 简介在挪动前端编写 HTML 当中，标签meta：\<meta name="format-detection"/>有什么用法呢当用手机浏览该 HTML 页面在手机上浏览时，该标签会将网页内容中的手机号码主动识别拨号的超链接。在 iPhone 上默认值是：<meta name="format-detection" content="telephone=yes"/>如果你不想将手机主动将网页中的电话号码显示为拨号的超链接，那么可以： <meta name="
复制链接

扫一扫