vue封裝通用的通知組件alert

時間 2020-03-05

原文原文鏈接

繼上次搭完一個組件庫的基本框架, 今天再來實現一個通用組件(alert)的開發, 使用方式與普通組件不同,它是函數式調用(例如: this.$alert('test')), 與之相似的組件還有loding、message這些通用的函數式組件. 實現方法也與之相似, 這裏就來實現alert組件javascript

須要用到一些vue的apihtml

const Alert = Vue.extend(alert) // 使用基礎 Vue 構造器，建立一個「子類」vue

const Instance = new Alert({}) // 實例化組件java

let vm = Instance.$mount() // 掛載, vm 就是組件裏的thisapi

效果圖

養成良好習慣, 吹牛要先上效果圖, 你們滿意了的話,不妨點個贊👍再往下看.promise

爲了美觀,圖中的button組件是模仿elementui的button樣式的app

代碼

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組件寫在了組件庫中dom

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('點了不')
      })
複製代碼