账户登入使用el-popover做弹窗Dialog

不良人&不良帅

已于 2024-01-06 19:10:26 修改

阅读量414

点赞数 6

分类专栏： vue3 文章标签： vue.js elementui javascript

于 2024-01-06 17:02:15 首次发布

本文链接：https://blog.csdn.net/CjiangN/article/details/135428769

版权

vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue.js项目中使用el-popover组件创建一个轻量级的用户登录界面，避免了dialog的表头行，通过ref和函数处理显示和取消操作。

摘要由CSDN通过智能技术生成

从代码的简便，el-popover更优，而且没有dialog的表头行。

//#region 用户登入

//#region 用户登入

const visible = ref(false)
/*  取消*/
const cancelLogon = () => {
  visible.value = false;
}
/*  登入（登入前，校验用户名和密码）*/
const confirmLogon = () => {
  /*  */
  visible.value = false;
}

const logon = reactive({
  name: '',
  password: ''
})

//#endregion

<template>
 <el-popover :visible="visible" placement="right" :width="350">
    <template #reference>
        <el-button @click="visible = true">登入事件</el-button>
    </template>
    <div class="Logon">
        <div>
          <el-row class="row-Logon">
              <el-col :span="6">
                  <el-text>用户名：</el-text>
              </el-col>
              <el-col :span="18">
                  <el-input v-model="logon.name"></el-input>
              </el-col>
           </el-row>
           <el-row class="row-Logon">
                <el-col :span="6">
                  <el-text>密码：</el-text>
                </el-col>
                <el-col :span="18">
                    <el-input v-model="logon.password" show-password></el-input>
                 </el-col>
           </el-row>
       </div>
       <div class="row-Logon">
           <el-button style="width: 100px;" @click="cancelLogon">取消</el-button>
           <el-button style="width: 100px;" type="primary" 
                   @click="confirmLogon">登入</el-button>
       </div>
    </div>
  </el-popover>
</template>