vue通过js里调用定义弹框

最新推荐文章于 2024-08-01 12:56:26 发布

红茶两块五

最新推荐文章于 2024-08-01 12:56:26 发布

阅读量1k

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/weixin_38417148/article/details/120852866

版权

此博客展示了如何在Vue中定义并注册一个弹窗组件（register.vue），该组件包含用户注册信息的表单，使用了Element UI库。在弹窗中，有用户姓名字段，并提供了确认提交注册信息的确认对话框。弹窗的显示和验证逻辑都在methods内实现。此外，还定义了一个pop.js文件，用于将弹窗组件安装到Vue实例中，并在路由守卫beforeEach中调用，确保在路由跳转前展示注册信息。

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

定义弹窗register.vue

<template>
  <el-dialog title="注册信息" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false"
    :close-on-press-escape="false" :show-close="false">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="20">
          <el-form-item label="用户姓名" required prop="userName">
            <el-input v-model="form.userName" :disabled="true" maxlength="10"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onsubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    perfectUserProfile
  } from "@/api/sysuser/user";

  export default {
    data() {
      return {
        dialogVisible: false,
        form: {},
        // 表单校验
        rules: {
          userName: [{
            required: true,
            message: "用户姓名不能为空",
            trigger: 'blur'
          }],
          ]
        }
      };
    },
    methods: {
      show() {
        this.dialogVisible = true
      },
      onsubmit() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$confirm('请确认提交注册信息？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
             perfectUserProfile(this.form).then(response => {
               this.msgSuccess("注册成功");
               this.dialogVisible = false;
             });
            }).catch(() => {});
          }
        });
      }
    }
  };
</script>

<style lang="scss">
</style>

定义pop.js，将弹窗页面注册到Vue

import Vue from 'vue'
import register from './register.vue'

const PopupBox = Vue.extend(register)

register.install = function (data) { 
  let instance = new PopupBox({ data }).$mount() 
  document.body.appendChild(instance.$el) 
  Vue.nextTick(() => { 
    instance.show() 
  })
}

export default register

在需要调用的demo.js文件里面引用

import router from './router'
//需要完善信息
import pop from "@/components/register/pop.js";

router.beforeEach((to, from, next) => {
	pop.install({ next: next })
})