This article mainly shares the understanding of component-based development, so that the beginners can take fewer detdettions and improve the efficiency of development. The author is also a novice, if there is any improper place, please point out, thank you.
I believe that many beginners often write a lot of repeated code, and these codes are generally similar, in this case, how to make development and learning more efficient, the idea of componentization is particularly important. Here through the design of a simple popup box, to partners to share the componentized application.
Components & componentization
Componentization is the standardization of packaging functions that can be reused. Components typically contain their own internal UI elements, styles, and JS logic, which can be easily embedded anywhere in the application. Other components can be used inside components to form more complex components.
In the actual development, we should try to avoid duplicate code, focusing on more core part, so you need to put these duplicated code is extracted and packaged into public components, improve the efficiency of development, but also to pay attention to the robustness and the reusability of components, make it adapt to more scenes as much as possible.
The basic structure
The first is the basic structure of the pop-up
<div class="modal"> <div class="mask"></div> <div class="modal- Dialog ">< div class="modal-header"> <span> Title </ 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 "> Determine </a> <a href="javascript:;" Class = "BTN BTN - the default" > cancel < / a > < / div > < / div > < / div > < / div >Copy the codeThe basic structure is simple, but the slot slot is slightly noted. If no name attribute is provided, it has an implied name default, and the content is passed to the default slot if the slot’s V-slot attribute is not specified in the parent component.
Here we define the slot name property body, which is called a named slot and matches the contents of V-slot :body.
Note that calls in the parent component need to be wrapped with
, and that everything in the
element is passed into the appropriate slot.
Add a little style to the popup
.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; }}}Copy the codeI’m using SCSS, don’t forget to install Node-sass and Sass-Loader, now our page looks like this
Although still not very beautiful, it is basically a prototype of a pop-up box, and I did not mark a style for reasons to be explained later.
SCSS function
Looking back at the CSS code above, there are four fixed location code repetitions. there are bound to be more like this as the project progresses. SCSS provides this functionality by encapsulating CSS as functions that directly return the function body. When we encounter similar situations, we can reuse them directly.
SCSS folder in assets directory and create mixin. SCSS, and create position function in it. The code is as follows:
@mixin position($pos: absolute, $top: 0.$left: 0.$w: 100%, $h: 100%) {
position: $pos;
top: $top;
left: $left;
width: $w;
height: $h;
}
Copy the codeNext we introduce mixin.scss and replace our original code with the position function
Use the SCSS function @include: @include position(fixed); The ones in parentheses are the parameters.
About the button
Each site has a lot of buttons, but most of the buttons on the same site are the same style, but the size is different. So you can create button.scss separately under the SCSS file and import the file in app.vue. After that, you don’t need to define styles for buttons, except for some special styles, which is easy to maintain. Here is my button file for reference.
.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; }}}Copy the codeIn order to reuse
The popup is currently a fixed structure and cannot be reused elsewhere. It requires some processing to extract all the variable parts, such as titles, buttons, and content. Because there are slots, you don’t have to worry about the content, you have to worry about the title and the button, because the title could be a hint, a warning, etc., and the button could be either confirm, cancel or both. These messages are transmitted from the parent component and need to be received by props.
Add the following code inside props and give some properties default values:
props: {
// Pop the title
title: String.// Button types: 1: Confirm button 2: Cancel button 3: Confirm cancel button
btnType: String.// Button text
sureText: {
type: String.default: "Sure"
},
cancleText: {
type: String.default: "Cancel"
},
showModal: Boolean
}
Copy the codeAfter that, you need to rewrite the code
<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>
Copy the codeReuse code through parameters passed by the parent component, and use $emit to throw custom events out, and then implement its own business logic in the parent component.
Import this component in home.vue and call it
<modal title=" little star "sureText=" Confirm" btnType="1" :showModal="showModal" @submit="go" @cancle="showModal=false" > <template V-slot :body> <p> Give a little star </p> </template> </modal>Copy the codeHere @submit and @cancle are our custom events in the component
The end result is as follows
Css3 has transform and Transition to animate it, but we’re using vue’s built-in < Transition > component to make the popup look like it pops from above.
The transition component
The Transition component can add transitions to elements or components, only to the content it wraps, without rendering extra DOM elements, and without appearing in the component hierarchy that can be examined. It can be transitioned in a number of ways, applying the class approach here.
This diagram is the official diagram of Vue. Simply speaking, V-Enter is the state at the beginning of the animation, V-Enter -active enters the state when the transition takes effect, v-Enter -to is the state at the end of the transition, and leave is the same. For details, go to cn.vuejs.org/v2/guide/tr… Look at it.
When there is no specified name attribute, the transition class name is prefixed with v by default
Slide uses it to wrap the Modal component
<transition name="slide"> <div class="modal" v-show="showModal"> ... . </div> </transition>Copy the codePut it after modal in the style code
&.slide-enter-active {
top: 0;
}
&.slide-leave-active {
top: -100%;
}
&.slide-enter {
top: -100%;
}
Copy the codeAnd you specify attributes to Modal that you want to transition
transition: top 0.5 s;
Copy the codeAfter adding this, the popup box will have a sliding up and down animation.
At this point, our popup box is complete.
You can also make adjustments to suit your needs and develop pop-ups that suit your project.
Make a plug-in
It’s also a little cumbersome to import components every time you use the popup, so you can make it a plug-in that can be called globally without having to import it.
Create index.js in the current directory and register it globally using the install method
import Modal from './Modal.vue'
const component = {
install: function (Vue) {
Vue.component('Modal', Modal)
}
}
export default component
Copy the codeIntroduced in main.js and used globally via vue.use () so that it can be used just like any other UI library without having to be imported every time.
The last
In the actual development, componentization is particularly important, it can help us write higher quality code, but also can make our code easier to maintain, as soon as possible to establish the idea of componentization, writing code is also very helpful.
This article is just a simple understanding of componentization, there are wrong places, welcome big guy pointed out.
Thanks for the comment section.
Hope to finish watching friends can give a thumbs-up, encourage once
The enclosed github.com/anpeier/sho…