element-ui弹出框模板

    <el-dialog
      width="650px"
      append-to-body
               :show-close="false"
               :modal="false" :visible.sync="dialogRegisterVisible">
      <el-form v-show="!isLogin" ref="registerForm" :rules="registerRules" size="small" :model="registerForm"
               label-width="120px">
        <div style="display: flex;justify-content: center">
          <el-form-item label="用户名：" prop="name">
            <el-input style="width:15rem" v-model="registerForm.name" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex;justify-content: center">
          <el-form-item label="手机号码：" prop="phone">
            <el-input style="width:15rem" v-model="registerForm.phone" autocomplete="new-password"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex;justify-content: center">

          <el-form-item label="密码：" prop="pass">
            <el-input style="width:15rem" type="password" v-model="registerForm.pass"
                      autocomplete="new-password"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex;justify-content: center">

          <el-form-item label="确认密码：" prop="checkPass">
            <el-input style="width:15rem" type="password" v-model="registerForm.checkPass"
                      autocomplete="off"></el-input>
          </el-form-item>
        </div>
      </el-form>

      <el-form v-show="isLogin" ref="loginForm" :rules="loginRules" size="small" :model="loginForm" label-width="120px">
        <div style="display: flex;justify-content: center">
          <el-form-item label="用户名：" prop="name">
            <el-input style="width:15rem" v-model="loginForm.name" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex;justify-content: center">
          <el-form-item label="密码：" prop="pass">
            <el-input style="width:15rem" type="password" v-model="loginForm.pass" autocomplete="off"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="title" style="display: flex;justify-content: center;align-items: center" class="dialog-footer">
        <el-button :type="!isLogin?'primary':''" @click="isLogin = false">注册</el-button>
        <el-button :type="isLogin?'primary':''" @click="isLogin=true">登录</el-button>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRegisterVisible = false">取 消</el-button>
        <el-button type="primary" @click="registerOrLogin">确 定</el-button>
      </div>
    </el-dialog>