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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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
getimagesize获取图片尺寸实例
2014/11/15 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
python文件和目录操作方法大全(含实例)
2014/03/12 Python
在Python中编写数据库模块的教程
2015/04/29 Python
Python yield 使用浅析
2015/05/28 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
常见的软件开发流程有哪些
2015/11/14 面试题
岗位说明书范文
2014/05/07 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
放飞理想演讲稿
2014/09/09 职场文书
在职员工证明书
2014/09/19 职场文书
公司感谢信范文
2015/01/22 职场文书
2019军训心得体会
2019/06/27 职场文书
MySQL约束超详解
2021/09/04 MySQL
nginx配置指令之server_name的具体使用
2022/08/14 Servers