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用于实现拨打电话功能。

相关推荐
奔跑的web.12 小时前
TypeScript 装饰器入门核心用法
前端·javascript·vue.js·typescript
集成显卡13 小时前
Lucide Icons:一套现代、轻量且可定制的 SVG 图标库
前端·ui·图标库·lucide
pas13613 小时前
37-mini-vue 解析插值
前端·javascript·vue.js
十里-14 小时前
vue.js 2前端开发的项目通过electron打包成exe
前端·vue.js·electron
雨季66615 小时前
构建 OpenHarmony 简易文字行数统计器:用字符串分割实现纯文本结构感知
开发语言·前端·javascript·flutter·ui·dart
小北方城市网15 小时前
Redis 分布式锁高可用实现:从原理到生产级落地
java·前端·javascript·spring boot·redis·分布式·wpf
console.log('npc')15 小时前
vue2 使用高德接口查询天气
前端·vue.js
2401_8920005215 小时前
Flutter for OpenHarmony 猫咪管家App实战 - 添加支出实现
前端·javascript·flutter
天马379815 小时前
Canvas 倾斜矩形绘制波浪效果
开发语言·前端·javascript
天天向上102416 小时前
vue3 实现el-table 部分行不让勾选
前端·javascript·vue.js