Who has experienced more suffering, who knows more things.
preface
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)
<template>
<div id="loadingPanel" v-if="show">
<div class="container-panel">
<div class="arc"></div>
<h1><span>{{tips}}</span></h1>
</div>
</div>
</template>
<script>
export default {
name: "FullScreenLoading".data(){
return{
tips:"Loading".show:false}}}</script>
<style src="./css/FullScreenLoading.css">
</style>
Copy the code- Plugin style code (fullScreenLoading.css)
body {
font-family: 'Inconsolata', monospace;
overflow: hidden;
}
/* Full screen mask layer */
#loadingPanel{
width: 100%;
height: 100%;
background: rgba(11.11.20.6);
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
install(Vue,options){
// 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
document.body.appendChild(Profile.$el);
// Check whether there is a transmission parameter: replace the default display data in the component
if(options){
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 codeAt 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 codeLogin 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'
Vue.use(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
formData.append("file",file,file.name);
// Call the upload API
this.$api.fileManageAPI.baseFileUpload(formData).then((res) = >{
console.log(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
this.$fullScreenLoading.hide();
});
console.log(e);
}
Copy the codeWrite 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 💌