Vue.extend 登陸註冊模態框

模態框是咱們 UI 控件中一個很重要的組件，使用場景有不少種，咱們在 Vue 組件中建立模態框組件而用到的一個知識點是利用 Vue.extend 來建立。
文檔中的解釋是

在最近在作一個經常使用的相似下面的登陸/註冊業務場景時，利用 Vue.extend 來改善咱們的代碼，使咱們代碼邏輯更清晰化。

需求：點擊登陸或註冊出現各自的模態框。

咱們對於這種常見的登陸註冊業務，通常都是分爲 Sigin.vue 和 Register.vue 兩個組件，而後把兩個組件寫入 App.vue 組件中，或者是 layout.vue 組件中。

原來的這種使用，對於咱們的整塊的登陸註冊邏輯是分散的，一些須要登陸或者是權限的邏輯，可能都須要特地去提取一個 Visible 來控制咱們的登陸框。

使用 Vue.extend 能夠達到統一接口，不用邏輯分散，下面的示例，僅做參考，不瞭解該 api 使用的能夠了解下，而瞭解的，歡迎指導😃

組件

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

建立子類

新建 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:;" @click="onLogin('sigin')">登陸</a>
    /
  <a href="javascript:;" @click="onLogin('register')">註冊</a>
</div>

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

效果以下

驗證事件

咱們都知道模態框須要關閉事件，而像這種業務的關閉事件必然是須要驗證提交信息，因此咱們須要加上關閉回調函數。
修改 Sigin.vue 和 Register.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();
        }
      });
    }
  });
}

效果以下

本文代碼地址