uni-app 插件需求 弹出的输入框

在 uni-app 中实现一个弹出输入框的功能，你可以使用 uni.showActionSheet 或自定义一个模态框组件。由于 uni.showActionSheet 不支持自定义输入框，我们通常通过自定义组件的方式来实现。以下是一个简单的实现示例，包括一个自定义模态框组件和调用该组件的代码。

自定义模态框组件 (ModalInput.vue)

<template>
  <view v-if="visible" class="modal-overlay" @click.self="hide">
    <view class="modal-content" @click.stop>
      <input v-model="inputValue" placeholder="请输入内容" />
      <button @click="confirm">确定</button>
      <button @click="hide">取消</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      inputValue: ''
    };
  },
  methods: {
    show() {
      this.visible = true;
      this.inputValue = ''; // 清空输入框内容
    },
    hide() {
      this.visible = false;
      this.$emit('hide');
    },
    confirm() {
      this.$emit('confirm', this.inputValue);
      this.hide();
    }
  }
};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
}
</style>

在页面中使用自定义模态框组件

<template>
  <view>
    <button @click="showModal">弹出输入框</button>
    <ModalInput @confirm="handleConfirm" @hide="handleHide" />
  </view>
</template>

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

export default {
  components: {
    ModalInput
  },
  methods: {
    showModal() {
      this.$refs.modalInput.show();
    },
    handleConfirm(value) {
      console.log('用户输入:', value);
    },
    handleHide() {
      console.log('模态框已隐藏');
    }
  }
};
</script>

在这个示例中，ModalInput.vue 是一个自定义的模态框组件，包含一个输入框和两个按钮（确定和取消）。当点击“确定”按钮时，组件会触发 confirm 事件并传递输入框的值；点击“取消”按钮或模态框外部区域会触发 hide 事件。在页面中使用该组件时，通过监听这些事件来处理用户输入和模态框的隐藏。