Summary of Vue component development skills and vue component development skills

Summary of Vue component development skills and vue component development skills
Preface

As I graduated, I wrote a simple personal blog. The project address is my visit to the Project address (by the way, star). This is the first series of summaries. Next, we will imitate the dialog box and the bullet box component of a Low-configuration Element step by step.

Body

Vue single file component development

When you use vue-cli to initialize a project, you will find a HelloWorld. vue file in the src/components folder, which is the basic development mode of a single file component.

// Register Vue. component ('My-component ', {template:' <div> A custom component! </Div> '}) // create the root instance new Vue ({el:' # example '})

Next, write a dialog component.

Dialog

Basic style of the target dialog box component

According to the target style, We can summarize the following:

1. The dialog component requires a titleprops to indicate the title of the pop-up window.
2. The dialog component needs to issue a confirmation event (that is, it tells the parent component to confirm) when the OK button is pressed)
3. Similarly, the dialog component needs to issue a cancellation event.
4. The dialog component must provide a slot for custom content
   

The encoding is as follows:

<Template> <div class = "ta-dialog _ wrapper"> <div class = "ta-dialog"> <div class = "ta-dialog _ header"> <span >{{ title }}</span> <I class = "ios-close-empty" @ click = "handleCancel () "> </I> </div> <div class =" ta-dialog _ body "> <slot> </div> <div class =" ta -dialog _ footer "> <button @ click =" handleCancel () "> cancel </button> <button @ click =" handleOk () "> OK </button> </div> </template> <script> export default {name: 'Dialog ', props: {title: {type: String, default: 'title'},}, methods: {handleCancel () {this. $ emit ('cancel')}, handleOk () {this. $ emit ('OK') },}</script>

This completes the development of the dialog component. The usage is as follows:

<Ta-dialog title = "pop-up window title" @ OK = "handleOk" @ cancel = "handleCancel"> <p> content </p> </ta-dialog>

At this time, we found a problem. When we use v-if or v-show to control the display of the pop-up window, there is no animation !!!, Looks stiff. Coach, I want to add an animation. Now the transition component is playing. Using the transition component combined with css can make a lot of good animations. The following code enhances the dialog component animation:

<Template> <transition name = "slide-down"> <div class = "ta-dialog _ wrapper" v-if = "isShow"> // omitted </div> </transition> </template> <script> export default {data () {return {isShow: true }}, methods: {handleCancel () {this. isShow = false this. $ emit ('cancel')}, handleOk () {this. isShow = true this. $ emit ('OK') },}</script>

We can see that the transition component receives a nameprops. How can we compile css to complete the animation? In a very simple way, write two
The key class (css className) style can be:

.slide-down-enter-active { animation: dialog-enter ease .3s;}.slide-down-leave-active { animation: dialog-leave ease .5s;}@keyframes dialog-enter { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); }}@keyframes dialog-leave { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); }}

In this simple way, we have developed an animation with good results. Note that the name of the transition component is slide-down, the key className of the animation is slide-down-enter-active and slide-down-leave-active.

Encapsulate Dialog for MessageBox

The use of Element MessageBox is as follows:

This. $ confirm ('this operation will permanently delete this file. Continue? ',' Hint ', {confirmButtonText:' OK ', cancelButtonText: 'cancel', type: 'warning '}). then () => {this. $ message ({type: 'success', message: 'deleted successfully! '}) ;}). Catch () =>{ this. $ message ({type: 'info', message: 'deleted already '});});

When I see this code, I feel like it's amazing ). Take a closer look, this component is actually an encapsulated dialog,

Next, I want to encapsulate such a component. First, sort out the following ideas:

1. The usage of Element is this. $ confirm. this is not just to mount the prototype of the Vue.
2. The then of the Element is OK, the catch is canceled, and the promise is OK.

After sorting out the ideas, I started coding:

import Vue from 'vue'import MessgaeBox from './src/index'const Ctur = Vue.extend(MessgaeBox)let instance = nullconst callback = action => { if (action === 'confirm') { if (instance.showInput) {  instance.resolve({ value: instance.inputValue, action }) } else {  instance.resolve(action) } } else { instance.reject(action) } instance = null}const showMessageBox = (tip, title, opts) => new Promise((resolve, reject) => { const propsData = { tip, title, ...opts } instance = new Ctur({ propsData }).$mount() instance.reject = reject instance.resolve = resolve instance.callback = callback document.body.appendChild(instance.$el)})const confirm = (tip, title, opts) => showMessageBox(tip, title, opts)Vue.prototype.$confirm = confirm

At this point, I may wonder how callback is. In fact, I have compiled an encapsulated dialog and named it MessageBox,
In its code, there are two methods:

onCancel() { this.visible = false this.callback && (this.callback.call(this, 'cancel'))},onConfirm() { this.visible = false this.callback && (this.callback.call(this, 'confirm'))},

Yes, that is, call back is performed during confirmation and cancellation. I also want to talk about Vue. extend. MessageBox is introduced in the Code,

Instead of using new MessageBox, I use new Ctur to define data (not just props). For example:

instance = new Ctur({ propsData }).$mount()

At this time, there is actually no MessageBox on the page, we need to execute:

document.body.appendChild(instance.$el)

If you do this directly, you may find that there is no animation when MessageBox is opened, but there is an animation when it is closed. The solution is also very simple,
AppendChild is invisible, and then the code like this is used:

Vue.nextTick(() => instance.visible = true)

In this way, there will be animations.

Summary

1. You can use transition and css to achieve good animation. The name of the transition component determines the names of the two key css classes: [name]-enter-active and [name]-leave-active.
2. Through Vue. extend inherits the constructor of a component (if you don't know how to say it is appropriate, let's talk about it first), and then through this constructor, You can implement custom attributes of the component (use scenario: js call component)
3. When js calls a component, in order to maintain the animation effect of the component, You can first document. body. appendChild and then Vue. nextTick () => instance. visible = true)

At this point, the simple Vue component development is summarized, I write the relevant code in the address, https://github.com/mvpzx/elapse/tree/master/be/src/components