电话 usePhone

更新: 2025/1/8 字数: 0 字 时长: 0 分钟

基础使用

usePhone 包含调用拨打电话和发送短信的功能

拨打电话

callPhone 函数用于调用拨打电话的界面，需要传入电话号码

import usePhone from "@/hooks/usePhone";
const { callPhone } = usePhone();

点击查看示例代码

<script setup lang="ts">
import usePhone from "@/hooks/usePhone";

const { callPhone } = usePhone();
const show = ref(false);
const value = ref("");
</script>

<template>
  <div class="p-16">
    <van-field
      v-model="value"
      label="手机号"
      center
      readonly
      clickable
      @touchstart.stop="show = true" />
    <van-space class="mt-10">
      <van-button size="small" type="primary" @click="callPhone(value)">
        拨打电话
      </van-button>
    </van-space>
    <van-number-keyboard
      v-model="value"
      :show="show"
      :maxlength="11"
      @blur="show = false" />
  </div>
</template>

发送短信

sendSms 函数用于调用发送短信的界面，需要传入电话号码

import usePhone from "@/hooks/usePhone";
const { sendSms } = usePhone();

点击查看示例代码

<script setup lang="ts">
import usePhone from "@/hooks/usePhone";

const { sendSms } = usePhone();
const show = ref(false);
const value = ref("");
</script>

<template>
  <div class="p-16">
    <van-field
      v-model="value"
      label="手机号"
      center
      readonly
      clickable
      @touchstart.stop="show = true" />
    <van-space class="mt-10">
      <van-button size="small" type="primary" @click="sendSms(value)">
        发送短信
      </van-button>
    </van-space>
    <van-number-keyboard
      v-model="value"
      :show="show"
      :maxlength="11"
      @blur="show = false" />
  </div>
</template>

API

方法

方法	说明	类型
callPhone	拨打电话	(phoneNum: string) => void
sendSms	发送短信	(phoneNum: string) => void