vue 点击a页面按钮的同时b页面跳出弹窗判断

这个需求可以通过使用事件总线来实现。在页面A中点击按钮时，可以通过事件总线触发一个自定义事件，然后在页面B中监听这个事件，当事件触发时弹出弹窗进行判断。

在页面A中触发自定义事件的代码如下：

// 导入事件总线
import EventBus from '@/utils/eventBus.js'

// 点击按钮时触发自定义事件
clickBtn() {
  EventBus.$emit('btn-click')
}

在页面B中监听自定义事件的代码如下：

// 导入事件总线
import EventBus from '@/utils/eventBus.js'

// 监听自定义事件
created() {
  EventBus.$on('btn-click', () => {
    // 在这里弹出弹窗进行判断
  })
}

这样就可以在页面A中点击按钮时，在页面B中弹出弹窗进行判断了。

相关问题

vue3点击页面中的一个按钮，跳出一个小弹窗可以输入手机号

在 Vue3 中，实现这个功能通常会涉及到组件化和事件处理。你可以创建一个包含输入框和确认按钮的自定义组件，然后在需要的地方通过点击事件触发显示这个组件。以下是简单步骤：

1. 创建一个名为 `PhoneNumberInput` 的新组件，比如在一个 `./components` 目录下：

   <template>
     <v-dialog v-model="show" persistent>
       <v-card>
         <v-card-title>请输入手机号</v-card-title>
         <v-card-text>
           <v-input v-model="phoneNumber" type="tel"></v-input>
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
           <v-btn @click="hide">取消</v-btn>
           <v-btn color="primary" @click="submit">提交</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
   </template>

   <script>
   export default {
     data() {
       return {
         show: false,
         phoneNumber: '',
       };
     },
     methods: {
       hide() {
         this.show = false;
       },
       submit() {
         // 这里可以添加验证和实际操作手机号的逻辑
         if (this.validatePhoneNumber()) {
           // 提交逻辑...
           this.hide();
         }
       },
       validatePhoneNumber() {
         // 自定义的验证规则，可以根据需求设置
         // 如果不符合条件则返回 false
         // 示例：正则表达式检查手机号格式
         const regex = /^1[3-9]\d{9}$/;
         return regex.test(this.phoneNumber);
       },
     },
   };
   </script>

2. 在主应用组件中引入并使用这个组件：

   <template>
     <div id="app">
       <button @click="openPhoneInput">打开手机号输入</button>
       <!-- 其他内容... -->
     </div>
   </template>

   <script>
   import PhoneNumberInput from './components/PhoneNumberInput.vue';

   export default {
     components: {
       PhoneNumberInput,
     },
     methods: {
       openPhoneInput() {
         this.$refs.phoneInput.show(); // 假设PhoneNumberInput有一个 ref 叫phoneInput
       },
     },
   };
   </script>

当你点击页面上的按钮时，会触发 `openPhoneInput` 方法，显示小弹窗。用户可以在输入框中输入手机号码，点击提交按钮时，如果验证通过，可以执行相应的业务逻辑。

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

在 Vue3 中，如果你想要在手机号支付弹窗中输入手机号后，返回收银页面并获取输入的手机号，你需要按照以下步骤来设计：

1. 创建一个弹窗组件（如 `PhoneNumberInput.vue`），其中包含一个 `v-model` 或者 `ref` 来存储输入的手机号：

<!-- PhoneNumberInput.vue -->
<template>
  <div @submit.prevent="handleSubmit">
    <input v-model="phoneNumber" type="tel" placeholder="请输入手机号码"/>
    <button type="button" @click="cancel">取消</button>
    <button type="submit" :disabled="!phoneNumber">确定</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: ''
    };
  },
  methods: {
    handleSubmit() {
      this.$emit('input', this.phoneNumber); // 发出事件传递数据
      this.cancel(); // 在提交后关闭弹窗
    },
    cancel() {
      this.phoneNumber = ''; // 清空输入
      this.$emit('close'); // 发送关闭弹窗的事件
    }
  }
}
</script>

2. 在收银页面组件 (`Checkout.vue`) 中引入并使用该组件，添加事件监听来处理输入：

<!-- Checkout.vue -->
<template>
  <PhoneNumberInput v-if="showPhonePayment" @input="handlePhoneNumberInput" @close="hidePhoneNumberInput"/>
  <!-- ...其他内容 -->
</template>

<script>
import PhoneNumberInput from './PhoneNumberInput.vue';

export default {
  components: {
    PhoneNumberInput
  },
  data() {
    return {
      showPhonePayment: false,
      phoneNumber: ''
    };
  },
  methods: {
    handlePhoneNumberInput(phoneNumber) {
      this.phoneNumber = phoneNumber; // 获取到手机号
      this.showPhonePayment = false; // 隐藏弹窗
    },
    hidePhoneNumberInput() {
      this.showPhonePayment = false;
    },
    // 其他支付方式处理逻辑...
  }
};
</script>

当你点击手机号支付时，`showPhonePayment` 设为 `true` 并显示弹窗。用户输入完手机号后，`handlePhoneNumberInput` 方法会被触发，将输入的手机号赋值给 `this.phoneNumber`，然后关闭弹窗。