Vuejs自定义全局组件--loading

不管是使用框架，还是不使用任何的框架，我们都不可避免的需要与“加载中……”打交道，刚刚学习了Vuejs自定义组件的写法，就现学现卖，介绍一下吧！

先看一下目录结构，一般情况下，每一个组件都新建一个新的文件夹，里面包含对应的vue文件，和Index.js，如下图：

如果想要像Mint-UI一样，在任一.vue文件中，仅仅使用一个<loading></loading>标签即可使用该组件的话，其实也没有那么的深奥难懂的。

在main.js文件中：

import Loading from "./components/loading/index"
Vue.use(Loading);

　也就两句代码解决，一句是ES6语法引入该loading模块，另一句则是使用use来使用该模块，　Vue.use(Loading)

　这种全局组件，其实说起来很像jquery中的自定义插件一样，这里我们所有代码写在./components/loading/index.js文件中：

import LoadingComponent from "./Loading.vue";
export default {install: function (Vue) {Vue.component("loading", LoadingComponent)}
}

　　也是两句代码，一句引入 "./Loading.vue"，下一句就是将该组件导出，这里就存在一个关键点：install，只有使用install了，我们在main.js中，才能够直接use该组件，而install函数默认自带一个参数Vue，也就是我们正在使用的Vue对象，然后定义loading这一组件，也是正常的Vue定义组件的方法: Vue.component("loading", LoadingComponent)，这里的“loading”的名称，也就是我们后面使用组件时的标签名称。

　　至于该组件长什么样，有什么效果，直接在Loading.vue文件里面定义就可以了，并不受任何其他文件的影响。

　　从网上扒下来一个loading的动画效果的示例：　

<template><div class="loader"><div class="loader-inner pacman"><div></div><div></div><div></div><div></div><div></div></div></div>
</template>

.loader {box-sizing: border-box;display: flex;flex: 0 1 auto;flex-direction: column;flex-grow: 1;flex-shrink: 0;flex-basis: 25%;max-width: 25%;height: 200px;align-items: center;justify-content: center;
}.pacman {position: relative;
}
.pacman > div:nth-child(2) {-webkit-animation: pacman-balls 1s 0s infinite linear;animation: pacman-balls 1s 0s infinite linear; }
.pacman > div:nth-child(3) {-webkit-animation: pacman-balls 1s 0.33s infinite linear;animation: pacman-balls 1s 0.33s infinite linear; }
.pacman > div:nth-child(4) {-webkit-animation: pacman-balls 1s 0.66s infinite linear;animation: pacman-balls 1s 0.66s infinite linear; }
.pacman > div:nth-child(5) {-webkit-animation: pacman-balls 1s 0.99s infinite linear;animation: pacman-balls 1s 0.99s infinite linear; }
.pacman > div:first-of-type {width: 0px;height: 0px;border-right: 25px solid transparent;border-top: 25px solid #399;border-left: 25px solid #399;border-bottom: 25px solid #399;border-radius: 25px;-webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;animation: rotate_pacman_half_up 0.5s 0s infinite; }
.pacman > div:nth-child(2) {width: 0px;height: 0px;border-right: 25px solid transparent;border-top: 25px solid #399;border-left: 25px solid #399;border-bottom: 25px solid #399;border-radius: 25px;-webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;animation: rotate_pacman_half_down 0.5s 0s infinite;margin-top: -50px;
}
.pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5), .pacman > div:nth-child(6) {background-color: #399;width: 15px;height: 15px;border-radius: 100%;margin: 2px;width: 10px;height: 10px;position: absolute;-webkit-transform: translate(0, -6.25px);-ms-transform: translate(0, -6.25px);transform: translate(0, -6.25px);top: 25px;left: 100px;
}@-webkit-keyframes rotate_pacman_half_up {0% {-webkit-transform: rotate(270deg);transform: rotate(270deg); }50% {-webkit-transform: rotate(360deg);transform: rotate(360deg); }100% {-webkit-transform: rotate(270deg);transform: rotate(270deg); } }@keyframes rotate_pacman_half_up {0% {-webkit-transform: rotate(270deg);transform: rotate(270deg); }50% {-webkit-transform: rotate(360deg);transform: rotate(360deg); }100% {-webkit-transform: rotate(270deg);transform: rotate(270deg); } }@-webkit-keyframes rotate_pacman_half_down {0% {-webkit-transform: rotate(90deg);transform: rotate(90deg); }50% {-webkit-transform: rotate(0deg);transform: rotate(0deg); }100% {-webkit-transform: rotate(90deg);transform: rotate(90deg); } }@keyframes rotate_pacman_half_down {0% {-webkit-transform: rotate(90deg);transform: rotate(90deg); }50% {-webkit-transform: rotate(0deg);transform: rotate(0deg); }100% {-webkit-transform: rotate(90deg);transform: rotate(90deg); } }@-webkit-keyframes pacman-balls {75% {opacity: 0.7; }100% {-webkit-transform: translate(-100px, -6.25px);transform: translate(-100px, -6.25px); } }@keyframes pacman-balls {75% {opacity: 0.7; }100% {-webkit-transform: translate(-100px, -6.25px);transform: translate(-100px, -6.25px); } }

转载于:https://www.cnblogs.com/zhuhuoxingguang/p/7193215.html

Vuejs自定义全局组件--loading相关推荐

vue 添加全局组件_自定义vue全局组件(Loading为例)
首先创建一个项目 vue init webpack-simple define-demo //define-demo 项目名称 cd define-demo npm install //安装本次所有需 ...
vue自定义全局组件(或自定义插件)
最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用element-ui的时候是使用Vue.use()语句来使用的,而axios的时候,不用Vue.use ...
Vue.js（5）- 全局组件
全局组件定义组件的语法 Vue.component('组件的名称', { 组件的配置对象 }) 在组件的配置对象中:可以使用 template 属性指定当前组件要渲染的模板结构: 使用组件的语法把 ...
Vue自定义Loading动画，自定义全局JS组件Loading动画【记录】
创建 Loading 目录 loading.vue 代码: <template><div class="cus-loading" v-if="flag& ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
VueJS组件之全局组件与局部组件
全局组件所有实例都能用全局组件. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
vue 添加全局组件_自定义vue2.0全局组件（下篇）
在上篇中,老K为大家介绍了一个初级自定义按钮组件的编写方法.虽然能用,但是还不算完美,可扩展性不够强大.在这一篇中,老K继续为大家完善这个按钮组件. 启动命令窗口, 进入在上篇中我们搭建的vue目录中 ...
Vue.use自定义自己的全局组件
通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-sim ...
vuejs滚动条_Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
前言前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件.支持是否 ...

Vuejs自定义全局组件--loading

Vuejs自定义全局组件--loading相关推荐

最新文章

热门文章