自建vue組件 air-ui (6) -- 建立內置服務組件

時間  2020-01-21
標籤 自建 vue 組件 air 建立 內置 服務 简体版
原文   原文鏈接

前言

經過 自建vue組件 air-ui (5) -- 建立第一個組件 Button 咱們已經知道怎麼建立一個標籤類型的組件了。本節咱們就繼續講怎麼建立服務類型的組件。javascript

建立服務類型的組件

以 notification 這個組件爲例，他就是一個典型的內置服務組件。其實就是綁定到Vue的原型上，當作全局方法來使用。css

設置 vue 的全局方法其實很常見，好比發 ajax 請求時喜歡用axios掛載到vue原型上，以下：html

// 1 引入vue和axios
import Vue from 'vue'
import axios from 'axios'
// 2 對axios的一些封裝
// code ...

// 3 而後掛載到原型上
Vue.prototype.$axios = axios
複製代碼

用的時候就直接上 this.$axiosvue

// 用axios.get()方法能夠這樣用
this.$axios.get()
複製代碼

這樣確實方便，不用每一個用到 axios 的組件都去引入。 這種方法其實很簡單，而內置的服務也是差很少的原理，只不過會涉及到一些 dom 的操做, 以 notification 爲例，這邊能夠看效果: element-ui 的 Notification 通知java

這邊主要分爲三個步驟，具體的目錄結構以下：ios

components/
|    |--- notification/
|    |     |--- src/
|    |     |     |--- main.js
|    |     |     |--- main.vue
|    |     |--- index.js
複製代碼

建立一個 vue 組件

由於涉及到 dom 操做，因此第一步就是先建立一個 notification 對應的 vue 組件， 就是 notification/src/main.vue:ajax

<template>
  <transition name="air-notification-fade">
    <div
      :class="['air-notification', customClass, horizontalClass]"
      v-show="visible"
      :style="positionStyle"
      @mouseenter="clearTimer()"
      @mouseleave="startTimer()"
      @click="click"
      role="alert"
    >
      <i
        class="air-notification__icon"
        :class="[ typeClass, iconClass ]"
        v-if="type || iconClass">
      </i>
      <div class="air-notification__group" :class="{ 'is-with-icon': typeClass || iconClass }">
        <h2 class="air-notification__title" v-text="title"></h2>
        <div class="air-notification__content" v-show="message">
          <slot>
            <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
            <p v-else v-html="message"></p>
          </slot>
        </div>
        <div
          class="air-notification__closeBtn air-icon-close"
          v-if="showClose"
          @click.stop="close"></div>
      </div>
    </div>
  </transition>
</template>

<script type="text/babel">
  let typeMap = {
    success: 'success',
    info: 'info',
    warning: 'warning',
    error: 'error'
  };

  export default {
    data() {
      return {
        visible: false,
        title: '',
        message: '',
        duration: 4500,
        type: '',
        showClose: true,
        customClass: '',
        iconClass: '',
        onClose: null,
        onClick: null,
        closed: false,
        verticalOffset: 0,
        timer: null,
        dangerouslyUseHTMLString: false,
        position: 'top-right'
      };
    },

    computed: {
      typeClass() {
        return this.type && typeMap[this.type] ? `air-icon-${ typeMap[this.type] }` : '';
      },

      horizontalClass() {
        return this.position.indexOf('right') > -1 ? 'right' : 'left';
      },

      verticalProperty() {
        return /^top-/.test(this.position) ? 'top' : 'bottom';
      },

      positionStyle() {
        return {
          [this.verticalProperty]: `${ this.verticalOffset }px`
        };
      }
    },

    watch: {
      closed(newVal) {
        if (newVal) {
          this.visible = false;
          this.$el.addEventListener('transitionend', this.destroyElement);
        }
      }
    },

    methods: {
      destroyElement() {
        this.$el.removeEventListener('transitionend', this.destroyElement);
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      },

      click() {
        if (typeof this.onClick === 'function') {
          this.onClick();
        }
      },

      close() {
        this.closed = true;
        if (typeof this.onClose === 'function') {
          this.onClose();
        }
      },

      clearTimer() {
        clearTimeout(this.timer);
      },

      startTimer() {
        if (this.duration > 0) {
          this.timer = setTimeout(() => {
            if (!this.closed) {
              this.close();
            }
          }, this.duration);
        }
      },
      keydown(e) {
        if (e.keyCode === 46 || e.keyCode === 8) {
          this.clearTimer(); // detele 取消倒計時
        } else if (e.keyCode === 27) { // esc關閉消息
          if (!this.closed) {
            this.close();
          }
        } else {
          this.startTimer(); // 恢復倒計時
        }
      }
    },
    mounted() {
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          if (!this.closed) {
            this.close();
          }
        }, this.duration);
      }
      document.addEventListener('keydown', this.keydown);
    },
    beforeDestroy() {
      document.removeEventListener('keydown', this.keydown);
    }
  };
</script>
複製代碼

具體邏輯不細說了，他就是普通的一個 vue 組件，無非就是一個 dom 結構，還有就是各類事件和參數的觸發和監聽，不難理解，能夠理解爲 notification 這個組件的 dom 渲染。element-ui

構建 notification 的結構體

既然 dom 已經準備好了，接下來只要構建 Notification 的結構體就好了，而後讓這個結構體的各類方法去操做 dom 就好了。 因此 notification/src/main.js:axios

import Vue from 'vue';
import Main from './main.vue';
import merge from '../../../../src/utils/merge';
import { PopupManager } from '../../../../src/utils/popup';
import { isVNode } from '../../../../src/utils/vdom';
const NotificationConstructor = Vue.extend(Main);

let instance;
let instances = [];
let seed = 1;

const Notification = function(options) {
  if (Vue.prototype.$isServer) return;
  options = merge({}, options);
  const userOnClose = options.onClose;
  const id = 'notification_' + seed++;
  const position = options.position || 'top-right';

  options.onClose = function() {
    Notification.close(id, userOnClose);
  };

  instance = new NotificationConstructor({
    data: options
  });

  if (isVNode(options.message)) {
    instance.$slots.default = [options.message];
    options.message = 'REPLACED_BY_VNODE';
  }
  instance.id = id;
  instance.$mount();
  document.body.appendChild(instance.$el);
  instance.visible = true;
  instance.dom = instance.$el;
  instance.dom.style.zIndex = PopupManager.nextZIndex();

  let verticalOffset = options.offset || 0;
  instances.filter(item => item.position === position).forEach(item => {
    verticalOffset += item.$el.offsetHeight + 16;
  });
  verticalOffset += 16;
  instance.verticalOffset = verticalOffset;
  instances.push(instance);
  return instance;
};

['success', 'warning', 'info', 'error'].forEach(type => {
  Notification[type] = options => {
    if (typeof options === 'string' || isVNode(options)) {
      options = {
        message: options
      };
    }
    options.type = type;
    return Notification(options);
  };
});

Notification.close = function(id, userOnClose) {
  let index = -1;
  const len = instances.length;
  const instance = instances.filter((instance, i) => {
    if (instance.id === id) {
      index = i;
      return true;
    }
    return false;
  })[0];
  if (!instance) return;

  if (typeof userOnClose === 'function') {
    userOnClose(instance);
  }
  instances.splice(index, 1);

  if (len <= 1) return;
  const position = instance.position;
  const removedHeight = instance.dom.offsetHeight;
  for (let i = index; i < len - 1; i++) {
    if (instances[i].position === position) {
      instances[i].dom.style[instance.verticalProperty] =
        parseInt(instances[i].dom.style[instance.verticalProperty], 10) - removedHeight - 16 + 'px';
    }
  }
};

Notification.closeAll = function() {
  for (let i = instances.length - 1; i >= 0; i--) {
    instances[i].close();
  }
};

export default Notification;
複製代碼

這個邏輯也不難理解，主要分一下幾個步驟：bash

  1. 以前建立的 vue 組件，經過 Vue.extend 生成一個 子類
const NotificationConstructor = Vue.extend(Main);
複製代碼

這個能夠理解爲 notification 的構造函數，只要 new 初始化這個函數，就能夠生成一個 notification 的實例化對象:

instance = new NotificationConstructor({
data: options
});
複製代碼

因此 Notification 這個對象其實就是工廠函數，只要被調用，那麼就會實例化一個擁有 notification vue 組件的全新的對象。

  1. 實例化對象進行掛載，而且添加到 body 中，顯示出來
instance.$mount();  //沒有 el 參數，就會掛載到一個未掛載的實例,模板將被渲染爲文檔以外的的元素
document.body.appendChild(instance.$el); // 這時候必須使用原生 DOM API 把它插入文檔中
複製代碼
  1. 接下來就是這個 Notification 這個對象的其餘方法，好比 close 之類的，同時還有一個處於閉包狀態的全局對象 instances 來存放這些實例化的對象，並經過 id 對這些實例進行操做

總的來講，邏輯其實並不複雜。

最後的 index.js

最後的 index.js 其實就是導出這個結構體對象，notification/index.js:

import Notification from './src/main.js';
export default Notification;
複製代碼

掛載到 vue 原型

接下來就是掛載了，同樣寫在 components/index.js 的 install 方法中，不過這一次不用 component 語法 而是直接掛載到 vue 原型上:

import Button from './button'
import ButtonGroup from './button-group'
import Notification from './notification'

const components = {
  Button,
  ButtonGroup
}

const install = function (Vue) {
  Object.keys(components).forEach(key => {
    Vue.component(components[key].name, components[key])
  })
  Vue.prototype.$notify = Notification
}

export default {
  install
}
複製代碼

固然也不能忽略了他的 scss 文件，因此 src/styles/index.scss 也要加上:

@import "./base.scss";
@import "./button.scss";
@import "./button-group.scss";
@import "./notification.scss";
複製代碼

寫例子了

接下來就是寫例子了，在 home.vue 補上例子:

<air-button plain @click="open1">可自動關閉</air-button>
<air-button plain @click="open2">不會自動關閉</air-button>
<air-button plain @click="open3">成功</air-button>
<air-button plain @click="open4">警告</air-button>
<air-button plain @click="open5">消息</air-button>
<air-button plain @click="open6">錯誤</air-button>
複製代碼

script 補上對應的觸發方法:

<script>
  export default {
    data () {
      return {
        msg: `AIR-UI  -  基於vue2.x，可複用UI組件`
      }
    },
    methods: {
      open1() {
        const h = this.$createElement;
        this.$notify({
          title: '標題名稱',
          message: h('i', { style: 'color: teal'}, '這是一條會消失的提示文案')
        });
      },
      open2() {
        this.$notify({
          title: '提示',
          message: '這是一條不會自動關閉的消息',
          duration: 0
        });
      },
      open3() {
        this.$notify({
          title: '成功',
          message: '這是一條成功的提示消息',
          type: 'success'
        });
      },
      open4() {
        this.$notify({
          title: '警告',
          message: '這是一條警告的提示消息',
          type: 'warning'
        });
      },
      open5() {
        this.$notify.info({
          title: '消息',
          message: '這是一條消息的提示消息'
        });
      },
      open6() {
        this.$notify.error({
          title: '錯誤',
          message: '這是一條錯誤的提示消息'
        });
      }
    }
  }
</script>
複製代碼

注意調用的方式: this.$nofify ,接下來就能夠看效果了:

1

這樣子一個內置服務的組件，就建立成功了。

注意

這邊要注意一點的是，內置服務的組件，不能使用 Vue.use() 來調用，不然項目運行會默認執行一次，即便沒有使用它們，舉個例子，好比我在 src/main.js 改爲換成對 notification 顯示掛載和 use 的引用：

import Notification from './components/notification'

Vue.prototype.$notify = Notification
Vue.use(Notification)
複製代碼

這樣子，編譯是沒問題的，可是我加載頁面的時候，會默認彈出一個空的彈出框？？

1

這個是由於我調用 use 的時候，就會默認執行一次 Notification 對象，從而實例化一個 notification 的對象，可是由於沒有傳入任何參數，因此是一個空的彈出框。 因此對於這種內置服務組件，好比 Notification, Message, MessageBox, 只要有綁定到 vue 原型對象就好了，不用 use 來引入。

總結

內置服務組件的建立，大概就這樣。下節咱們講怎麼建立一個指令組件。

系列文章:

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程