Vue项目实现点击图标拨打电话

本文介绍了在前端开发中实现点击图标或文字拨打电话的三种常见方法:1) 使用a标签直接结合href属性;2) 绑定click事件调用window.location.href;3) 在p标签中直接包裹a标签。这三种方式都适用于在网页上创建电话链接,方便用户直接拨号。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.a标签通过href直接跳转

<a :href="'tel:' + 181****1234"><van-icon name="phone-o" /></a>

2.a标签内写个点击事件的方法,然后通过window.location.href跳转

<a @click="Calltel()"><van-icon name="phone-o" /></a>
  methods:{
        	Calltel(){
        		window.location.href = 'tel://181****1234'
    		}
		}

 3.最直接的a标签包裹图标简单粗暴

<p>联系电话:<a :href="'tel:' + item.phone">{{item.phone}}</a></p>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值