Vue реализует плагин полноэкранной загрузки и публикует его в репозиторий npm 🎁

Vue.js
Vue реализует плагин полноэкранной загрузки и публикует его в репозиторий npm 🎁

Тот, кто испытал больше всего страданий, тот, кто больше понимает.

предисловие

При выполнении функции загрузки аватара, чтобы пользователь не нажимал несколько раз, при загрузке обычно добавляется маска, чтобы напомнить пользователю: изображение загружается. После завершения загрузки закройте этот слой маски. Я изначально хотел чтобы найти инфраструктуру пользовательского интерфейса, чтобы внедрить ее. Используя эластичный слой, предоставляемый инфраструктурой, я много искал и не нашел ничего удовлетворительного, поэтому просто сделайте ее самостоятельно. Далее я поделюсь с вами тем, как сделать плагин, и сначала покажу конечный эффект:

Реализовать идеи

Задействованные точки знаний:Vue-конструктор,монтирование экземпляра

  • Напишите бизнес-код уровня загрузки, чтобы добиться соответствующих эффектов глобального уровня загрузки.
  • в пакете плагинаindex.jsсоответствующая упаковка
  • Определите объект плагина и реализуйте метод установки
  • Используйте конструктор Vue.extend для создания подкласса с бизнес-кодом уровня загрузки в качестве параметра конструктора.
  • Создайте экземпляр созданного конструктора и смонтируйте его в экземпляре HTMLElement.
  • Вставьте элемент dom в конструкторе в тело
  • Добавить метод экземпляра, подключить к прототипу Vue
  • Реализовать методы отображения и скрытия
  • Разработка плагина завершена

Процесс реализации

  • Создайте среду разработки плагинов

* 如图所示：在一个Vue项目的**src**目录下创建**lib**文件夹，用于存放各种插件
* 在lib文件夹下创建我们的插件文件夹(**FullScreenLoading**)
* 在插件文件夹下分别创建lib文件夹和index.js文件
* 插件文件夹下的lib文件夹用于存放插件需要用到的资源文件
* index.js文件用于实现这个插件的所有逻辑
  • Plug-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:"加载中",
                show:false
            }
        }
    }
</script>

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

</style>
  • Код стиля плагина (FullScreenLoading.css)
body {
    font-family: 'Inconsolata', monospace;
    overflow: hidden;
}
/*全屏遮罩层*/
#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.1em;
    font-size: 14px;
    font-weight: bold;
    color: white;
}


/*动画定义*/
@keyframes ring {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes solidCircle {
    0% {
        width: 0;
        height: 0;
    }
    75% {
        width: 40px;
        height: 40px;
    }
    100% {
        width: 0;
        height: 0;
    }
}
  • Логический файл плагина (index.js)
// 引入对应的组件
import loading from "./lib/FullScreenLoading";

// 定义对象:开发插件对象
const LoadPlugin = {
    // 插件包含install方法
    install(Vue,options){
        // 使用Vue.extend构造器，创建一个子类,参数为引入的FullScreenLoading组件
        const loadingSubclass = Vue.extend(loading);
        // 实例化loadingSubclass，挂载到HTMLElement实例上
        const Profile = new loadingSubclass({
            el: document.createElement('div')
        });
        // 插入到body中，FullScreenLoading.vue中的template模板内容将会替换挂载的元素，Profile.el中到内容最终为模版到内容
        document.body.appendChild(Profile.$el);
        // 判断是否有传参数：替换组件内的默认显示数据
        if(options){
            if(options.tips){
                Profile.tips = options.tips;
            }
        }
        // 添加实例方法，挂载至Vue原型
        Vue.prototype.$fullScreenLoading = {
            // 定义显示隐藏的方法
            show(tips) {
                Profile.show = true;
                if (tips) {
                    // 替换组件的默认数据
                    Profile.tips = tips;
                }
            },
            hide() {
                Profile.show = false;
            }
        };
    }
};

// 导出对象
export default LoadPlugin;

На этом разработка плагина завершена. Эффект, достигнутый в начале этой статьи, адрес проекта:chat-system

Выпуск плагина

  • Перейдите в папку FullScreenLoading в терминале.
  • Создайте README.md, чтобы написать описание плагина и его использование.
  • терминальное исполнениеnpm initкоманда для создания файла package.json
 npm init
 # 应用包名，要先去https://www.npmjs.com/官网查一下是否与你的包重复
 package name: (@likaia/vue-fullscreenloading)
 # 版本号
 version: (1.0.0)
 # 包描述
 description: 全屏加载层插件,提升用户体验，防止用户误操作。
 # 入口文件
 entry point: (index.js)
 # 测试命令，直接回车即可
 test command: 
 # 项目git仓库地址
 git repository: https://github.com/likaia/chat-system.git
 # 关键词：用户在npm官网搜索包时所用的关键词
 keywords: vue-loading FullScreenLoading
 # 作者
 author: likaia
 # 开源协议，直接回车即可
 license: (ISC)
  • Опубликовать в репозиторий npm
# 登录，没有账号的需要先去官网注册：https://www.npmjs.com/
npm login

# 发布至npm
npm publish --access public

Авторизация успешна

Опубликовано успешно

  • Найдите только что выпущенный пакет на официальном сайте npm.

Используйте плагины

  • Терминальное исполнение:yarn add @likaia/vue-fullscreenloading

  • Ссылка в main.js
import FullScreenLoading from '@likaia/vue-fullscreenloading'
Vue.use(FullScreenLoading);
  • использовать в бизнесе
uploadAvatar:function (e) {
  console.log("上传点击了");
  // 显示全局加载层
  this.$fullScreenLoading.show("上传中");
  let file = e.target.files[0];
  // 构造form对象
  let formData = new FormData();
  // 后台取值字段 | blob文件数据 | 文件名称
  formData.append("file",file,file.name);
  // 调用上传api
  this.$api.fileManageAPI.baseFileUpload(formData).then((res)=>{
    console.log(res);
    const fileName = `${base.lkBaseURL}/uploads/${res.fileName}`;
    // 更改默认头像状态
    this.isDefaultAvatar = false;
    // 头像赋值
    this.avatarSrc = fileName;
    // 隐藏全局加载层
    this.$fullScreenLoading.hide();
  });
  console.log(e);
}

напиши в конце

  • Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, ставьте лайк и подписывайтесь 😊
  • Эта статья была впервые опубликована в Наггетс, если вам нужно перепечатать, пожалуйста, оставьте сообщение в области комментариев 💌
Категории