uniapp 弹出输入框

要在uniapp中弹出输入框，可以使用uni-app官方提供的uni.showModal方法，结合自定义输入框组件来实现。具体步骤如下：

1. 在pages目录下创建一个新的文件夹，用于存放自定义输入框组件，例如命名为“custom-input”。

2. 在“custom-input”文件夹中创建一个新的vue文件，例如命名为“custom-input.vue”。

3. 在“custom-input.vue”文件中编写自定义输入框的模板和样式。

4. 在“custom-input.vue”文件中定义一个名为“showInput”、类型为Boolean的prop，用于控制输入框的显示和隐藏。

5. 在“custom-input.vue”文件中定义一个名为“inputValue”、类型为String的data，用于存储输入框中的文本内容。

6. 在“custom-input.vue”文件中定义一个名为“confirmInput”、类型为Function的事件，用于在用户点击输入框中的“确定”按钮后将输入框中的文本内容传递给父组件。

7. 在父组件中引入“custom-input”组件，并在需要弹出输入框的地方使用uni.showModal方法弹出模态框。

8. 在uni.showModal方法的回调函数中判断用户点击的是“确定”还是“取消”按钮，并将“showInput”属性设置为false，隐藏输入框。

9. 在uni.showModal方法的回调函数中如果用户点击了“确定”按钮，则调用“custom-input”组件的“confirmInput”事件，将输入框中的文本内容传递给父组件。

10. 在父组件中通过监听“custom-input”组件的“confirmInput”事件获取输入框中的文本内容，并进行相应的处理。

示例代码如下：

custom-input.vue：

<template>
  <view class="custom-input" v-show="showInput">
    <input v-model="inputValue" placeholder="请输入内容"/>
    <button @tap="confirmInput">确定</button>
  </view>
</template>

<script>
  export default {
    props: {
      showInput: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        inputValue: ''
      }
    },
    methods: {
      confirmInput() {
        this.$emit('confirmInput', this.inputValue)
      }
    }
  }
</script>

<style>
  .custom-input {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 1px solid #ddd;
    padding: 16px;
    border-radius: 8px;
  }
  input {
    width: 100%;
    margin-bottom: 16px;
    border: none;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    outline: none;
  }
  button {
    background-color: #f5222d;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
  }
</style>

页面中使用：

<template>
  <view>
    <button @tap="showInput = true">弹出输入框</button>
    <custom-input :showInput="showInput" @confirmInput="onConfirmInput"></custom-input>
  </view>
</template>

<script>
  import CustomInput from '@/pages/custom-input/custom-input.vue'

  export default {
    components: {
      CustomInput
    },
    data() {
      return {
        showInput: false,
        inputValue: ''
      }
    },
    methods: {
      onConfirmInput(value) {
        // 处理输入框中的文本内容
        console.log('输入框中的文本内容为：', value)
      }
    }
  }
</script>