composables封装一个通用的手机短信发送逻辑(模拟),可复用到多个组件中,有.ts和.vue文件
时间: 2024-10-11 07:14:34 浏览: 35
在Vue 3或Composition API的项目中,创建一个名为`PhoneSMS`的composable用于封装手机短信发送的通用逻辑,通常涉及以下几个步骤:
1. **创建`PhoneSMS.ts`文件**:
- 在`src/composables`或你自定义的components目录下创建一个名为`PhoneSMS.ts`的文件,这将是我们的功能模块。
```typescript
// PhoneSMS.ts
import { ref } from 'vue';
export default function usePhoneSMS() {
const smsSent = ref(false); // 标记短信是否已发送
const sendSMS = async (phoneNumber: string, message: string) => {
try {
console.log('模拟发送短信...', phoneNumber, message);
await new Promise((resolve) => setTimeout(resolve, 1000)); // 模拟发送过程
smsSent.value = true; // 更新状态为已发送
} catch (error) {
console.error('发送短信失败:', error);
}
};
return {
smsSent,
sendSMS,
};
}
```
这里我们定义了一个ref来跟踪短信是否已经发送,以及一个异步sendSMS函数,它模拟了实际的短信发送过程。
2. **在`.vue`组件中使用`PhoneSMS`**:
- 在需要使用此逻辑的组件(如`ContactDetail.vue`)中引入并使用这个composable。
```html
<!-- ContactDetail.vue -->
<template>
<div>
<button @click="sendSMS(phoneNumber)">发送短信</button>
<p>SMS已发送状态: {{ smsSent }}</p>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import usePhoneSMS from '@/composables/PhoneSMS';
const phoneNumber = ref('');
const { smsSent, sendSMS } = usePhoneSMS();
const handleSendSMS = () => {
sendSMS(phoneNumber.value, '这是短信内容');
};
onMounted(() => {
// 初始化手机号码输入框
phoneNumber.value = '1234567890';
});
</script>
```
在模板中,我们创建一个按钮,并绑定了`sendSMS`函数。当用户点击时,会触发发送短信操作,并显示smsSent的状态。
阅读全文