vue+elementui自定义Dialog组件之登录弹框话框实现(实现不同vue组件关联)

elementui提供一个可实现弹框的组件el-dialog,一般会将弹框写在一个vue文件，通过el-dialog套用类似于这种

<el-button round @click="dialogFormVisible = true">登录</el-button>
<el-dialog title="登录" :visible.sync="dialogFormVisible" center>

   <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">

 <el-form-item label="账号" prop="num">
    <el-input v-model.number="ruleForm2.num"></el-input>
  </el-form-item>

  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
  </el-form-item>

</el-form>

  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false; resetForm('ruleForm2')">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm2')">登 录</el-button>
  </div>
</el-dialog>

一般不会造成问题，但是写在同一个vue界面，代码比较臃肿，下面演示一下写在不同的vue文件实现调用

首先在navShow.vue的页面写入如下代码

<el-button round @click="submitForm()">登录</el-button>
<!--仔细阅读Dialog的各个属性参数，会影响到布局排版，例如遇到了一个大坑就是没有设置:append-to-body='true'，导致遮罩遮盖整个页面，:lock-scroll="false"没有设置的话，点击前后会感觉到头部导航栏的移动，体验性很不好！！还有设置dialog的宽度width="40%"前面不用加冒号：-->
<el-dialog title="登陆" :visible.sync="dialogTableVisible" center :append-to-body='true' :lock-scroll="false" width="30%">
      <login-name></login-name>
    </el-dialog>
<script>
import LoginName  from '../main/Login.vue';
export default {
    components: {LoginName},
    name: "navShow",
    data() {
      return {
        dialogTableVisible: false
       }
    }     
    methods:{
        submitForm(){
            this.dialogTableVisible=true;//默认页面不显示为false,点击按钮将这个属性变成true
        }
    }
}
</script>

注意：很多人在写完这个，迫不及待地去点击登陆按钮时报错：

那么这个<login-name>这个组件是怎那么来的呢

其实他就是：components: {LoginName},里的LoginName,vue会将其自动转换成为驼峰命名法变成一个组件，在webstorm输入<符号，组件信息会有提醒的。当然个人建议在弹出的vue文件里的name，也要和这个相同

下面介绍一下所弹出的vue页面，这个其实和正常的vue文件一样

<template>
  <section>
    <el-container>
        <el-form label-width="120px" :model="User" :rules="Rules" ref="User" >
          <el-row>
            <el-col>
              <el-form-item label="账号" prop="name">
                <el-input v-model.number="User.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="User.pass" auto-complete="new-password"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="记住密码" prop="delivery">
                <el-switch v-model="User.delivery"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <span class="pwwd">
            <a href="">忘记密码？</a>
            <a href="">还没账号,注册一个</a>
          </span>
        </el-form>

    </el-container>
    <div slot="footer" class="dialog-footer">
      <el-button >取 消</el-button>
      <el-button type="primary" @click="submitForm()">登 录</el-button>
    </div>
  </section>
</template>
export default {
    name: 'LoginName',//这个LoginName最好和引入的vue的LoginName相同
}

vue+elementui自定义Dialog组件之登录弹框话框实现(实现不同vue组件关联)

猜你喜欢