uniapp弹出输入页面 代码示例

下面是一个简单的示例代码，演示了如何在 uni-app 中实现弹出输入页面：

1. 在原始页面中，添加一个按钮，点击该按钮可以弹出输入页面：

<template>
  <view>
    <button @click="openInputPage">打开输入页面</button>
    <view>{{ inputContent }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputContent: ''
    };
  },
  methods: {
    openInputPage() {
      uni.navigateTo({
        url: '/pages/inputPage/inputPage'
      });
    }
  }
};
</script>

2. 创建一个名为 `inputPage` 的新页面，用于输入内容。在该页面中，添加一个输入框和确定、取消按钮：

<template>
  <view>
    <input v-model="inputValue" placeholder="请输入内容" />
    <button @click="confirmInput">确定</button>
    <button @click="cancelInput">取消</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    confirmInput() {
      uni.navigateTo({
        url: '/pages/originalPage/originalPage?input=' + this.inputValue
      });
    },
    cancelInput() {
      uni.navigateBack();
    }
  }
};
</script>

3. 在原始页面的 `onLoad` 生命周期钩子函数中，接收从输入页面传递回来的内容，并进行相应的处理：

<script>
export default {
  data() {
    return {
      inputContent: ''
    };
  },
  onLoad(options) {
    this.inputContent = options.input || '';
  }
};
</script>

通过以上代码示例，点击原始页面中的按钮可以打开输入页面，输入页面可以输入内容并点击确定按钮传递回原始页面，原始页面接收到输入的内容并显示在页面上。你可以根据需要进行修改和适配。