Following the last build a component library of the basic framework, today to achieve a general component (Alert) development, the use of the ordinary component is not the same, it is functional call (for example: This.$alert(‘test’)), as well as general functional components like Loding and message. The implementation is similar, and here we implement the Alert component

Some of vUE’s apis are needed

Const Alert = vue.extend (Alert) // Create a "subclass" using the base Vue constructor

Const Instance = new Alert({}) // Instantiate component

Let vm = Instance.$mount()

rendering

Nurturance good habit, boast to want to go up effect graph first, everybody satisfied word, might as well nod praise 👍 look downwards again.

For aesthetics, the Button component in the figure is modeled after elementUI’s Button style

code

packages/alert/src/alert.vue

First attach the code, the style and animation parts of the component are omitted, and the button is relatively simple and also omitted. You can customize it according to your business needs

<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 () { // Initialize, return a promise
      this.show = true
      return new Promise((resolve, reject) = > {
        this.promise = { resolve, reject } // Save resolve, reject, and reject
      })
    },
    handelCancel () { / / cancel
      this.promise.reject()
      this.destroyVm()
    },
    handelConfirm () { / / sure
      this.promise.resolve()
      this.destroyVm()
    },
    destroyVm () { / / destroy
      this.show = false
      setTimeout((a)= > { // Execute after animation is complete
        this.$destroy(true) // Completely destroy an instance. Clean up its connections to other instances and unbind all its instructions and event listeners
        this.$el && this.$el.parentNode.removeChild(this.$el) // Delete from the DOM node
      }, 500)}}}Copy the code

packages/alert/index.js

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

const Alert = Vue.extend(alert) // Create a constructor class for the Alert component

const alertFun = function (options) { // Receive configuration
  let str_num = (typeof options === 'string' || typeof options === 'number')
  const Instance = new Alert({ // Instantiate the component
    data: { // Assign a value to the data variable
      title: (options && options.title) || 'tip'.text: str_num ? options : ((options && options.text) || ' '),
      cancelText: (options && options.cancel) || 'cancel'.confirmText: (options && options.confirm) || 'confirm'}})let vm = Instance.$mount() / / a mount
  document.body.appendChild(vm.$el) / / into the body
  return vm.init() // Execute the initialization method and return a promise
}

export default {
  install: (Vue) = > { // Expose the install method for vue.use () to call
    Vue.prototype.$alert = alertFun // Attach it to the Vue prototype}}Copy the code

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() requires an install() method
const install = Vue= > { Install all components using vue.use () in main.js
  if (install.installed) return // Determine whether to install it
  install.installed = true // Record the installation status
  // Iterate over common components
  Object.keys(commonComs).forEach(key= > Vue.use(commonComs[key]))
  // Iterate over all components
  Object.keys(components).forEach(key= > Vue.component(key, components[key]))
}

export default {
  version: '0.1.0 from',
  install
}
Copy the code

use

main.js

import biuui from '.. /packages'
Vue.use(biuui)
Copy the code

This is referenced because my Alert component is written to the component library

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 () {
    // Default configuration
      this.$alert('Test Alert Component').then((a)= > {
        console.log('Hit OK')
      }).catch((a)= > {
        console.log('Hit cancel')})}}}</script>
Copy the code

Custom Configuration

this.$alert({
    text: 'description'.title: 'title'.cancel: 'no'.comfirm: 'good'}).then((a)= > {
        console.log('Order good')
      }).catch((a)= > {
        console.log('Click no')})Copy the code

That’s it. Please like 👍

Other articles:

Eight steps to develop a VUE component library

Image lazy loading lozad.js

JS anti – shake, throttling function

VUE implementation principles (data hijacking, observer pattern)

Javascript implements simple bubble sort, insert sort

A very simple publish-subscribe model