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' })
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
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>
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>
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>
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); } }
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: '已取消删除' }); });
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?
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
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')) },
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()
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 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)
This way there will be animation.
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
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!
Recommended reading:
How to deal with null parameters in post in vue
##axios cannot accept springMVC when sending a post request How to handle parameters
The above is the detailed content of What are the techniques for Vue component development?. For more information, please follow other related articles on the PHP Chinese website!