uniapp 实现点击弹出表单美观

要实现点击弹出美观的表单，你可以使用 uniapp 的弹窗组件（uni-modal），并在弹窗中放置表单组件（如 uni-form）。

以下是一个简单的示例代码，可以供你参考：

<template>
  <view>
    <button @click="showModal">点击弹出表单</button>
    <uni-modal :show="show" :title="title" @close="closeModal">
      <uni-form>
        <uni-form-item label="姓名">
          <uni-input v-model="name"></uni-input>
        </uni-form-item>
        <uni-form-item label="年龄">
          <uni-input v-model="age" type="number"></uni-input>
        </uni-form-item>
        <uni-form-item label="性别">
          <uni-radio-group v-model="gender">
            <uni-radio value="male">男</uni-radio>
            <uni-radio value="female">女</uni-radio>
          </uni-radio-group>
        </uni-form-item>
        <uni-form-item>
          <uni-button @click="submitForm">提交</uni-button>
        </uni-form-item>
      </uni-form>
    </uni-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      title: '表单',
      name: '',
      age: '',
      gender: 'male'
    }
  },
  methods: {
    showModal() {
      this.show = true
    },
    closeModal() {
      this.show = false
    },
    submitForm() {
      // 处理表单提交逻辑
    }
  }
}
</script>

在这个示例中，当用户点击按钮时，会触发 `showModal` 方法，将 `show` 属性设为 `true`，从而显示弹窗。弹窗中包含一个表单，用户可以在表单中输入信息。当用户点击提交按钮时，会触发 `submitForm` 方法，你可以在这个方法中处理表单提交的逻辑。

需要注意的是，这个示例中的表单只是一个简单的示例，你可以根据自己的需求对表单进行定制。另外，为了实现更美观的效果，你可以在表单组件中添加样式或使用第三方 UI 库。