Vue进阶---写一个类似Element中Message的插件

1. 创建项目, 安装项目并启动项目

vue init webpack vue-ui
cd vue-ui
cnpm install
npm run dev

2. 项目文件夹结构
3. 在src中新建插件文件夹UI-Plugin，放置我们创建的插件，结构如下:

其中：
UI-Plugin --> message 放置message组件
UI-Plugin --> index.js 为所有插件的出口

4. 实现message组件，实现功能以及动画

<template>
  <transition name='fade'>
    <div class="ui-message" v-if="show">
      {{text}}
    </div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      show: false
    }
  },
  props: {
    text: {
      type: String,
      default: 'message context'
    }
  },
  watch: {
    // 自动关闭
    show (val, oldVal) {
      if (val) {
        setTimeout(() => {
          this.show = false
        }, 3000)
      }
    }
  }
}
</script>

<style scoped>
  .ui-message {
    position: fixed;
    left: 50%;
    top: 0;
    z-index: 999;
    transform: translate(-50%, 0);
    padding: 8px 15px;
    min-width: 200px;
    text-align: center;
    box-shadow: 0 5px 20px #ddd;
    background-color: white;
  }
  .fade-enter {
    opacity: 0;
    transform: translate(-50%, -30px);
  }
  .fade-enter-active {
    transition: all .5s;
  }
  .fade-enter-to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .fade-leave {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .fade-leave-active {
    transition: all .5s;
  }
  .fade-leave-to {
    opacity: 0;
    transform: translate(-50%, -30px);
  }
</style>

5. 创建插件，在index.js中添加$message全局方法

import Message from './message/index.vue'

export default {
  install (Vue, options) {
    Vue.prototype.$message = function (opts) {
      // 继承Message组件
      const MessageConstructor = Vue.extend(Message)
      // 创建一个新元素
      const messageWrap = document.createElement('div')
      messageWrap.className = 'message-wrap'
      // 实例化Message组件，并将组件挂在到新创建的messageWrap元素上
      const messageInstace = new MessageConstructor({
        el: messageWrap
      })
      // 或者使用 messageInstace.$mount(messageWrap)挂载
      document.body.appendChild(messageInstace.$el)
      // 显示组件内容
      if (opts && opts.text) {
        messageInstace.text = opts.text
      }
      messageInstace.show = true
    }
  }
}

6. 在项目的入口文件main.js中引入插件
   
7. 至此我们可以在项目中任何组件中调用该插件中的方法和组件了
   

---

该插件功能较简单，重在说明插件的开发过程，更多详细的内容，请移步官网