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编写简单的购物车功能
Jan 08 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
Python的Urllib库的基本使用教程
2015/04/30 Python
深入理解python中的atexit模块
2017/03/07 Python
Python处理Excel文件实例代码
2017/06/20 Python
zookeeper python接口实例详解
2018/01/18 Python
flask中过滤器的使用详解
2018/08/01 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
Django实现文件上传和下载功能
2019/10/06 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
运动会广播稿200米
2014/01/27 职场文书
明星员工获奖感言
2014/08/14 职场文书
委托培训协议书
2014/11/17 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript