vue实现调取手机的拨号界面

最新推荐文章于 2024-08-01 10:02:13 发布

柠檬不萌只是酸i

最新推荐文章于 2024-08-01 10:02:13 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签：调取拨号调取拨打手机号界面

本文链接：https://blog.csdn.net/Miss_liangrm/article/details/99702591

版权

这篇博客介绍了如何在Vue应用中实现调用手机的拨号界面，通过`<a>`标签结合`tel:`协议，点击即可打开拨号界面拨打预设的客服电话。在手机上测试可以看到预期效果。

摘要由CSDN通过智能技术生成

结果图：

手机上测试可以参考：PC运行的代码，在手机上查看效果

核心代码：

（注：a标签里面的代码是不可以修改的，修改的话就无法调取了）

<a :href="'tel:'+tel">拨打客服</a>

代码如下：

<template>
  <div id="hello_world">
    <div class="call_btn">
      <a :href="'tel:'+tel">拨打客服</a>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        msg:'',
        tel:10086
      }
    }
  }
</script>
<style scoped="scoped">
.call_btn{
  width: 90%;
  height: 40px;
  line-height: 40px;
  background:#55b737;
  text-align: center;
  margin:20px auto;
  border-radius: 10px;
}
.call_btn a{
  color: #FFFFFF;
  text-decoration: none;
}
</style>

------------完。