предисловие
Недавно я использовал фреймворк element-ui и использовал компонент диалогового окна Dialog.Достигнутый эффект аналогичен компоненту всплывающего окна, который я делал ранее в своем мобильном проекте. Затем я подумал о том, чтобы поделиться с вами реализацией этого компонента всплывающего окна.В следующей статье вы познакомитесь с реализацией компонента всплывающего окна.
Основное содержание этой статьи будет связано с реализацией маски всплывающего окна,slotкак слот используется,props,$emitПередаются параметры, а также загружается конкретный код компонента. Если вам это нравится, вы можете лайкнуть / подписаться и поддержать его.Я надеюсь, что вы сможете что-то получить после прочтения этой статьи.
Личный блог, чтобы узнать:obkoro1.com
Конечный эффект компонента
Этапы реализации
- Сначала создайте стили html и css компонента, слой маски и слой содержимого.
- Настройте содержимое всплывающего окна: компонент всплывающего окна передается через
slotСлот принимает содержимое всплывающего окна, переданное от родительского компонента. - Настройте стиль всплывающего окна: компонент всплывающего окна проходит через
propsПолучить ширину всплывающего окна, переданную от родительского компонента, положение сверху, снизу, слева и справа. - Переключение компонентов: передается через родительский компонент
propsУправляйте отображением и скрытием компонентов и передавайте события, когда подкомпоненты закрыты.$emitЗапустите родительский компонент, чтобы изменить значение.
1. Создайте стили html и css для компонентов.
Структура HTML: слой маски, слой содержимого, заголовок заголовка, основное содержимое и кнопка закрытия в слое содержимого.
Ниже приведена структура html в компоненте.Некоторые вещи будут добавлены позже.Если вы не понимаете, то можете сначала пропустить.
<template>
<div class="dialog">
<!--外层的遮罩 点击事件用来关闭弹窗，isShow控制弹窗显示 隐藏的props-->
<div class="dialog-cover back" v-if="isShow" @click="closeMyself"></div>
<!-- transition 这里可以加一些简单的动画效果 -->
<transition name="drop">
<!--style 通过props 控制内容的样式 -->
<div class="dialog-content" :style="{top:topDistance+'%',width:widNum+'%',left:leftSite+'%'}" v-if="isShow">
<div class="dialog_head back">
<!--弹窗头部 title-->
<slot name="header">提示信息</slot>
</div>
<div class="dialog_main" :style="{paddingTop:pdt+'px',paddingBottom:pdb+'px'}">
<!--弹窗的内容-->
<slot name="main">弹窗内容</slot>
</div>
<!--弹窗关闭按钮-->
<div class="foot_close" @click="closeMyself">
<div class="close_img back"></div>
</div>
</div>
</transition>
</div>
</template>
Ниже приведены основные стили css в компоненте, которые полностью аннотированы, в основном черезz-indexиbackgroundЧтобы добиться эффекта маски, CSS конкретного контента можно настроить в соответствии с вашими потребностями.
<style lang="scss" scoped>
// 最外层 设置position定位
.dialog {
position: relative;
color: #2e2c2d;
font-size: 16px;
}
// 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
.dialog-cover {
background: rgba(0,0,0, 0.8);
position: fixed;
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
// 内容层 z-index要比遮罩大，否则会被遮盖，
.dialog-content{
position: fixed;
top: 35%;
// 移动端使用felx布局
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 300;
}
</style>
2. ПройтиslotНастроить всплывающее содержимое
Этот шаг, пока вы понимаетеslotфункции и использования, нет никаких проблем.
Один слот:
<slot>这是在没有slot传进来的时候，才显示的弹窗内容</slot>
Выше показан один слот, также называемый слотом по умолчанию, правильная поза для использования слота в родительском компоненте:
<my-component>
<!--在my-component里面的所有内容片段都将插入到slot所在的DOM位置，并且会替换掉slot标签-->
<!--这两个p标签，将替换整个slot标签里面的内容-->
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
ps: если подкомпонент содержитslotslot, содержимое указанного выше тега p будет отброшено.
Именованные слоты:
Так называемые именованные слотыslotназначить тегnameСвойства, именованные слоты могут размещать разные фрагменты содержимого в родительском компоненте в разных местах дочернего компонента, а именованные слоты могут по-прежнему иметь слот по умолчанию. Вот посмотрите, как используется слот всплывающего компонента:
<div class="dialog_head back ">
<!--弹窗头部 title-->
<slot name="header">提示信息</slot>
</div>
<div class="dialog_main " :style="{paddingTop:pdt+'px',paddingBottom:pdb+'px'}">
<!--弹窗的内容-->
<slot name="main">弹窗内容</slot>
</div>
Как использовать его в родительском компоненте:
-
Вставьте всплывающий компонент в компонент, который будет использоваться, и передайте
componentsЗарегистрируйтесь как компонент. -
Использование слота всплывающего компонента в родительском компоненте выглядит следующим образом.
<dialogComponent> <div slot="header">插入到name为header的slot标签里面</div> <div class="dialog_publish_main" slot="main"> 这里是内容插入到子组件的slot的name为main里面，可以在父组件中添加class定义样式，事件类型等各种操作 </div> </dialogComponent>
Введение слота, используемого в компоненте, здесь.Применение слота в компоненте всплывающего окна - типичный каштан.Видно, что слот довольно мощный, а использование самого слота не сложно Мы уже влюблены в игровые автоматы?
3. ПройтиpropsУправление отображением всплывающих окон и настройка стиля всплывающих окон
psopsЭто способ для родительского компонента передавать данные дочернему компоненту в Vue, незнакомые друзья могут взглянутьдокументация по реквизиту.
Поскольку компоненты всплывающего окна используются в других компонентах, для того, чтобы всплывающие окна соответствовали различным сценариям компонентов, компоненты всплывающего окна должны иметь определенную степень настраиваемости, иначе такие компоненты будут бессмысленны. используйте реквизиты, в качестве примера возьмем компонент всплывающего окна:
-
Прежде всего, вам нужно определить некоторые свойства реквизита во входящем компоненте, такие как валидация.
-
Затем привяжите данные реквизита в родительском компоненте.
<script> export default { props: { isShow: { //弹窗组件是否显示 默认不显示 type: Boolean, default: false, required:true, //必须 }, //下面这些属性会绑定到div上面 详情参照上面的html结构 // 如： :style="{top:topDistance+'%',width:widNum+'%'}" widNum:{ //内容宽度 type: Number, default:86.5 }, leftSite:{ // 左定位 type: Number, default:6.5 }, topDistance: { //top上边距 type: Number, default:35 }, pdt:{ //上padding type: Number, default:22 }, pdb:{ //下padding type: Number, default:47 } }, } </script>
Как использовать в родительском компоненте:
<dialogComponent :is-show="status.isShowPublish" :top-distance="status.topNum">
</dialogComponent>
ps: данные передачи реквизита не являются двусторонними, ноОднонаправленный поток данных, при изменении данных родительского компонента они также будут переданы в дочерний компонент, а это значит, что мы не должны модифицировать пропсы в дочернем компоненте. Итак, когда мы закрываем всплывающее окнонужно пройти$emitизменить данные родительского компонента, а затем данные автоматически передаются дочернему компоненту.
В основном компоненты всплывающего окна реализованы почти, и есть еще одно событие закрытия всплывающего окна, которое предполагает передачу параметров от дочернего компонента к родительскому компоненту.
4.$emitИнициировать событие родительского компонента, чтобы изменить данные и закрыть всплывающее окно.
В Vue параметры передаются от дочерних компонентов к родительским компонентам, многие из которых передаются через$emitдля запуска события родительского компонента для изменения данных.
В дочернем компоненте вызовите следующий метод при нажатии кнопки «Закрыть» или при нажатии слоя маски:
methods: {
closeMyself() {
this.$emit("on-close");
//如果需要传参的话，可以在"on-close"后面再加参数，然后在父组件的函数里接收就可以了。
}
}
Запись в родительском компоненте:
<dialogComponent :is-show="status.isShowPublish" :top-distance="status.topNum" @on-close="closeDialog">
</dialogComponent>
//"on-close是监听子组件的时间有没有触发，触发的时候执行closeDialog函数
methods:{
closeDialog(){
// this.status.isShowPublish=false;
//把绑定的弹窗数组 设为false即可关闭弹窗
},
}
С помощью компонента всплывающего окна можно добиться следующего отображения информации или взаимодействия событий:
код всплывающего компонента
Вышеупомянутое состоит в том, чтобы отделить каждый шаг всплывающего окна и проанализировать его шаг за шагом.Каждый шаг более четко объяснен.Если вы подключите его, вы можете увидетькод, а то в сочетании со статьей может быть очень понятно.
резюме:
Этот компонент всплывающего окна совсем не сложен в реализации.Я в основном привожу метод реализации здесь.Если есть потребность в проекте, вы также можете создать его самостоятельно.Выше приведено содержание этой статьи.Надеюсь что студенты могут прочитать это получить что-то.
Я надеюсь, что друзья, которые прочитали это, могут нажать «Нравится» / «Подписаться», ваша поддержка — самая большая поддержка для меня.
Наконец: Если вам нужно перепечатать, пожалуйста, поставьте ссылку на оригинальный текст и подпишите его. Кодировать не просто,благодарныйслужба поддержки! Я пишу статью с менталитетом биржевых записей, и не хочу ее рвать, но приветствую подсказки.
личный блог and Персональная домашняя страница Nuggets
Выше 2018.4.21