vue2点击添加，弹窗表单添加用户信息

好的，我可以为您提供一个基本的Vue2点击添加按钮后弹出表单添加用户信息的代码示例。首先，您需要在Vue组件中创建一个按钮，并为该按钮绑定一个点击事件，触发该事件后弹出表单。然后，您需要在Vue组件中创建一个弹窗，并在该弹窗中创建一个表单，用于添加用户信息。

以下是一个简单的示例代码，您可以在此基础上进行修改和扩展：

<template>
  <div>
    <h2>用户列表</h2>
    <ul>
      <li v-for="user in userList" :key="user.id">
        {{ user.name }} - {{ user.email }} - {{ user.phone }}
      </li>
    </ul>
    <button @click="showAddUserForm()">添加用户</button>
    <div v-if="showAddUserDialog">
      <div class="modal-mask"></div>
      <div class="modal-wrapper">
        <div class="modal-container">
          <h2>添加用户</h2>
          <form>
            <div>
              <label for="name">姓名:</label>
              <input type="text" id="name" v-model="newUser.name">
            </div>
            <div>
              <label for="email">邮箱:</label>
              <input type="email" id="email" v-model="newUser.email">
            </div>
            <div>
              <label for="phone">电话:</label>
              <input type="text" id="phone" v-model="newUser.phone">
            </div>
            <div>
              <button type="submit" @click.prevent="addUser()">添加用户</button>
              <button @click="hideAddUserForm()">关闭</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        { id: 1, name: '张三', email: 'zhangsan@example.com', phone: '13800000001' },
        { id: 2, name: '李四', email: 'lisi@example.com', phone: '13800000002' },
        { id: 3, name: '王五', email: 'wangwu@example.com', phone: '13800000003' }
      ],
      showAddUserDialog: false,
      newUser: {
        name: '',
        email: '',
        phone: ''
      }
    }
  },
  methods: {
    showAddUserForm() {
      this.showAddUserDialog = true
    },
    hideAddUserForm() {
      this.showAddUserDialog = false
      // 清空表单数据
      this.newUser = {
        name: '',
        email: '',
        phone: ''
      }
    },
    addUser() {
      // 在这里编写将用户数据提交到后端的代码
      console.log(this.newUser)
      // 提交成功后，将新用户添加到用户列表中
      this.userList.push({
        id: this.userList.length + 1,
        name: this.newUser.name,
        email: this.newUser.email,
        phone: this.newUser.phone
      })
      // 清空表单数据并关闭弹窗
      this.hideAddUserForm()
    }
  }
}
</script>

在这个示例代码中，我们创建了一个包含用户列表和添加用户按钮的Vue组件。当用户单击“添加用户”按钮时，将会触发 `showAddUserForm` 方法，该方法将会设置 `showAddUserDialog` 属性为 `true`，从而显示弹窗。在弹窗中，我们创建了一个表单，用于添加新用户信息。当用户单击“添加用户”按钮时，将会触发 `addUser` 方法，该方法将会将新用户添加到用户列表中，并清空表单数据并关闭弹窗。

当然，这只是一个非常简单的示例代码，您需要根据您的实际需求进行修改和扩展。