自建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教程