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 25 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue实现登录功能
Dec 31 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 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无限极分类的案例教程
2016/05/09 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
Python 命令行非阻塞输入的小例子
2013/09/27 Python
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
详解Python3的TFTP文件传输
2018/06/26 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
python中dict使用方法详解
2019/07/17 Python
用Python解数独的方法示例
2019/10/24 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
简历中自我评价分享
2013/10/09 职场文书
行政助理求职自荐信
2013/10/26 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
大一军训感言
2014/01/09 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android