Эта статья в основном делится пониманием компонентной разработки, чтобы новички могли избежать некоторых обходных путей и повысить эффективность разработки.Сам автор тоже новичок.Если есть какие-либо неуместности, пожалуйста, укажите, спасибо.
Я считаю, что многие друзья, которые только начинают, часто пишут много повторяющегося кода, и эти коды в целом похожи.В этом случае, как сделать разработку и обучение более эффективными, появляется идея компонентизации. Здесь, разработав простое всплывающее окно, мы можем поделиться составными приложениями с нашими друзьями.
Компоненты и компонентизация
Компонентизация — это стандартизированная работа по инкапсуляции определенных многократно используемых функций. Компоненты обычно содержат свои собственные внутренние элементы пользовательского интерфейса, стили и логический код JS, которые можно легко и быстро встроить в любое место приложения. Компоненты могут использоваться внутри других компонентов для формирования более сложных компонентов.
В реальной разработке мы должны избегать написания повторяющегося кода и сосредоточиться на большем количестве основных частей.Поэтому необходимо извлекать эти повторяющиеся коды и инкапсулировать их в общедоступные компоненты для повышения эффективности разработки, но в то же время обращать внимание на надежность и возможность повторного использования. компонентов позволяют ему адаптироваться к как можно большему количеству сценариев.
Базовая структура
Первая — это базовая структура всплывающего окна.
<div class="modal">
<div class="mask"></div>
<div class="modal-dialog">
<div class="modal-header">
<span>标题</span>
<a href="javascript:;" class="icon-close"></a>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<a href="javascript:;" class="btn">确定</a>
<a href="javascript:;" class="btn btn-default">取消</a>
</div>
</div>
</div>
</div>
Базовая структура очень проста, нужно немного вниманияslotСлот, если атрибут имени не указан, он будет иметь неявное имя по умолчанию, а если не указано в родительском компонентеslotизv-slotЕсли это атрибут, содержимое будет передано в слот по умолчанию.
определяется здесьslotатрибут имениbody, которые называются именованными слотами и будут соответствоватьv-slot:bodyСодержание.
УведомлениеНазывается родительский компонент необходим<template>пакет и<template>Все в элементе будет передано в соответствующий слот.
Добавьте стиля всплывающему окну
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.5;
}
.modal-dialog {
position: absolute;
top: 40%;
left: 50%;
width: 560px;
height: auto;
background-color: #ffffff;
transform: translate(-50%, -50%);
.modal-header {
height: 60px;
background-color: #F5F5F5;
padding: 0 25px;
line-height: 60px;
font-size: 16px;
.icon-close {
position: absolute;
top: 23px;
right: 25px;
width: 14px;
height: 14px;
background: url("/static/img/icon-close.png") no-repeat center;
background-size: contain;
}
}
.modal-body {
padding: 42px 40px 54px;
font-size: 14px;
}
.modal-footer {
height: 82px;
line-height: 82px;
text-align: center;
background-color: #F5F5F5;
}
}
}
я использую здесьscss, не забудьте установитьnode-sassа такжеsass-loader, теперь наша страница выглядит так
Хотя это все равно не очень красиво, но это в основном прототип всплывающей коробки, и я не далaСтиль маркера по причинам позже.
функция SCSS
Вернитесь и посмотрите на вышеcssКод, фиксированный код позиционирования повторяется здесь 4 раза, и по мере развития проекта подобных кодов должно быть больше, почему бы не извлечь эти части и не инкапсулировать их?scssобеспечивает эту функцию, которая будетcssИнкапсулированная в функцию функция здесь будет напрямую возвращать тело функции. Когда мы сталкиваемся с похожей ситуацией, мы можем повторно использовать ее напрямую.
существуетassetsновый каталогscssпапку и создайте новую внутриmixin.scss, внутри новыйpositionфункция, код выглядит следующим образом:
@mixin position($pos: absolute, $top: 0, $left: 0, $w: 100%, $h: 100%) {
position: $pos;
top: $top;
left: $left;
width: $w;
height: $h;
}
Затем мы вводимmixin.scss,использоватьpositionфункция для замены нашего исходного кода
Используйте @includescssфункция:@include position(fixed);В скобках указаны параметры.
О кнопке
На каждом веб-сайте есть множество кнопок, но большинство кнопок на одном и том же веб-сайте имеют одинаковый стиль, только разные размеры. Следовательно, это может бытьscssновый файл подbutton.scssзатем вApp.vueЭтот файл вводится в него.За исключением некоторых специальных стилей позже, нет необходимости определять стили для кнопок, что также легко поддерживать. Вот мойbuttonфайл, вы можете обратиться к нему.
.btn {
display: inline-block;
width: 110px;
line-height: 30px;
text-align: center;
background-color: #FF6600;
color: #ffffff;
border: none;
cursor: pointer;
}
.btn-default {
background-color: #b0b0b0;
color: #d7d7d7;
}
.btn-large {
width: 202px;
height: 50px;
line-height: 50px;
font-size: 18px;
}
.btn-huge {
width: 300px;
height: 54px;
line-height: 54px;
font-size: 16px;
}
.btn-group {
.btn {
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
}
для повторного использования
В настоящее время это всплывающее окно представляет собой просто фиксированную структуру, его нельзя повторно использовать в других местах, и необходимо выполнить некоторую обработку, чтобы извлечь все переменные части, такие как заголовок, кнопка и содержимое. Так как есть слоты, то содержание рассматривать не нужно.На что нужно обратить внимание, так это на заголовок и кнопку, потому что заголовок может быть подсказкой, предупреждением и т.д., а кнопка может быть и тем, и другим. OK и Отмена. И эта информация передается от родительского компонента, вам нужно использоватьpropsперенимать.
существуетpropsДобавьте внутрь следующий код и укажите значения по умолчанию для некоторых свойств:
props: {
// 弹框标题
title: String,
// 按钮类型： 1：确定按钮 2：取消按钮 3：确定取消
btnType: String,
// 按钮文本
sureText: {
type: String,
default: "确定"
},
cancleText: {
type: String,
default: "取消"
},
showModal: Boolean
}
После добавления нужно переписать код
<div class="modal" v-show="showModal">
<div class="mask"></div>
<div class="modal-dialog">
<div class="modal-header">
<span>{{title}}</span>
<a href="javascript:;" class="icon-close" @click="$emit('cancle')"></a>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<a href="javascript:;" class="btn" v-if="btnType==1"@click="$emit('submit')"{{sureText}}</a>
<a href="javascript:;" class="btn" v-if="btnType==2"@click="$emit('cancle')">{{cancleText}}</a>
<div class="btn-group" v-if="btnType==3">
<a href="javascript:;" class="btn" @click="$emit('submit')">{{sureText}}</a>
<a href="javascript:;" class="btn btn-default" @click="$emit('submit')">{{cancleText}}</a>
</div>
</div>
</div>
</div>
Чтобы добиться повторного использования кода через параметры, переданные родительским компонентом, и используйте$emitВыбрасывать пользовательские события, а затем реализовывать собственную бизнес-логику в родительском компоненте.
существуетHome.vueВведите этот компонент внутрь и вызовите
<modal
title="小星星"
sureText="确定"
btnType="1"
:showModal="showModal"
@submit="go"
@cancle="showModal=false"
>
<template v-slot:body>
<p>给个小星星吧</p>
</template>
</modal>
здесь@submitа также@cancleЭто событие, которое мы настраиваем в компоненте
Окончательный эффект выглядит следующим образом
После реализации он кажется немного жестким, когда он всплывает, это не имеет значения, мы добавляем к нему анимацию, в css3transformа такжеtransitionАнимационные эффекты могут быть достигнуты, но здесь мы используемvueВстроенные компоненты<transition>, так что всплывающее окно имеет эффект всплывающего окна сверху.
переходный компонент
transitionКомпоненты могут добавлять переходы к элементу или компоненту и применять переход только к содержимому, которое он обертывает, без рендеринга дополнительных элементов DOM или появления в иерархии компонентов для проверки. Это может быть преобразовано несколькими способами, здесь способ применить переход класса.
Эта картинаVueОфициальная картинка, если говорить простым языком, v-enter — это состояние в начале анимации, v-enter-active — входит в состояние, когда переход вступает в силу, v-enter-to — конечное состояние перехода, leave — это то же самое, вы можете обратиться к конкретным деталям.Talent.v ue js.org/v2/expensive/suddenly…Проверить.
Если нет указанного атрибута имени, имя класса перехода будет по умолчанию иметь префикс v. Здесь указанное имя для перехода
сдвиньте и оберните им модальный компонент
<transition name="slide">
<div class="modal" v-show="showModal">
...
...
</div>
</transition>
Добавить после модального в код стиля
&.slide-enter-active {
top: 0;
}
&.slide-leave-active {
top: -100%;
}
&.slide-enter {
top: -100%;
}
И указать свойства, которые необходимо перевести в модальное
transition: top 0.5s;
После добавления всплывающее окно будет иметь анимацию скольжения вверх и вниз.
На этом наше всплывающее окно готово.
Вы также можете внести соответствующие коррективы в соответствии со своими потребностями и разработать всплывающее окно, подходящее для вашего собственного проекта.
сделать плагин
Каждый раз, когда вы используете это всплывающее окно, вам нужно вводить компоненты, что немного хлопотно, поэтому его можно сделать в виде плагина, который можно вызывать глобально без импорта.
Создайте новый index.js в текущем каталоге и зарегистрируйте его глобально, используя метод установки.
import Modal from './Modal.vue'
const component = {
install: function (Vue) {
Vue.component('Modal', Modal)
}
}
export default component
Внесите его в main.js и используйте глобально через Vue.use(), чтобы его можно было использовать как другие библиотеки пользовательского интерфейса, не импортируя его каждый раз.
наконец
В реальной разработке компонентизация особенно важна. Она может помочь нам писать более качественный код и упростить его обслуживание. Также очень полезно для написания кода как можно скорее закрепить идею компонентизации.
Эта статья представляет собой простое понимание компонентизации.Если что-то не так, вы можете указать.
Спасибо за наводку в разделе комментариев.
Я надеюсь, что друзья, которые прочитали это, могут поставить лайк и поддержать
прикреплятьGitHub.com/Янтарь/Да…