Как добиться многократного использования глобальных пользовательских компонентов?

Vue.js
Как добиться многократного использования глобальных пользовательских компонентов?

предисловие

Компоненты играют важную роль в разработке Vue.Если компонент необходимо использовать на нескольких страницах, его каждый раз вводить, регистрировать и использовать немного обременительно. Поэтому для тех, которые будут использоваться часто, нам нужно реализовать одно введение и использовать их глобально.

В этой статье показано, как настроить глобально повторно используемый компонент (Toast), сослаться на компонент в main.js, а затем просто написать код js на нужной странице для достижения эффекта.

Первый взгляд на эффект

Слушайте события кликов.

 methods: {
    click() {
      this.$toast.show("home你好啊")   //实现toast弹窗
    }
  }

Посмотрим на структуру страницы

Когда мы нажимаем кнопку, выполняем операторthis.$toast.show("home你好啊"), он будет динамически удаленdisplay:none; Информация по умолчаниютакже будет изменено на то, что мы передали при вызове функции showпараметр.

Мы должны использовать время для всплывающих уведомлений компонентов напрямую.$ Вызов всплывающего уведомления через метод this (), первый параметр — это отображаемая информация, а второй параметр — продолжительность всплывающего уведомления (не передавайте параметр по умолчанию 1,5 с).

Как мы монтируем компонент в структуру dom?

Проще говоря, создайте подкласс с помощью Vue.extend() и смонтируйте его на дом.

Требуется глобальный API Vue

  1. Vue.use()официальная документация
  2. Vue.extend()официальная документация

Во-первых, инкапсулировать компонент Toast

<template>
  <div class="toast" v-show="isNone">
    <div >{{message}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '默认信息',
      isNone: false
    }
  },
  methods: {
    show(message='默认信息', duration = 1500) {  //默认参数
      this.message = message;
      this.isNone = true;
      setTimeout(() => {  //用定时器实现弹窗出现时间
        this.isNone = false;
        this.message = '默认信息'
      }, duration)
    }
  }
}
</script>

<style scoped>
  .toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 8px;
    z-index: 999;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
  }
</style>

Структура очень проста, внешний вид и скрытие Toast динамически контролируются через атрибут isNone.

В основном это метод show.Когда страница вызывает метод show, первый параметр будет назначен сообщению, а второй параметр может определять время существования Toast (используйте таймер, чтобы изменить isNone на false).

Во-вторых, конкретная реализация

main.js

import Toast from './components/toast/index'

Vue.use(Toast)  //安装toast插件

Увидев это, мы должны сначала понятьVue.useЧто именно делает этот API?

По сути, это вызов метода установки плагина ().

Установите плагин Vue.js. Если подключаемый модуль является объектом, необходимо указать метод установки. Если плагин является функцией, он будет использоваться как метод установки. Когда вызывается метод установки, Vue передается в качестве параметра.

Итак, теперь нам нужно инкапсулировать метод установки.

components/toast/index.js

import Toast from './Toast'

const obj = {}  //对象

obj.install = function(Vue) {  //封装install方法
  // 1. 创建组件构造器
  const toastContrustor = Vue.extend(Toast)

  // 2. new  组件实例
  const toast = new toastContrustor();

  // 3. 将组件实例， 挂载到某一个元素上
  toast.$mount(document.createElement('div'))

  // 4. toast.$el 对应的就是div
  document.body.appendChild(toast.$el);
    
  // 5. 添加到原型链上
  Vue.prototype.$toast = toast
  
}

export default obj
  1. Сначала представьте упакованный компонент Toast.
  2. Определите объект obj (экспортируйте этот объект в main.js для установки).
  3. Мы только что узнали, что если плагин Vue.use является объектом, он должен предоставлять метод установки, поэтому метод установки объекта obj инкапсулируется.
  4. const toastContrustor = Vue.extend(Toast)пройти первымVue.extendСоздайте конструктор компонента. (При вызове метода установки Vue будет передан в качестве параметра)

    Используя базовый конструктор Vue, создайте «подкласс». Параметр — это объект, содержащий параметры компонента.

  5. const toast = new toastContrustor();Экземпляр компонента создается в соответствии с конструктором компонента новым методом.
  6. toast.$mount(document.createElement('div'))Смонтируйте объект компонента к элементу.
  7. document.body.appendChild(toast.$el);Добавьте элемент в тело.
  8. Vue.prototype.$toast = toastДобавьте объект toast в цепочку прототипов Vue, чтобы this.$toast можно было использовать на каждой странице.
  9. Экспортируйте объект obj, импортируйте его в main.js, установите его, и все готово, вы можете использовать его глобально с кодом js.

наконец

Если в статье есть ошибки или области, которые можно улучшить, вы можете высказать свое мнение.

Этоисходный код, если эта статья была вам полезна, поставьте лайк.

Категории