Вслед за завершением базового фреймворка библиотеки компонентов в прошлый раз, сегодня я реализую разработку общего компонента (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

визуализация

Развивайте хорошие привычки, хвастайтесь первыми рендерами, мы довольны, а затем можем указать赞👍 Смотрите дальше вниз.

Для красоты компонент кнопки на картинке имитирует стиль кнопки elementui.

код

packages/alert/src/alert.vue

Сначала прикрепите код, стили и анимация в компоненте опущены, кнопка относительно проста и опущена, вы можете настроить ее в соответствии с потребностями вашего бизнеса.

<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 реализует простую пузырьковую сортировку, сортировку вставками

Очень просто - опубликовать шаблон подписки