uniapp中实现<text>文本内容点击可复制或拨打电话

template 部分

vue 复制代码
<template>
    <view>
        <text @tap="handlePhoneClick('1234567890')">1234567890</text>
    </view>
</template>

script 部分

vue 复制代码
export default {
    methods: {
        handlePhoneClick(phoneNumber) {
            uni.showActionSheet({
                itemList: ['复制', '拨打'],
                success: (res) => {
                    if (res.tapIndex === 0) {
                        // 复制操作
                        uni.setClipboardData({
                            data: phoneNumber,
                            success: () => {
                                uni.showToast({
                                    title: '复制成功',
                                    icon: 'success'
                                });
                            },
                            fail: () => {
                                uni.showToast({
                                    title: '复制失败',
                                    icon: 'none'
                                });
                            }
                        });
                    } else if (res.tapIndex === 1) {
                        // 拨打操作
                        uni.makePhoneCall({
                            phoneNumber: phoneNumber
                        });
                    }
                }
            });
        }
    }
};

在上述代码中,当点击包含电话的 标签时,会弹出一个操作菜单,用户可以选择复制电话号码或者直接拨打该号码。uni.setClipboardData用于实现复制功能,uni.makePhoneCall用于实现拨打电话功能。

相关推荐
前端一课几秒前
用Agent Skill重构代码:300行缩至30行的实战教程
前端
腻害兔12 分钟前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:IM 即时通讯模块,一个被低估的「全功能聊天系统」
java·前端·vue.js·产品经理·ai编程
Alan_69133 分钟前
商品详情优化三板斧-拆分-多级缓存-GC调参
后端·缓存
奎叔34 分钟前
Flutter 异常处理体系:从捕获、转换到恢复
前端
Conan在掘金37 分钟前
ArkTS 进阶之道(3):为哈禁解构声明?类型一眼可见 vs 推断链断裂
后端
心念枕惊37 分钟前
.NET CORE 授权进阶-角色、策略与动态权限实现
java·前端·.netcore
晚安code39 分钟前
干掉成山的 if-else:工厂造、策略选,一文讲透两个模式的配合
后端·设计模式
feng尘39 分钟前
深度解析布隆过滤器(Bloom Filter):原理、优缺点与 1000 万黑名单实战
后端·面试
小徐_233340 分钟前
寓言故事一则:狗猛酒酸
前端·ai编程
大陈AI40 分钟前
Docker Compose 前后端部署踩坑实录:3 个坑让我的容器反复 Exit(1)
后端