vue通过js里调用定义弹框

定义弹窗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 })
})

vue通过js里调用定义弹框相关推荐

Js简朴原生实现弹框
Js简朴原生实现弹框 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
vue 定义全局弹框_用vue/react写一个全局提示弹框
vue的实现方法 1.写一个Toast组件 Toast.vue {{title}} {{content}} {{btn}} export default { name: "Toast&quo ...
js 关闭页面时弹框提醒
关闭页面时弹框提醒在做vue项目时一个可编辑的详情页面需要在离开它的时候,根据页面是否改动的情况来判断是否要离开页面,一开始我只是在beforeRouteLeave里面调用的==window.con ...
vue + elementui 通过父子组件实现弹框
在子组件中编写弹窗,在父组件中引用弹窗文章目录编写子组件编写父组件把子组件的弹窗引入到父组件中引入子组件方法注册子组件通过$emit把子组件的值传入到父组件中父组件接收子组件传来的值 ...
ant design vue：upload打开选择文件弹框前弹出确认框
看antd文档,刚开始我用得beforeUpload来实现,勉强能完成我想要的功能,但是流程上不完美,需要先选择了文件,才能弹出确认框,但是我的确认框其实跟文件没有关系,我想要先弹确认框再打开文件选择 ...
用js来实现自定义弹框
前言:个人作业上传(大家可参考但不可转载),实现将弹框的样式统一封装在一个对象中方便后续的修改. <!DOCTYPE html> <html lang="en"& ...
vue字符串逗号切割并换行弹框展示
<el-dialog title="错误消息" :visible.sync="errorDialogVisible" width="30%&qu ...
Vue 自定义一个全局弹框组件
前文:其实element ui有提供this.$mesage和this.$notify弹框组件可供使用,但是我们的ui设计的样式以及布局还是不完全一样的,为了达到100%的呈现效果,所以自己写了一个全 ...
前端学习（2687）：重读vue电商网站8之设置弹框提示组件
首先,在 element.js 中导入弹框提示组件,但是它的配置与其它组件不一样,它需要进行全局挂载. 全局导入后,我们就可以在我们的登录组件 login.vue 中通过 this来访问弹框提示组件了 ...

vue通过js里调用定义弹框

定义弹窗register.vue

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

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

vue通过js里调用定义弹框相关推荐

最新文章

热门文章