vue封装通用的通知组件alert

继上次搭完一个组件库的基本框架, 今天再来实现一个通用组件(alert)的开发, 使用方式与普通组件不同,它是函数式调用(例如: this.$alert('test')), 与之相似的组件还有loding、message这些通用的函数式组件. 实现方法也与之相似, 这里就来实现alert组件

须要用到一些vue的api

const Alert = Vue.extend(alert) // 使用基础 Vue 构造器，建立一个“子类”

const Instance = new Alert({}) // 实例化组件

let vm = Instance.$mount() // 挂载, vm 就是组件里的this

效果图

养成良好习惯, 吹牛要先上效果图, 你们满意了的话,不妨点个赞👍再往下看.

为了美观,图中的button组件是模仿elementui的button样式的

代码

packages/alert/src/alert.vue

先附上代码, 组件中的样式和动画部分就省略了,button比较简单也省略了, 你能够根据业务需求去定制

<template>
  <transition name="fade">
    <div class="biu-alert-wrapper" v-show="show">
      <transition name="show">
        <div class="biu-alert-main" v-show="show">
          <div class="biu-header-cont">
            <span class="title">{{title}}</span>
            <span class="close" @click="destroyVm">x</span>
          </div>
          <div class="biu-alert-text">{{text}}</div>
          <div class="biu-btn-cont">
            <biu-button @click="handelCancel" class="mr-20">{{cancelText}}</biu-button>
            <biu-button @click="handelConfirm">{{confirmText}}</biu-button>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>
<script> import BiuButton from '../../button' export default { name: 'BiuAlert', components: { BiuButton }, data () { return { title: '', text: '', promise: null, show: false, cancelText: '', confirmText: '' } }, methods: { init () { // 初始化, 返回一个promise this.show = true return new Promise((resolve, reject) => { this.promise = { resolve, reject } // 将resolve 、reject暂存起来,方便调用 }) }, handelCancel () { // 取消 this.promise.reject() this.destroyVm() }, handelConfirm () { // 肯定 this.promise.resolve() this.destroyVm() }, destroyVm () { // 销毁 this.show = false setTimeout(() => { // 动画完成后执行 this.$destroy(true) // 彻底销毁一个实例。清理它与其它实例的链接，解绑它的所有指令及事件监听器 this.$el && this.$el.parentNode.removeChild(this.$el) // 从dom节点删除 }, 500) } } } 复制代码

packages/alert/index.js

import Vue from 'vue'
import alert from './src/alert.vue'

const Alert = Vue.extend(alert) // 建立alert组件的构造类

const alertFun = function (options) { // 接收配置
  let str_num = (typeof options === 'string' || typeof options === 'number')
  const Instance = new Alert({ // 实例化组件
    data: { // 给data的变量赋值
      title: (options && options.title) || '提示',
      text: str_num ? options : ((options && options.text) || ''),
      cancelText: (options && options.cancel) || '取消',
      confirmText: (options && options.confirm) || '确认'
    }
  })
  let vm = Instance.$mount() // 挂载
  document.body.appendChild(vm.$el) // 插入body
  return vm.init() // 执行初始化方法, 返回的是一个promise
}

export default {
  install: (Vue) => { // 暴露install方法供Vue.use()调用
    Vue.prototype.$alert = alertFun // 挂到Vue的原型上使用
  }
}
复制代码

packages/index.js

/* eslint-disable */
import BiuButton from './button'
import BiuInput from './input'
import BiuAlert from './alert'

const components = {
  BiuButton,
  BiuInput
}

const commonComs = {
  BiuAlert
}

// 两种全局注册组件的方法 vue.use() vue.component() 前提是必需要有一个install()方法
const install = Vue => { // main.js 中使用 Vue.use() 安装所有组件
  if (install.installed) return // 判断是否安装
  install.installed = true // 记录安装状态
  // 遍历公共组件
  Object.keys(commonComs).forEach(key => Vue.use(commonComs[key]))
  // 遍历全部组件
  Object.keys(components).forEach(key => Vue.component(key, components[key]))
}

export default {
  version: '0.1.0',
  install
}
复制代码

使用方式

main.js

import biuui from '../packages'
Vue.use(biuui)
复制代码

这样引用是由于个人alert组件写在了组件库中

App.vue

<template>
  <div id="app">
    <h1>biu-ui</h1>
    <biu-button @click="showAlert">show alert</biu-button>
  </div>
</template>

<script> export default { name: 'App', methods: { showAlert () { // 默认配置 this.$alert('测试alert组件').then(() => { console.log('点击了肯定') }).catch(() => { console.log('点击了取消') }) } } } </script>
复制代码

自定义配置

this.$alert({
    text: '描述',
    title: '标题',
    cancel: '不',
    comfirm: '好的'}).then(() => {
        console.log('点了好的')
      }).catch(() => {
        console.log('点了不')
      })
复制代码

到此结束, 记得点赞👍

其余文章：

八步开发一个vue的组件库

图片懒加载之lozad.js

JS的防抖、节流函数

VUE的实现原理（数据劫持、观察者模式）

Javascript实现简单的冒泡排序、插入排序

一个很是简单的-发布订阅模式