Who has experienced more suffering, who knows more things.


Head is doing the upload function, in order to prevent users from multiple clicks, usually add a mask when uploading, prompt the user: the pictures are on the cross, upload finished, close the layer mask, wanted to find a UI framework is introduced, using the framework layer thickness, find a lot of didn’t find satisfactory, simply make a 😂. Let me share with you how to make a plugin. First, LET me show you the final result:

Implementation approach

Vue constructor, instance mount

  • Write load layer business code to achieve the relevant effect of the global load layer
  • This is wrapped in the plugin package’s index.js
  • Define plug-in objects to implement the install method
  • Using the vue.extend constructor, subclass the loading layer business code as an argument to the constructor
  • Instantiate the created constructor and mount it to an HTMLElement instance
  • Insert the DOM element from the constructor into the body
  • Add instance methods and mount them to the Vue prototype
  • Implement show and hide methods
  • Plug-in development completed

The implementation process

  • Build the plug-in development environment

* As shown in the figure: Create the **lib** folder in the ** SRC ** directory of a Vue project, **FullScreenLoading** FullScreenLoading** FullScreenLoading** FullScreenLoading** FullScreenLoading** FullScreenLoading* The index.js file is used to implement all the logic for this plug-inCopy the code
  • Plug-in business code (fullscreenloading.vue)
    <div id="loadingPanel" v-if="show">
        <div class="container-panel">
            <div class="arc"></div>

    export default {
        name: "FullScreenLoading".data(){

<style src="./css/FullScreenLoading.css">

Copy the code
  • Plugin style code (fullScreenLoading.css)
body {
    font-family: 'Inconsolata', monospace;
    overflow: hidden;
/* Full screen mask layer */
    width: 100%;
    height: 100%;
    background: rgba(;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
#loadingPanel .container-panel{
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
#loadingPanel .container-panel .arc {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border-top: 2px solid #ffea29;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    animation: ring 2s infinite linear;
#loadingPanel .container-panel .arc::before {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border-top: 2px solid #8d29ff;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    animation: ring 4s infinite linear reverse;
    content: "";
#loadingPanel .container-panel .arc::after {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    border-top: initial;
    border-left: initial;
    border-right: initial;
    animation: solidCircle 1s infinite;
    content: "";
    background: snow;

#loadingPanel .container-panel h1 {
    position: absolute;
    height: 40px;
    margin: auto;
    top: 200px;
    left: 0;
    right: 0;
    bottom: 0;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1 em;
    font-size: 14px;
    font-weight: bold;
    color: white;

/* Animation definition */
@keyframes ring {
    100% {
        transform: rotate(360deg); }}@keyframes solidCircle {
    0% {
        width: 0;
        height: 0;
    75% {
        width: 40px;
        height: 40px;
    100% {
        width: 0;
        height: 0; }}Copy the code
  • Plugin logic file (index.js)
// Import the corresponding component
import loading from "./lib/FullScreenLoading";

// Define objects: develop plug-in objects
const LoadPlugin = {
    // The plug-in contains the install method
        // Create a subclass of the imported FullScreenLoading component using the vue. extend constructor
        const loadingSubclass = Vue.extend(loading);
        // Instantiate loadingSubclass and mount it to an HTMLElement instance
        const Profile = new loadingSubclass({
            el: document.createElement('div')});The template content in fullscreenLoading. vue will replace the mounted element, and the content in profile.el will eventually be template to content
        // Check whether there is a transmission parameter: replace the default display data in the component
            if(options.tips){ Profile.tips = options.tips; }}// Add an instance method to mount to the Vue prototype
        Vue.prototype.$fullScreenLoading = {
            // Define methods to show hiding
            show(tips) {
                Profile.show = true;
                if (tips) {
                    // Replace the default data for the componentProfile.tips = tips; }},hide() {
                Profile.show = false; }}; }};// Export objects
export default LoadPlugin;
Copy the code

At this point, plug-in development is complete. Implementation effect at the beginning of this article, project address: chat-system

Plug-in release

  • Go to the FullScreenLoading folder on the terminal
  • Create readme. md and write a description of the plug-in and how to use it
  • The terminal runs the NPM init command to generate package.json file
 npm init
 Check https://www.npmjs.com/ to see if the package name is the same as yours
 package name: (@likaia/vue-fullscreenloading)
 # version numberVersion: (1.0.0)# package descriptionDescription: Load layer plug-ins in full screen to improve user experience and prevent user misoperations.# import file
 entry point: (index.js)
 Test the command
 test command: 
 Git repository address
 git repository: https://github.com/likaia/chat-system.git
 # Keywords: keywords that users use to search for packages on the NPM website
 keywords: vue-loading FullScreenLoading
 # the author
 author: likaia
 # Open Source license
 license: (ISC) 

Copy the code
  • Publish to the NPM repository
If you do not have an account, you need to register at https://www.npmjs.com/
npm login

# Publish to NPM
npm publish --access public 
Copy the code

Login successful

Release success

  • Search the NPM website for the packages just released

  • Package address: vue-fullscreenloading

The use of plug-in

  • Terminal Run yarn add @likaia/vue-fullscreenloading

  • Reference it in main.js
import FullScreenLoading from '@likaia/vue-fullscreenloading'
Copy the code
  • Used in business
uploadAvatar:function (e) {
  console.log("Upload click");
  // Display the global loading layer
  this.$fullScreenLoading.show("Up in");
  let file = e.target.files[0];
  // Construct the form object
  let formData = new FormData();
  / / the background field values | | blob file data file name
  // Call the upload API
  this.$api.fileManageAPI.baseFileUpload(formData).then((res) = >{
    const fileName = `${base.lkBaseURL}/uploads/${res.fileName}`;
    // Change the default profile picture state
    this.isDefaultAvatar = false;
    // head assignment
    this.avatarSrc = fileName;
    // Hide the global loading layer
Copy the code

Write in the last

  • If there are any errors in this article, please correct them in the comments section. If this article helped you, please like it and follow 😊
  • This article was first published in the Nuggets. If you need to reprint it, please leave a comment at 💌