Возьмите тост в качестве примера, чтобы объяснить концепцию компонентов Vue

внешний интерфейс Vue.js

Компоненты являются чрезвычайно важной концепцией в Vue. Компоненты тоста также используются очень часто в мобильной веб-разработке. Эта статья принимает тостный компонент в качестве примера для объяснения некоторых точек знаний Vue компонента.

1. Компоненты одного файла

Во время ежедневной разработки папки нашего проекта обычно создаются с помощью vue-cli длякомпонент одного файласпособ организации кода. В соответствии с обычным процессом разработки теперь создайте файл Toast.vue.

Начнем с того, что сосредоточимся на некоторых ключевых моментах реализации компонента Toast:

  1. Компонент имеет два реквизита: visible и msg. видимые элементы управления отображаются и скрываются, msg — это отображаемое содержимое
  2. Положение компонента: относительно окна просмотра экрана, чтобы определить положение, установите фиксированное положение и установите значение z-index на большее значение. Чтобы центрировать элемент, используйте свойство translate
  3. Анимация добавляется, когда компонент отображается или скрывается: используйте компонент перехода для достижения эффекта перехода

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

<template>
  <transition name="toast-bounce">
    <div class="toast" v-show="visible">
      <p class="toast-msg">{{ msg }}</p>
    </div>  
  </transition>
</template>
<script>
    export default {
      name: 'Toast',
      props: {
          visible: {
              type: Boolean,
              required: true
          },
          msg: {
              type: String,
              required: true
          }
      }
    }
</script>
<style lang="scss" scoped>
// 添加过渡效果
  .toast-bounce-enter, .toast-bounce-leave {
    opacity: 0;
  }
  .toast {
    box-sizing: border-box;
    position: fixed;
    max-width: 80%;
    left: 50%;
    top: 50%;
    padding: 20px;
    z-index: 99;
    transition: all .3s ease;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    text-align: center;
    .toast-msg {
      text-align: center;
    }
  }
</style>

На странице, на которой нужно использовать компонент Toast, импортируйте компонент, и вы сможете использовать его после регистрации.

2. Как создавать компоненты вручную

Представленный как однофайловый компонент, есть несколько неудобств.

  • Toast импортируется каждый раз, когда он используется
  • Состояние родительского компонента должно содержать видимое свойство (предполагая, что мы не используем микс)
  • После установки для видимости родительского компонента значения true используйтетаймерЗатем установите для параметра visible значение false

Для компонентов, которые часто используются таким образом, наиболее удобным способом является завершение компонента вызовом функции.Создайте,устанавливатьтак же какразрушать. Но в процессе разработки проекта мы сосредоточились на реализации компонентов, игнорируя некоторые из этих операций. Далее мы продемонстрируем, как вручную создать тостовую компонент, прикрепите его к документу. Те, уничтожить компонент после отображения его в течение определенного периода времени, а затем удалить элемент.

Создание и монтирование компонентов

Однофайловые теги сценария Vue просто экспортируют один файл, содержащийВарианты компонентовОбъект.为了创建组件，先使用Vue.extendПолучите конструктор, затем создайте его с помощью new. Конструктор здесь имеет необязательный параметр, тип — Object, а свойства, которые можно передать, — el, propsData и т. д.

import ToastConfig from './Toast.vue'
// 构造器
const ToastConstructor = Vue.extend(ToastConfig)
// 通过 new 创建组件
const instance = new ToastConstructor()

Когда компонент Toast создан, необходимо передать два реквизита: visible, msg. При создании нового экземпляра настройте параметр propsData, чтобы задать реквизиты, необходимые компоненту.

const instance = new ToastConstructor({
    propsData: {
        msg: 'msg',
        visible: false   
    }
})

Создание компонентов монтажа - это две разные концепции, создавая компонент, устанавливает стадию еще не начаться, DOM не содержит узла элемента. существуетустанавливать

const instance = new ToastConstructor({
    el: document.createElement('div'),
    propsData: {,
        msg: 'msg',
        visible: false   
    }
})
// 组件创建成功之后挂载
document.body.appendChild(instance.$el)

После монтирования отображается тост-компонент. Запустите другой таймер и скройте компонент через 3 секунды.

Vue.nextTick(() => {
    instance.visible = true
    setTimeout(() => {
      instance.close()
    }, 3000)
})

разрушение компонентов

Событие transitionend запускается, когда заканчивается скрытая анимация компонента Toast.instance.$elВозвращает сборку корневого элемента, прослушивая событие перехода к этому элементу в функции обратного вызова.разрушатькомпонент, а также удаляется из дерева DOM.

// 在 ToastConstructor 上添加两个销毁组件与移除DOM元素的函数
// 隐藏组件
ToastConstructor.prototype.close = function () {
  this.visible = false
  this.$el.addEventListener('transitionend', this.destroyeInstance.bind(this))
}
// 销毁组件，移除DOM元素
ToastConstructor.prototype.destroyeInstance = function () {
  this.$destroy(true)
  this.$el.removeEventListener('transitionend', this.destroyeInstance)
  this.$el.parentNode.removeChild(this.$el)
}

Щелкните полный фрагмент кодаздесь.

3. Мелкие доработки

Если функция всплывающего уведомления вызывается часто в течение короткого периода времени, в document.body есть несколько компонентов всплывающего уведомления, и последний перезапишет первый. Учитывая характеристики мобильного терминала, мы надеемся, что в один и тот же момент времени, независимо от того, как часто вызывается функция всплывающего уведомления, document.body будет иметь только один компонент всплывающего уведомления.
Следующие идеи настройки примерно таковы:

  1. Обнаружение присутствия компонента Toast
  2. не существует, создайте его
  3. Если он есть, сбросить состояние visible и msg, убрать таймер, уничтожающий компонент, и убрать мониторинг времени перехода.

Это должно быть некоторые корректировки.

// 在函数之外，定义两个变量
// 组件销毁时，instance 也要置为 null
let instance = null
let timer = null
function toast (msg = '默认信息') {
  // 判断 instance 是否存在
  if (instance) {
    instance.visible = true
    instance.msg = msg
    if (timer) {
      clearInterval(timer)
    }
    instance.$el.removeEventListener('transitionend', instance.destroyeInstance)
  } else {
      //... 
  }
  // ...
}

Щелкните полный фрагмент кодаздесь.

this.$toastПросто позвони. элемент интерфейсаmessage, вуксToastОба поддерживают вызовы подключаемых модулей.

4. Резюме

С некоторыми зрелыми библиотеками пользовательского интерфейса Vue, такими как: mint-uiToastПо сравнению с компонентами, текущие компоненты Toast имеют много недостатков. Но, написав чрезвычайно простой компонент Toast, я изучил некоторые концепции компонентов Vue, как вручную создавать и уничтожать компоненты и как комбинировать переходы для создания простых анимаций, которые помогут нам лучше понять идею компонентов Vue. И в дальнейшем при использовании некоторых компонентов сторонней библиотеки можно примерно знать принцип.

использованная литература

  • монетный дворToast
  • вуксToast
  • Кубик-интерфейсToast
Категории