Vue.extend 登录注册模态框的实现


Posted in Vue.js onDecember 29, 2020

模态框是我们 UI 控件中一个很重要的组件,使用场景有很多种,我们在 Vue 组件中创建模态框组件而用到的一个知识点是利用 Vue.extend 来创建。

文档中的解释是

Vue.extend 登录注册模态框的实现

在最近在做一个常用的类似下面的 登录/注册 业务场景时,利用 Vue.extend 来改善我们的代码,使我们代码逻辑更清晰化。

Vue.extend 登录注册模态框的实现

需求:点击登录或注册出现各自的模态框。

我们对于这种常见的登录注册业务,一般都是分为 Sigin.vueRegister.vue 两个组件,然后把两个组件写入 App.vue 组件中,或者是 layout.vue 组件中。

原来的这种使用,对于我们的整块的登录注册逻辑是分散的,一些需要登录或者是权限的逻辑,可能都需要特意去提取一个 Visible 来控制我们的登录框。

使用 Vue.extend 可以达到统一接口,不用逻辑分散,下面的示例,仅作参考,不了解该 api 使用的可以了解下,而了解的,欢迎指导:smiley:

组件

新建 LoginModel 目录,新建 Sigin.vueRegister.vue 两个组件

<template>
 <div>登录</div>
</template>

<template>
 <div>注册</div>
</template>

再新建 index.vue 组件

<template>
 <div v-if="show">
  <Sigin v-if="type === 'sigin'" @sigin="loginCallback" />
  <Register v-if="type === 'register'" @register="loginCallback" />
 </div>
</template>

<script>
import Sigin from "./sigin";
import Register from "./register";
export default {
 components: {
  Register,
  Sigin
 },
 data() {
  return {
   show: false,
   type: "sigin"
  };
 }
};
</script>

创建子类

新建 index.js ,导入我们的 index.vue

import Vue from "vue";
import ModalCops from "./index.vue";

const LoginModal = Vue.extend(ModalCops); // 创建 Vue 子类

let instance;

const ModalBox = (options = {}) => {
 if (instance) {
  instance.doClose();
 }
 // 实例化
 instance = new LoginModal({
  data: {
   show: true, // 实例化后显示
   ...options
  }
 });
 instance.$mount();
 document.body.appendChild(instance.$el); // 将模态框添加至 body
 return instance;
};

// 对应的登录
ModalBox.sigin = () => {
 return ModalBox({
  type: "sigin"
 });
};

ModalBox.register = () => {
 return ModalBox({
  type: "register"
 });
};

export default {
 install(Vue) {
  Vue.prototype.$loginer = ModalBox;
 }
};

创建完成后,我们可以在入口挂载到 Vue 实例上

// main.js
import LoginModal from "./components/LoginModal";

Vue.use(LoginModal);

在需要登录/注册的地方只用调用

<div>
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="onLogin('sigin')">登录</a>
	/
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="onLogin('register')">注册</a>
</div>

onLogin(type) {
 this.$loginer({
  type
 })
}

效果如下

Vue.extend 登录注册模态框的实现

验证事件

我们都知道模态框需要关闭事件,而像这种业务的关闭事件必然是需要验证提交信息,所以我们需要加上关闭回调函数。

修改 Sigin.vueRegister.vue 两个组件,添加事件

// Sigin.vue
<template>
 <div>
  <button @click="onClick">登录确认</button>
 </div>
</template>

<script>
export default {
 name: "Sigin",
 methods: {
  onClick() {
   this.$emit("sigin");
  }
 }
};
</script>

// Register.vue
<template>
 <button @click="onClick">注册确认</button>
</template>

<script>
export default {
 name: "Register",
 methods: {
  onClick() {
   this.$emit("register");
  }
 }
};
</script>

修改 index.vue 添加 $emit 事件

<template>
 <div v-if="show">
  <Sigin v-if="type === 'sigin'" @sigin="loginCallback" />
  <Register v-if="type === 'register'" @register="loginCallback" />
 </div>
</template>

<script>
import Sigin from "./sigin";
import Register from "./register";
export default {
 components: {
  Register,
  Sigin
 },
 data() {
  return {
   show: false,
   type: "sigin"
  };
 },
 methods: {
  loginCallback() {
   if (!this.ok) return;
   this.ok().then(valid => {
    if (valid) {
     this.doClose();
    }
   });
  },
  doClose() {
   this.show = false;
  }
 }
};
</script>

修改 index.js 文件

import Vue from "vue";
import ModalCops from "./index.vue";

const LoginModal = Vue.extend(ModalCops);

let instance;

const ModalBox = (options = {}) => {
 if (instance) {
  instance.doClose();
 }
 instance = new LoginModal({
  data: {
   show: true,
   ...options
  }
 });
 instance.ok = () => {
  return new Promise(resolve => {
   const before = options.ok ? options.ok() : false;
   if (before && before.then) {
    before.then(
     () => resolve(true),
     () => {
      console.log("reject");
     }
    );
   } else if (typeof before === "boolean" && before !== false) {
    resolve(true);
   }
  });
 };
 instance.$mount();
 document.body.appendChild(instance.$el);
 return instance;
};

ModalBox.sigin = ok => {
 return ModalBox({
  type: "sigin",
  ok
 });
};

ModalBox.register = ok => {
 return ModalBox({
  type: "register",
  ok
 });
};

ModalBox.close = () => {
 instance.doClose();
 instance.show = false;
};

export default {
 install(Vue) {
  Vue.prototype.$loginer = ModalBox;
 }
};

使用回调

onLogin(type) {
 const funcs = {
  sigin: () => {
   console.log("登录请求");
  },
  register: () => {
   console.log("注册请求");
  }
 };
 this.$loginer({
  type,
  ok: () => {
   return new Promise((resolve, reject) => {
    // isOk 验证数据是否正确
    if (this.isOk) {
     funcs[type]();
     resolve();
    } else {
     reject();
    }
   });
  }
 });
}

效果如下

Vue.extend 登录注册模态框的实现

本文代码地址

到此这篇关于Vue.extend 登录注册模态框的实现的文章就介绍到这了,更多相关Vue.extend 登录注册模态框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
vue实现简易的双向数据绑定
Dec 29 #Vue.js
vue中配置scss全局变量的步骤
Dec 28 #Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 #Vue.js
Vue仿百度搜索功能
Dec 28 #Vue.js
vue中watch的用法汇总
Dec 28 #Vue.js
浅析vue中的nextTick
Dec 28 #Vue.js
Vue实现省市区三级联动
Dec 27 #Vue.js
You might like
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
php实现字符串翻转的方法
2015/03/27 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
基于jquery的气泡提示效果
2010/05/31 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
js尾调用优化的实现
2019/05/23 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
python实现发送邮件功能
2017/07/22 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Python异常的检测和处理方法
2018/10/26 Python
python3调用windows dos命令的例子
2019/08/14 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
个人求职信范例
2014/01/29 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
承诺书的格式范文
2014/03/28 职场文书
班级标语大全
2014/06/21 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
高中家长意见怎么写
2015/06/03 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
初二英语教学反思
2016/02/15 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python