Preface
As it becomes more and more popular, related plug-ins are constantly being contributed, countless. For example, the officially recommended vue-router, vuex, etc. are all very excellent plug-ins. However, more of us are still at the stage of use and are less able to develop ourselves. So next we will use a simple vue-toast plug-in to understand the development and use of plug-ins.
Understand the plug-in
If you want to develop a plug-in, you must first understand what a plug-in looks like.
The plugin should have a public method install . The first parameter of this method is the Vue constructor, and the second parameter is an optional option object:
= function (Vue, options) {
= function () { // 1. Add global methods or attributes, such as: vue-custom-element // Logic... }
('my-directive', { // 2. Add global resources: directives/filters/transitions, etc., such as vue-touch bind (el, binding, vnode, oldVnode) {
// Logic... }
...
})
({
created: function () { // 3. Add some component options through the global mixin method, such as: vuex // Logic... }
...
})
.$myMethod = function (options) { // 4. Add instance methods, by adding them to // Logic... }
}
The vue-toast plugin we will talk about next is implemented by adding instance methods. Let's take a look at a small example first. Create a new js file to write the plugin:
//
var Toast = {};
= function (Vue, options) {
.$msg = 'Hello World';
}
= Toast;
In , you need to import and use the plug-in through the global method ():
// import Vue from 'vue'; import Toast from './'; (Toast);
Then, we get the $msg property defined by the plugin in the component.
//
export default {
mounted(){
(this.$msg); // Hello World
}
}
You can see that the console successfully printed out Hello World. Since $msg can be obtained, we can implement our vue-toast plugin.
Development vue-toast
Requirements: A prompt pops up in the component by calling this.$toast('Network Request Failed') and is displayed at the bottom by default. You can realize display in different locations by calling methods such as this.$() or this.$().
Let’s sort out my ideas. When the prompt pops up, I can add a div to the body to display the prompt information. I will position it by adding different class names to different locations, so I can start writing.
//
var Toast = {};
= function (Vue, options) {
.$toast = (tips) => {
let toastTpl = ({ // 1. Create a constructor and define the template for prompt information template: '<div class="vue-toast">' + tips + '</div>'
});
let tpl = new toastTpl().$mount().$el; // 2. Create an instance and mount it to the place after the document (tpl); // 3. Add the created instance to the body setTimeout(function () { // 4. Remove this prompt after delay of 2.5 seconds (tpl);
}, 2500)
}
}
= Toast;
It seems very simple, so we implemented this.$toast() , and then display different positions.
//
['bottom', 'center', 'top'].forEach(type => {
.$toast[type] = (tips) => {
return .$toast(tips,type)
}
})
Here, pass the type to $toast and process it in different locations in this method. The above said that it is implemented by adding different class names (toast-bottom, toast-top, toast-center). The $toast method needs to be slightly modified.
.$toast = (tips,type) => { // Add type parameter let toastTpl = ({ // Add location class to the template template: '<div class="vue-toast toast-'+ type +'">' + tips + '</div>'
});
...
}
It seems almost done. But if I want to display it at the top by default, it seems a bit redundant for me to call this.$() every time, can I just go where I want this.$toast()? And I don't want to disappear after 2.5s? At this time, we notice the options parameter in (Vue,options). We can pass the parameters we want through options in (). The final plug-in is modified as follows:
var Toast = {};
= function (Vue, options) {
let opt = {
defaultType:'bottom', // Default display location duration:'2500' // Duration }
for(let property in options){
opt[property] = options[property]; // Use options configuration }
.$toast = (tips,type) => {
if(type){
= type; // If there is a pass type, set the position to this type }
if(('vue-toast').length){
// If toast is still there, no more execution return;
}
let toastTpl = ({
template: '<div class="vue-toast toast-'++'">' + tips + '</div>'
});
let tpl = new toastTpl().$mount().$el;
(tpl);
setTimeout(function () {
(tpl);
}, )
}
['bottom', 'center', 'top'].forEach(type => {
.$toast[type] = (tips) => {
return .$toast(tips,type)
}
})
}
= Toast;
This way a simple vue plug-in is implemented and can be packaged and published through npm. Next time you can use npm install to install.
Source code address:vue-toast
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!