利用Vue.extend怎么制作一个登录注册框-创新互联

本篇文章为大家展示了利用Vue.extend 怎么制作一个登录注册框，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联专注骨干网络服务器租用十余年，服务更有保障！服务器租用，成都服务器托管 成都服务器租用，成都服务器托管，骨干网络带宽，享受低延迟，高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。

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

文档中的解释是

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

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

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

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

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

组件

新建LoginModel 目录，新建Sigin.vue 和Register.vue 两个组件

再新建index.vue 组件

创建子类

新建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);

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

 登录
	/
 注册


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

效果如下

验证事件

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

修改Sigin.vue 和Register.vue 两个组件，添加事件

// Sigin.vue




// Register.vue

修改index.vue 添加$emit 事件

修改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怎么制作一个登录注册框-创新互联
当前网址：http://www.fjjierui.cn/article/dpiodg.html