Vue实现Alert插件

实现alert插件

在Vue中我们可以使用 Vue.component(tagName, options) 进行全局注册，也可以是在组件内部使用 components 选项进行局部组件的注册。

全局组件是挂载在 Vue.options.components 下，而局部组件是挂载在 vm.$options.components 下，这也是全局注册的组件能被任意使用的原因。

有一些全局组件，类似于Message 、Toast 、 Loading 、 Notification 、Alert 通过原型的方式挂载在 Vue 的全局上面。

下面来实现一个简易版 Alert 组件，主要是对思路的一个理解,先上效果图

@/components/alert/src/Alert.vue

<template>
  <transition name="fade">
    <div class="alert-box-wrapper" v-show="show">
      <div class="alert-box">
        <div class="alert-box-header">
          <div class="alert-box-title">{{ title }}</div>
          <div class="alert-box-headerbtn" @click="handleAction('close')">X</div>
        </div>
        <div class="alert-box-content">
          <div class="alert-box-container">{{ message }}</div>
        </div>
        <div class="alert-box-btns">
          <button class="cancel-btn"  @click="handleAction('cancel')">{{ cancelText }}</button>
          <button class="confirm-btn"  @click="handleAction('confirm')">{{ confirmText }}</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Alert',
  data () {
    return {
      title: '标题',
      message: '这是一段提示内容',
      show: false,
      callback: null,
      cancelText: '取消',
      confirmText: '确定'
    }
  },
  methods: {
    handleAction (action) {
      this.callback(action)
      this.destroyVm()
    },
    destroyVm () { // 销毁
      this.show = false
      setTimeout(() => {
        this.$destroy(true)
        this.$el && this.$el.parentNode.removeChild(this.$el)
      }, 500)
    }
  }
}
</script>

<style lang="less" scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to  {
  opacity: 0;
}

.alert-box-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  .alert-box {
    display: inline-block;
    width: 420px;
    padding-bottom: 10px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #303133;
    font-size: 16px;
    text-align: left;
    overflow: hidden;
    .alert-box-header {
      position: relative;
      padding: 15px;
      padding-bottom: 10px;
      .alert-box-title {
        color: #303133;
      }
      .alert-box-headerbtn {
        position: absolute;
        top: 15px;
        right: 15px;
        cursor: pointer;
        color: #909399;
      }
    }
    .alert-box-content {
      padding: 10px 15px;
      color: #606266;
      font-size: 14px;
    }
    .alert-box-btns {
      padding: 5px 15px 0;
      text-align: right;
      .cancel-btn {
        padding: 5px 15px;
        background: #fff;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        outline: none;
        cursor: pointer;
      }
      .confirm-btn {
        margin-left: 6px;
        padding: 5px 15px;
        color: #fff;
        background-color: #409eff;
        border: 1px solid #409eff;
        border-radius: 4px;
        outline: none;
        cursor: pointer;
      }
    }
  }
}
</style>

@/components/alert/index.js

import Alert from './src/Alert'

export default {
  install (Vue) {
    // 创建构造类
    const AlertConstructor = Vue.extend(Alert)

    const showNextAlert = function (args) {
      // 实例化组件
      const instance = new AlertConstructor({
        el: document.createElement('div')
      })
      // 设置回调函数
      instance.callback = function (action) {
        if (action === 'confirm') {
          args.resolve(action)
        } else if (action === 'cancel' || action === 'close') {
          args.reject(action)
        }
      }
      // 处理参数
      for (const prop in args.options) {
        instance[prop] = args.options[prop]
      }
      // 插入Body
      document.body.appendChild(instance.$el)
      Vue.nextTick(() => {
        instance.show = true
      })
    }

    const alertFun = function (options) {
      if (typeof options === 'string' || options === 'number') {
        options = {
          message: options
        }
        if (typeof arguments[1] === 'string') {
          options.title = arguments[1]
        }
      }
      return new Promise((resolve, reject) => {
        showNextAlert({
          options,
          resolve: resolve,
          reject: reject
        })
      })
    }

    Vue.prototype.$alert = alertFun
  }
}

@/main.js

import Alert from '@/components/alert'
Vue.use(Alert)

使用

this.$alert({
  message: '描述描述描述',
  title: '提示',
  cancelText: '不',
  confirmText: '好的'
}).then(action => {
  console.log(`点击了${action}`)
}).catch(action => {
  console.log(`点击了${action}`)
})
// 或
this.$alert('描述描述描述', '提示').then(action => {
  console.log(`点击了${action}`)
}).catch(action => {
  console.log(`点击了${action}`)
})