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防抖与节流
Nov 24 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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中smarty模板条件判断用法实例
2015/06/11 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
firefo xml 读写实现js代码
2009/06/11 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
Python中的lstrip()方法使用简介
2015/05/19 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
Python 错误和异常代码详解
2018/01/29 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
Random 在 Python 中的使用方法
2018/08/09 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
产品促销活动策划书
2014/01/15 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书