Прежде всего, следующие три момента необходимо учитывать во время разработки:
1. Введите и всплывают эффекты анимации.
2. Контроль Z-индекса
3. Сложный слой покрытия
Об анимации
Vue относительно прост в обработке анимации, просто добавьте анимацию перехода CSS в компонент
<template> <div transition = "modal-scale"> <!-Опубликуйте другой контент-> </div> </template> <cript> // ... </script> <style>. Модальный шкал-трансляция {переход: преобразование, непрозрачность .3s легко;}. Scale (1.1);}. Modal-Scale-Leave {Transform: Scale (0.8);} </style> Внешний можно управлять пользователем само по себе, используя v-if или v-show для управления дисплеем.
Z-Index Control
Что касается контроля z-index , необходимо завершить следующие точки
1. Убедитесь, что z-index всплывающей рамы достаточно высок, чтобы сделать его длительным самым внешним слоем.
2. z-index всплывающей коробки, которая появляется позже, выше, чем та, которая появляется раньше.
Чтобы соответствовать приведенным выше двум пунктам, нам нужен следующий код для реализации
const ZINDEX = 20141223 // ПРЕДОСТАВЛЯЕТ СВОЕ ЗАДАЧИ ПЕРВЫЙ CONST GETZINDEX = function () {return ZINDEX ++ // После каждого получения ZINDEX автоматически увеличится} Затем свяжите z-index на компоненте
<Шаблон> <div: style = "{'z-index': zindex}" transition = "modal-scale"> <!-Опустить другое содержание-> </div> </template> <script> export defaulУправление наложением слоя крышки
Уровень крышки является самой сложной частью всплывающей сборки. Следующие моменты должны быть завершены:
1. Анимация между маскирующим слоем и всплывающим слоем должна быть параллельной
2. z-index слоя крышки должен быть меньше, чем всплывающий слой
3. Когда наполняется слой крышки, необходимо прокрутить компонентные страницы.
4. Нажмите на слой обложки, чтобы дать отзыв всплывающему слою
5. Убедитесь, что вся страница может иметь только один слой крышки максимум (множественное перекрытие потемнеет цвет слоя крышки)
Чтобы решить эти проблемы, также необходимо убедиться, что все всплывающие компоненты не нужно решать каждым из них. Следовательно, решается использовать механизм Vue's mixins для инкапсуляции общей логики этих всплывающих слоев в смесин, и каждый всплывающий компонент прямо ссылается.
Vue-Popup-Mixin
После уточнения всех вышеперечисленных проблем и начать развивать микшин, вам сначала нужно overlay (компонент слоя крышки);
<template> <div @click = "handlerclick" @touchmove = "предотвратить": style = "style" transition = "overlay-fade"> </div> </template> <script> export default {props: {onclic Computed: {style () {return {'opacity': this.opacity, 'founal-color': this.color}}}, методы: {предотвратить (event) {event.preventdefault () event.stoppropagation ()}, handlerclick () {if (this.onclick) {this.onclick ()}}}}})}}})})})}) lang = "меньше">. наложение {позиция: фиксировано; слева: 0; Справа: 0; Верх: 0; Внизу: 0; фоновый цвет: #000; непрозрачность: .4; z-index: 1000;}. Перевод наложения {переход: все .3s linear; и. }} </style> Тогда JS необходим для управления дисплеем и скрытия overlay .
Import Vue From 'vue'import overlayopt из' ../overlay '// ввести компонент наложения const ventlay = vue.extend (alplayopt) const getDom = function (dom) {if (dom.nodetype === 3) {dom = dom.nextelementementibling || dom.nextibling getdom (dom)} return dom} // z-index control const zindex = 20141223 const getzindex = function () {return zindex ++} // Управление const popuppanager = {экземпляры: [], // Используется для хранения всех всплывающих экземпляров Layer overlay: false, // Call Это метод, когда открытое окно-окно открыто (экземпляры! this.instances.indexof (экземпляр)! == -1) return // Когда нет слоя обложки, слой крышки отображается, if (this.instances.length === 0) {this.showoverlay (ancember.overlaycolor, exants.overlayopacity)} this.inshance.push (экземпляр) // СОЗДАТЕЛЬНЫЙ КОМПОНТЕНТ. прозрачность и цвет различных всплывающих слоев // Добавить z-индекс к всплывающему слою const dom = getdom (экземпляр. $ el) dom.style.zindex = getzindex ()}, // всплывающее поле Close Close (экземпляр) {let index = this.Instances.indexof (экземпляр) if (index = -1) return vue.nex.nextc. this.Instances.splice (index, 1) // Когда на странице нет слоя всплывающего окна, закройте слой обложки if (this.instances.length === 0) {this.closeoverlay ()} this.changeoverlaystyle ()})}, Showoverlay (color, upacity) {Let Overlay = Forthallay = neway (elAlay = neway (elAlay = newAlay (elaOlay = neway (elaoverlay = neway (leplay =. document.createElement ('div')}) const dom = getdom (overlay. $ el) dom.style.zindex = getzindex () alplay.color = color alplay.opacity = opacity alplay.onclick = this.handleroverlayclick.bind (это) наложение $ adpendto (document.body) / / / / / / / crowhit scrolling это. document.body.style.overflow document.body.style.overflow = 'hidden'}, showoverlay () {if (! this.overlay) возврат документ. {if (! this.Overlay || this.Instances.length === 0) return const ancess = this.Instances [this.Instances.length - 1] this.overlay.color = exante.overlaycolor this.overlay.opacity = exaction.overlayopation}, // метод Overlayclick of apu -uler (this.instances.length === 0) return const ancement = this.instances [this.instances.length - 1] if (exante.overlayclick) {exants.overlayclick ()}}} window.addeventListener ('keydown', function (event) {if (event.keycode = 27) { / escedance. topinstance = popupmanager.instances [popupmanager.instance.length - 1] if (! topinstance) return if (topinstance.escpress) {topinstance.escpress ()}}}}) экспорт по умолчанию Popupmanager.Наконец -то инкапсулируйте его в микшин
Импорт Popupmanager из './popup-manager'export default {opps: {show: {type: boolean, default: false}, // отображать наложение слоя перекрытия: {type: boolean, default: true}, offlayopacity: {type: number, по умолчанию: 0,4}, Overlaycolor: {string:'# Когда компонент установлен, он определит значение показа. Контроль включен. attlected () {if (this.show && this.overlay) {popuppanager.open (this)}}, // закрыто, когда компонент удаляется отдельно () {popupmanager.close (this)}, watch: {show (val) {// модифицируйте значение Show), чтобы вызовать метод Open). {Popupmanager.close (this)}}}, beforedestroy () {popupmanager.close (this)}}использовать
Все вышеперечисленные коды завершают общую логику всех всплывающих слоев. При использовании вам нужно загрузить их только в виде микшина.
<Шаблон> <div v-she-show = "show" transition = "dialog fade"> <div> <lot> </slot> </div> </div> </template> <style> .dialog {слева: 50%; Верх: 50%; Преобразование: перевод (-50%, -50%); позиция: исправлена; Ширина: 90%; } .dialog-content {founale: #fff; граница радий: 8px; Заполнение: 20px; Текст-альбом: Центр; } .dialog-fade-transition {переход: непрозрачность .3s linear; } .dialog-fade-enter, .dialog-fade-leave {opacity: 0; } </style> <cript> Импорт всплывающее окно из '../src'export по умолчанию {mixins: [Popup], методы: {// Ответ на событие Overlay overdationClick () {this.show = false}, // Ответ на ESC Evpress Evpress () {this.show = false}} </script>Суммировать
Выше приведены некоторые знания о всплывающем компоненте Vue.js. Я надеюсь, что это поможет вам учиться или работать. Если у вас есть какие -либо вопросы, вы можете оставить сообщение для общения. Спасибо за поддержку Wulin.com.