我现在有一个收银页面，点击支付方式中的手机号支付会跳出一个弹窗，弹窗中有一个输入框，还有取消和确定按钮，vue3代码实现

在Vue3中，你可以使用`<script setup>`配合`ref`和`onMounted`等钩子函数来实现这个功能。下面是一个简化的例子：

<template>
  <div>
    <button @click="showPaymentModal">手机号支付</button>
    <modal v-if="isModalVisible" :visible.sync="isModalVisible">
      <input type="text" ref="phoneInput" placeholder="请输入手机号码" />
      <div slot="footer">
        <button class="cancel-btn" @click="closeModal">取消</button>
        <button class="confirm-btn" @click="handleConfirm">确定</button>
      </div>
    </modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Modal from './Modal.vue'; // 假设你有个名为Modal的组件

const isModalVisible = ref(false);
let phoneInputValue;

function showModal() {
  isModalVisible.value = true;
}

function closeModal() {
  isModalVisible.value = false;
}

function handleConfirm() {
  if (phoneInputValue !== '') {
    // 这里可以发送支付请求，比如调用API
    console.log(`正在处理手机号支付 ${phoneInputValue}`);
    closeModal();
  }
}

onMounted(() => {
  // 初始化 phoneInputValue
  phoneInputValue = '';
});
</script>

在这个示例中，我们创建了一个`isModalVisible`的Ref来控制弹窗的显示隐藏，`phoneInput`用于存储手机号输入值。当点击“手机号支付”按钮时，`showModal`会被调用，展示弹窗。用户输入手机号后，点击“确定”按钮会触发`handleConfirm`函数，检查输入是否为空，然后关闭弹窗。

注意这只是一个基础的实现，实际应用中可能需要添加错误处理、数据验证以及与后端API的交互等功能。同时，`Modal.vue`组件需要你自己实现，它通常包含显示和隐藏的逻辑，以及可能的动画效果。