利用Vue.extend怎么制作一個登錄注冊框-創(chuàng)新互聯(lián)

本篇文章為大家展示了利用Vue.extend 怎么制作一個登錄注冊框，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)專注骨干網(wǎng)絡(luò)服務(wù)器租用十余年，服務(wù)更有保障！服務(wù)器租用，成都服務(wù)器托管 成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪問。靈活、實現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。

模態(tài)框是我們UI 控件中一個很重要的組件，使用場景有很多種，我們在 Vue 組件中創(chuàng)建模態(tài)框組件而用到的一個知識點(diǎn)是利用Vue.extend 來創(chuàng)建。

文檔中的解釋是

在最近在做一個常用的類似下面的登錄/注冊 業(yè)務(wù)場景時，利用Vue.extend 來改善我們的代碼，使我們代碼邏輯更清晰化。

需求：點(diǎn)擊登錄或注冊出現(xiàn)各自的模態(tài)框。

我們對于這種常見的登錄注冊業(yè)務(wù)，一般都是分為Sigin.vue 和Register.vue 兩個組件，然后把兩個組件寫入 App.vue 組件中，或者是layout.vue 組件中。

原來的這種使用，對于我們的整塊的登錄注冊邏輯是分散的，一些需要登錄或者是權(quán)限的邏輯，可能都需要特意去提取一個Visible 來控制我們的登錄框。

使用Vue.extend 可以達(dá)到統(tǒng)一接口，不用邏輯分散，下面的示例，僅作參考，不了解該 api 使用的可以了解下，而了解的，歡迎指導(dǎo):smiley:

組件

新建LoginModel 目錄，新建Sigin.vue 和Register.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>

創(chuàng)建子類

新建index.js ，導(dǎo)入我們的index.vue

import Vue from "vue";
import ModalCops from "./index.vue";

const LoginModal = Vue.extend(ModalCops); // 創(chuàng)建 Vue 子類

let instance;

const ModalBox = (options = {}) => {
 if (instance) {
  instance.doClose();
 }
 // 實例化
 instance = new LoginModal({
  data: {
   show: true, // 實例化后顯示
   ...options
  }
 });
 instance.$mount();
 document.body.appendChild(instance.$el); // 將模態(tài)框添加至 body
 return instance;
};

// 對應(yīng)的登錄
ModalBox.sigin = () => {
 return ModalBox({
  type: "sigin"
 });
};

ModalBox.register = () => {
 return ModalBox({
  type: "register"
 });
};

export default {
 install(Vue) {
  Vue.prototype.$loginer = ModalBox;
 }
};

創(chuàng)建完成后，我們可以在入口掛載到 Vue 實例上

// main.js
import LoginModal from "./components/LoginModal";

Vue.use(LoginModal);

在需要登錄/注冊的地方只用調(diào)用

<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
 })
}

效果如下

驗證事件

我們都知道模態(tài)框需要關(guān)閉事件，而像這種業(yè)務(wù)的關(guān)閉事件必然是需要驗證提交信息，所以我們需要加上關(guān)閉回調(diào)函數(shù)。

修改Sigin.vue 和Register.vue 兩個組件，添加事件

// Sigin.vue
<template>
 <div>
  <button @click="onClick">登錄確認(rèn)</button>
 </div>
</template>

<script>
export default {
 name: "Sigin",
 methods: {
  onClick() {
   this.$emit("sigin");
  }
 }
};
</script>

// Register.vue
<template>
 <button @click="onClick">注冊確認(rèn)</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;
 }
};

使用回調(diào)

onLogin(type) {
 const funcs = {
  sigin: () => {
   console.log("登錄請求");
  },
  register: () => {
   console.log("注冊請求");
  }
 };
 this.$loginer({
  type,
  ok: () => {
   return new Promise((resolve, reject) => {
    // isOk 驗證數(shù)據(jù)是否正確
    if (this.isOk) {
     funcs[type]();
     resolve();
    } else {
     reject();
    }
   });
  }
 });
}

上述內(nèi)容就是利用Vue.extend 怎么制作一個登錄注冊框，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標(biāo)題：利用Vue.extend怎么制作一個登錄注冊框-創(chuàng)新互聯(lián)
URL地址：http://muchs.cn/article16/dpiodg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、標(biāo)簽優(yōu)化、小程序開發(fā)、搜索引擎優(yōu)化、網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)