vue3 点击输入框弹出弹出框

在Vue3中，要实现点击输入框弹出弹出框的功能，你可以按照以下步骤进行操作：

1. 创建一个自定义组件，用于显示弹出框的内容。
2. 在父组件中，监听输入框的点击事件，当输入框被点击时，调用方法显示弹出框。
3. 在子组件中，使用遮罩层样式实现弹出框的遮罩效果。
4. 在子组件中，使用watch属性监听键盘的弹出和收起事件，根据键盘状态来控制弹出框的显示和隐藏。

以下是一个示例代码，展示了如何在Vue3中实现点击输入框弹出弹出框的功能：

// 子组件：Popup.vue
<template>
  <div class="popup" v-show="showPopup">
    <!-- 弹出框内容 -->
  </div>
  <div class="mask" v-show="showPopup" @click="hidePopup"></div>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false, // 弹出框的显示状态
    };
  },
  methods: {
    hidePopup() {
      this.showPopup = false;
    },
  },
  watch: {
    nowHeight() {
      if (this.defaultHeight !== this.nowHeight) {
        // 键盘弹出操作
        setTimeout(() => {
          document.activeElement.scrollIntoView(false);
          let scrollTop = document.body.scrollTop;
          window.scrollTo(0, scrollTop + 100);
        }, 200);
      } else {
        // 键盘收起操作
      }
    },
  },
};
</script>

// 父组件：App.vue
<template>
  <div>
    <input type="text" @click="showPopup" />
    <popup></popup>
  </div>
</template>

<script>
import Popup from '@/components/Popup.vue';

export default {
  components: {
    Popup,
  },
  methods: {
    showPopup() {
      this.$refs.popup.showPopup = true;
    },
  },
};
</script>