What are the techniques for Vue component development?-JS Tutorial-php.cn

This time I will bring you the skills of Vue component development and the notes of Vue component development. The following is a practical case, let’s take a look.

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. This is the basic development mode of single-file components.

// 注册
Vue.component('my-component', {
 template: '<p>A custom component!</p>'
})
// 创建根实例
new Vue({
 el: '#example'
})

Copy after login

Next, start writing a dialog component.

Dialog

The basic style of the target dialog component is as follows:

According to the target style, it can be summarized:

The dialog component needs a titleprops to indicate the pop-up window title
The dialog component needs to emit a confirmation event when the OK button is pressed (that is, tell the parent component that it is confirmed)
Similarly, the dialog component needs to emit a cancellation event
The dialog component needs to provide a slot to facilitate custom content

Then, the encoding is as follows:

<template>
 <p class="ta-dialogwrapper">
 <p class="ta-dialog">
  <p class="ta-dialogheader">
  <span>{{ title }}</span>
  <i class="ios-close-empty" @click="handleCancel()"></i>
  </p>
  <p class="ta-dialogbody">
  <slot></slot>
  </p>
  <p class="ta-dialogfooter">
  <button @click="handleCancel()">取消</button>
  <button @click="handleOk()">确定</button>
  </p>
 </p>
 </p>
</template>
<script>
export default {
 name: 'Dialog',
 props: {
 title: {
  type: String,
  default: '标题'
 },
 },
 methods: {
 handleCancel() {
  this.$emit('cancel')
 },
 handleOk() {
  this.$emit('ok')
 },
 },
}
</script>

Copy after login

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

<ta-dialog 
 title="弹窗标题" 
 @ok="handleOk" 
 @cancel="handleCancel">
 <p>我是内容</p>
</ta-dialog>

Copy after login

At this time, I discovered a problem. When using v-if or v-show to control the display of the pop-up window, there is no animation! ! ! , looks very stiff. Coach, I want to add animation. At this time, the transition component comes into play. Using the transition component combined with css can create many animations with good effects. Next, enhance the animation of the dialog component. The code is as follows:

<template>
 <transition name="slide-down">
 <p class="ta-dialogwrapper" v-if="isShow">
  // 省略
 </p>
 </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>

Copy after login

You can see that the transition component receives a nameprops, so how to write css to complete the animation? A very simple way is to write two
key class (className of css) styles:

.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);
 }
}

Copy after login

It is so simple to develop a good animation effect. Note that the name of the transition component is slide-down, and the key classNames of the written animation are slide-down-enter-active and slide-down-leave-active.

Encapsulate Dialog and make MessageBox

The usage of Element's MessageBox is as follows:

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
 confirmButtonText: '确定',
 cancelButtonText: '取消',
 type: 'warning'
}).then(() => {
 this.$message({
 type: 'success',
 message: '删除成功!'
 });
}).catch(() => {
 this.$message({
 type: 'info',
 message: '已取消删除'
 });   
});

Copy after login

When I saw this code, I felt so magical, so magical, so amazing (three times in a row). Take a closer look, this component is actually an encapsulated dialog,

Next, I will also encapsulate such a component. First, let’s sort out our thoughts:

The usage method of Element is this.$confirm. Isn’t this just a matter of hanging it on Vue’s prototype?
Element’s then means confirmation, catch means cancel, and just promise will do.

After sorting out my ideas, I started coding:

import Vue from 'vue'
import MessgaeBox from './src/index'
const Ctur = Vue.extend(MessgaeBox)
let instance = null
const 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

Copy after login

At this point, you may be wondering how to call back. In fact, I wrote 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'))
},

Copy after login

That's right, callbacks are performed when confirming and canceling. I also want to talk about Vue.extend, which introduces MessageBox into the code,

I don't use new MessageBox directly but use new Ctur, because this can define data (not just props), for example:

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

Copy after login

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

document.body.appendChild(instance.$el)

Copy after login

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

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

Copy after login

This way there will be animation.

Summarize

Achieve nice animations through transitions and css. Among them, the name of the transition component determines the two key classes for writing css, named [name]-enter-active and [name]-leave-active
Inheriting a component through Vue.extendConstructor (I don’t know how to say it properly, so I’ll just say it this way), and then through this constructor, you can customize the component-related properties (usage scenario: js calls the component)
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. The relevant code I wrote is at the address, https://github.com/mvpzx/elapse/tree/master/be/src/components

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!