用 uniapp 自定义modal可以放input等组件需要兼容微信小程序

Uniapp 自定义 modal 可以使用官方提供的组件 uni-popup，该组件可以放置任意组件，包括 input 等。

示例代码：

<template>
  <view>
    <uni-button @click="showModal">打开 Modal</uni-button>
    <uni-popup :show="show" :position="position" :mask="mask" :duration="duration" @click="closeModal">
      <view>
        <input type="text" placeholder="请输入内容" />
        <uni-button @click="submit">提交</uni-button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false, // 是否显示 modal
      position: 'center', // modal 位置，可选值有 center、top、bottom、left、right
      mask: true, // 是否显示遮罩
      duration: 300 // 动画时长
    }
  },
  methods: {
    showModal() {
      this.show = true
    },
    closeModal() {
      this.show = false
    },
    submit() {
      // 提交表单
      this.closeModal()
    }
  }
}
</script>

需要注意的是，微信小程序中，input 组件在 modal 中可能会出现无法输入的问题，需要将 modal 的 position 属性设置为 absolute，同时在 input 组件上添加 fixed="true" 属性。

示例代码：

<uni-popup :show="show" position="absolute" :mask="mask" :duration="duration" @click="closeModal">
  <view>
    <input type="text" fixed="true" placeholder="请输入内容" />
    <uni-button @click="submit">提交</uni-button>
  </view>
</uni-popup>
``