Shulou(Shulou.com)05/31 Report--

This article mainly explains the "vue global prompt plug-in how to develop", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "vue global prompt plug-in how to develop" it!

Plug-in

Plug-ins are often used to add global functionality to Vue. There are no strict restrictions on the functional scope of plug-ins-there are generally the following: 1. Add a global method or property. two。 Add global resources: directives / filters / transitions, etc. 3. Add some component options through global blending. 4. Add Vue instance methods by adding them to the Vue.prototype. 5. A library that provides its own API and one or more of the functions mentioned above.

The writing methods of vue plug-ins are generally divided into the above five categories, and their registration and binding mechanisms are as follows:

Export default {install (Vue, options) {Vue.myGlobalMethod = function () {/ / 1. Add global methods or properties, such as: vue-custom-element / / logic.} Vue.directive ('my-directive', {/ / 2. Add global resources: directives / filters / transitions, etc., such as vue-touch bind (el, binding, vnode, oldVnode) {/ / logic.}) Vue.mixin ({created: function () {/ / 3. Add some component options through the global mixin method, such as: vuex / / logic.}) Vue.prototype.$myMethod = function (options) {/ / 4. Add instance methods to implement / / logic.}} by adding them to the Vue.prototype

The above code uses the es6 partial syntax to list four ways to write the plug-in, while install is the main method to register the plug-in, including two parameters (the Vue instance and the custom configuration property options)

Development plug-in

What we mainly use here is the fourth method to register our plug-in function with the Vue.prototype instance.

First, we create a toast folder in plugin to place the plug-in, which contains two files, toast.vue and toast.js

And then after writing our style structure file toast.vue

Here we use a visible variable to control the display of the prompt box, with message as the prompt message

{{message}} export default {data () {return {visible: false, message: ""};}}

Then the methods and handling functions of writing plug-ins in toast.js

Import ToastComponent from'. / toast.vue' / / introduce the toast.vue component export default {/ / export an object containing the method called by the vue registration plug-in install install: function (Vue) {const ToastConstructor = Vue.extend (ToastComponent) / / generate the toast.vue component as a subclass of Vue const instance = new ToastConstructor () / / generate an instance of the subclass instance.$mount (document.createElement ('div')) / / mount this instance on the newly created div and add it to body document.body.appendChild (instance.$el) / / register a method $toast through the prototype of Vue, with two parameters (msg is the prompt text) Duration is delayed shutdown) Vue.prototype.$toast = (msg, duration = 1500) = > {if (instance.visible) return / / visible is a variable of the toast.vue component that is used to control the display of the prompt box instance.message = msg; instance.visible = true; setTimeout (() = > {/ / default delay 1.5s to close the prompt box instance.visible = false;}, duration);}

In this way, we have completed the encapsulation of the component, isn't it very simple?

Use plug-ins

Now introduce our packaged plug-in into main.js

Import toast from'. / plugin/toast'Vue.use (toast)

Then we can use it in the component.

This.$toast ('prompt text')

We now add styling and excessive effects to toast.vue to make it look more friendly. Here is the full contents of the toast.vue file.

{{message}} export default {data () {return {visible: false, message: ""};}}; .dialog-tips {min-width: 380px; box-sizing: border-box; border-radius: 4px; border: 1px solid # e1f3d8; position: fixed; left: 50%; top: 20px; transform: translateX (- 50%); background-color: # f0f9eb; overflow: hidden Padding: 15px 15px 15px 20px; display: flex; align-items: center; color: # 67c23a;} .clients-fade-enter, .clients-fade-leave-to {margin-top:-30px; opacity: 0;} .clients-fade-enter-active,.slide-fade-leave-active {transition: all .3s ease;} .clients-fade-enter-to,.slide-fade-leave {margin-top:0px; opacity:1 } Thank you for reading, the above is the content of "how to develop the vue global prompt plug-in". After the study of this article, I believe you have a deeper understanding of how to develop the vue global prompt plug-in, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.