uniapp 的vue3弹出输入框

UniApp是一个基于Vue.js的跨平台框架，它允许开发者构建一次代码，发布到多个平台上，包括iOS、Android等。在UniApp的Vue3版本中，处理弹出输入框通常会使用内置的`u-input`组件配合`Modal`组件来实现。

要创建一个简单的弹出输入框，你可以这样做：

<template>
  <button @click="openModal">打开输入框</button>

  <!-- 使用 Modal 组件 -->
  <view class="modal-mask" v-if="showModal">
    <uni-modal title="请输入信息" :mask-closable="false">
      <view class="modal-container">
        <u-input placeholder="请输入内容"></u-input>
        <uni-button type="primary" @click="handleInput">确定</uni-button>
        <uni-button type="default" @click="closeModal">取消</uni-button>
      </view>
    </uni-modal>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { showModal, closeModal } from '@/api/modal'; // 假设你有对应的API操作

const showModalRef = ref(false);
let inputValue = '';

function openModal() {
  showModalRef.value = true;
}

function handleInput(e) {
  inputValue = e.detail.value; // 获取输入框的内容
  closeModal(); // 关闭模态框
}

function closeModal() {
  showModalRef.value = false;
}
</script>

<style scoped>
.modal-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container {
  width: 70%;
  max-width: 500px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}
</style>

在这个例子中，当用户点击“打开输入框”按钮时，会显示一个包含输入框和确认/取消按钮的模态框。用户输入后，可以调用相应的处理函数（如`handleInput`）来获取并处理输入值。