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

最新推荐文章于 2022-05-12 10:02:02 发布
最新推荐文章于 2022-05-12 10:02:02 发布
阅读量1.8k 收藏 1
点赞数 1
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A535366/article/details/122346384
版权

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>

535366
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 实现拨打电话操作
01-18
我就废话不多说了，大家还是直接看操作吧~ <p>联系电话：<a>{{item.phone}}</a></p> 补充知识：vue移动项目中如何设置点击手机号码就唤起拨号功能 1、在vue项目的index.html中添加如下代码： <meta name=”format-detection” content=”telephone=yes” /> 2、在需要调起手机拨号功能的页面，写如下函数： // 调用拨号功能 callPhone (phoneNumber) { window.loc
vue移动端实现拨号功能
qq_45479398的博客
09-06 3331
vue移动端实现拨号功能 方法一 1， 在vue项目的index.html中添加如下代码： <meta name="format-detection" content="telephone=yes" /> 2，在需要调起手机拨号功能的页面 callPhone (phoneNumber) { window.location.href = 'tel://' + phoneNumber } 3，在拨号的页面调用此方法 <span @click="callPhone(Phone)"&g
vue实现点击关注后及时更新列表功能
08-27
主要介绍了vue实现点击关注后及时更新列表功能，本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值，需要的朋友可以参考下
vue项目实现github在线预览功能
08-27
主要介绍了vue项目实现github在线预览功能，本文通过提问两个问题带领大家一起学习整个过程,需要的朋友可以参考下
解决vue 项目引入字体图标报错、不显示等问题
12-02
问题：在项目开发时使用字体图标，发现两个问题； 1、出现报错： 解决方法为：把字体引入方式改为绝对路径 2、不报错，但是不显示图标字体，出现方框 原因可能有两种： ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解决办法是在用到的地方引入字体的样式文件（全局引入的话需要从app.vue里引入） ②这个就是我遇到的问题，浪费了我好几分钟！！！微笑 解决办法是把font.styl改为font.css 记得在用到图标的地方引入 问题原理后续再写。 以上这篇解决vue 项目引入字体图标报错、不显示等问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希
Vue拨打电话功能
勋勋勋勋小勋勋的博客
01-12 2937
.vue &lt;van-tabbar-item @click="dialPhoneNumber(Telephone)"&gt; &lt;span&gt;打电话&lt;/span&gt; &lt;/van-tabbar-item&gt; .ts private dialPhoneNumber(phoneNumber) { if (!phoneNumber) { ...
vue页面实现拨打电话功能
Kidaze的博客
04-14 1811
vue template： <p class="telNum" @click="callPhone(phoneNum)">{{phoneNum}}</p> methods： methods:{ callPhone (phoneNum) { window.location.href = 'tel://' + phoneNum } }
vue拨打电话
dmr123456的博客
05-12 5640
需求：点击电话号码，弹出对话框，确定后直接调用手机拨打电话功能（ps：不允许弹出是否允许调用手机通讯录的提示）。 验证后仅思路3满足需求。 思路1：---简单但不满足（不允许弹出是否允许调用手机通讯录的提示）需求 window.location.href = 'tel:' + 8888410; 思路2：-------方法存在问题 <a id="call" @click="showDialog" style="color: #336699">8888410&l....
vue 拨打电话
weixin_30905133的博客
04-06 134
<a v-bind:href="'tel:'+(order.orderer.phone)">{{order.orderer.phone}}</a> v-bind:属性=“ ‘字符串’+自定义变量名” 转载于:https://www.cnblogs.com/winyh/p/6674425.html
vue项目前端埋点的实现
10-17
主要介绍了vue项目前端埋点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中移动端点击跳转到拨打电话页面
qq_41656414的博客
05-13 1357
在用vue做移动端项目时，遇到店家跳转到拨号 <router-link active-class=‘sel’ tag=‘li’ to="" @click.native=‘gotel()’> 免费电话 methods:{ gotel(){ // console.log(1) window.location.href = ‘tel:4008820666’ } } 注意：在vue中给router-link添加事件需要加上.native 例如：@click.native ...
element 输入框点击事件_ElementUI的input事件问题
weixin_39609573的博客
12-20 2948
最近用ElementUI的el-input组件，然后发现一个问题，就是我在输入框后，加一个icon的button，然后我希望这个输入框可以触发两个事件，第一个是，输入完，按键盘回车键的事件，第二个是，输入完，点icon的button的click事件。然后翻阅文档，发现可以给input加@change事件，这样按回车可以搜索，然后可以把icon的button写成slot的方式然后给button加@c...
Web前端-Vue ElementUI el-input组件绑定点击事件
热门推荐
MinggeQingchun的博客
12-22 1万+
1、element中el-input组件事件 <el-input v-model="value" v-on:change="handleChange"></el-input> <el-input v-model="value" @change="handleChange"></el-input> <el-input v-model="value" v-on:input="handleChange"></el-input> &lt
element实现动态筛选功能，点击手机号控制表头的手机号显示与不显示
weixin_44727080的博客
11-15 1179
前言： 在iview中是可以实现这个功能的，点击某个参数，来控制某个表头的展示与隐藏，element官方是没有提供这样的功能的，这里来实现element的该功能 iview实现效果：入口 最终element实现效果： 实现代码： <template> <div> <el-button @click="fileterList('sort')">编号</el-button> <el-button @cli...
Vue 拨打电话
weixin_44524835的博客
12-21 284
<div @click="callPhone"> 拨打电话 </div> callPhone () { window.location.href = 'tel:110' }
vue el-table 点击号码拨打电话
@you的博客
10-28 249
<el-table :data="tableData" border style="font-size: 14px" > <el-table-column label="序号" type="index"></el-table-column> <el-table-column label="名字" prop="name"></el-table-column> <el-table-column label="电话"> .
vue中拨打电话号码
weixin_40667880的博客
07-30 1038
vue中拨打电话号码代码如下： <a :href="'tel:'+电话号码"></a>
vue设置点击电话跳转到手机拨打电话的界面
chijinrong4312的博客
06-20 2502
<p>联系电话：<a :href="'tel:' + item.phone">{{item.phone}}</a></p> 转载于:http...
vue实现点击图标把文字转换成输入框
最新发布
09-02
Vue 实现点击图标把文字转换成输入框的过程可以通过修改数据和使用条件渲染来实现。具体步骤如下： 1. 在 Vue 的 data 中定义一个变量，用来存储文字和是否显示输入框的状态。 ```javascript data() { return { text: '点击这里', showInput: false } } ``` 2. 在模板中使用 v-if 指令根据 showInput 的值来决定显示文字还是输入框。 ```html <template> <div> <span v-if="!showInput" @click="showInput = true">{{ text }}</span> <input v-if="showInput" v-model="text" @blur="showInput = false"> </div> </template> ``` 3. 通过给文字所在的元素绑定点击事件，在点击时切换 showInput 的值，从而实现文字到输入框的转换。 ```html <span v-if="!showInput" @click="showInput = true">{{ text }}</span> ``` 4. 使用 v-model 指令将输入框的值绑定到 text 变量上，使输入的内容被更新到该变量中。 ```html <input v-if="showInput" v-model="text" @blur="showInput = false"> ``` 5. 当输入框失去焦点时，使用 @blur 事件将 showInput 的值设为 false，使输入框隐藏。 ```html <input v-if="showInput" v-model="text" @blur="showInput = false"> ``` 这样，当用户点击文字时，文字就会被转换成输入框，用户可以进行编辑。当输入框失去焦点时，输入框又会变回文字。以上就是使用 Vue 实现点击图标把文字转换成输入框的基本方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值