手把手教你撸vue全局组件

在开发vue项目时，经常会用到element UI组件，在全局使用像message，toast，alert等组件得时候会很方便，但是在开发需要UI制定的项目时，就不能使用element UI了，这时就需要自己去开发属于自己的组件库了。 具体的开发方法官网提供了。下面我们就根据官网提供的方法来开发属于我们自己的alert警告组件

1. 首先我们要在src/components文件夹下创建一个alert文件夹，在里面创建两个文件

├── src
│   ├── components
│   │   ├── alert
│   │   │   ├── alert.vue #alert组件
│   │   │   ├── index.js #插件逻辑
复制代码

2. 编写alert组件

<template>
  <transition name="alert-fade">
    <div
      class="ht-message"
      v-if="show"
    >
      <div
        class="ht-model"
        @click="close"
      ></div>
      <div
        class="ht-message-box"
        :style="'width:'+width"
      >
        <div class="ht-message-header">
          <i
            class="iconfont icon-error ht-message-close"
            @click="close"
          ></i>
        </div>
        <div class="ht-message-body">
          {{message}}
        </div>
        <div class="ht-message-footer">
          <slot name="footer">
            <div
              class="ht-message-btn"
              @click="close"
            >
              确定
            </div>
          </slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'Alert',
    props: {
      width: {
        //弹框的宽度
        type: String,
        required: false,
        default: '30%'
      }
    },
    data() {
      return {
        show: false
      }
    },
    methods: {
      close() {
        this.show = false
        this.$el.remove() //再点击关闭得时候要将其移出，（仅在第一种方法中使用）
        this.confirmSure()
      }
    }
  }
</script>

<style scoped lang="less">
  .alert-fade-enter-active,
  .alert-fade-leave-active {
    transition: opacity 0.3s;
  }
  .alert-fade-enter,
  .alert-fade-leave-to {
    opacity: 0;
  }
  .ht-message {
    .ht-model {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 500;
      background: rgba(0, 0, 0, 0.5);
    }
    .ht-message-box {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 501;
      background-color: #fff;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      border-radius: 10px;
      padding: 5px 10px;
      .ht-message-body {
        text-align: center;
        font-size: 18px;
        color: #333;
      }
      .ht-message-header {
        height: 30px;
        .ht-message-close {
          float: right;
          padding: 5px 10px;
          margin: -5px -10px;
          cursor: pointer;
          color: #666;
        }
      }
      .ht-message-footer {
        width: 100%;
        .ht-message-btn {
          margin: 40px auto 30px;
          padding: 0 30px;
          width: 200px;
          height: 40px;
          font-size: 18px;
          color: #fff;
          background-color: #ff3f47;
          -webkit-border-radius: 20px;
          -moz-border-radius: 20px;
          border-radius: 20px;
          line-height: 40px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
</style>

复制代码

3. 现在就要index.js中注册组件并完成业务逻辑了，（==在这里我们要注意，如果我们要在除了vue组件以外的地方使用得话，例如我们封装的api.js里如果需要alert某些请求状态的时候，需要下面第一种写法==）

import AlertComponent from './alert.vue'
import Vue from 'vue'
const Alert = (msg, confirmSure = () => {}) => {
  const Constructor = Vue.extend(AlertComponent) //创建一个alert子实例
  let instance = new Constructor({
    el: document.createElement('div'), //将alert实例挂载到创建的div上
    data() {
      return {
        message: msg, //需要显示的信息
        show: true //在调用alert时显示组件
      }
    },
    methods: {
      confirmSure: confirmSure //点击关闭的时候触发的回调函数
    }
  })
  document.body.appendChild(instance.$el) //添加到body中
}

export default Alert

复制代码

但是如果我们只是在vue组件中使用的话，使用下面第二种注册方法

import AlertComponent from './alert.vue'

const Alert = {
  install(Vue) {
    const Constructor = Vue.extend(AlertComponent) //创建一个alert子实例
    let instance = new Constructor({
      el: document.createElement('div') //将alert实例挂载到创建的div上
    })
    document.body.appendChild(instance.$el) //添加到body中
    //绑定到vue原型上，以供全局使用
    Vue.prototype.$alert = (msg, confirmSure = () => {}) => {
      instance.message = msg //需要显示的信息
      instance.show = true //在调用alert时显示组件
      instance.confirmSure = confirmSure //点击关闭的时候触发的回调函数
    }
  }
}

export default Alert

复制代码

4. 最后我们在main.js引入的时候也需要注意，如果我们要在组件和组件以外的情况下使用alert的话，我们需要这样引入

import Alert from '@/components/alert'
Vue.prototype.$alert = Alert
复制代码

再如果我们只是在vue组件里使用的话，我们要这样引入

import Alert from '@/components/alert'
Vue.use(Alert)
复制代码

5. 最后我们就可以愉快的调用组件了

//调用方法（组件以外的调用方式）
import Alert from '@/components/alert'
Alert('用户会话过期，请重新登录', () => {
    console.log('我被调用了')
})
组件内使用
this.$alert('用户会话过期，请重新登录', () => {
    console.log('我被调用了')
})
复制代码