element-ui弹出框模板

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

<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>