梦想之都-俊月星空 › 门户 ›站长分享› 前端开发 › 查看内容

vue开辟自定义的全局公共组件详解

2024-11-2 22:32| 发布者: 2ae29| 查看: 30| 评论: 0

摘要: 目次vue开辟自定义的全局公共组件第一种第二种此处不做先容总结vue开辟自定义的全局公共组件这里我主要先容两种自定义全局公共组件的方法第一种起首在[code]components[/code]中新建一个文件夹，我这里做的是全局

vue开辟自定义的全局公共组件

这里我主要先容两种自定义全局公共组件的方法

第一种

起首在[code]components[/code]中新建一个文件夹，我这里做的是全局加载动画组件所以命名的是[code]Loading[/code]文件夹

如图：

此中[code]index.js[/code]为组件加载文件，[code]index.vue[/code]为组件模板文件

[code]index.js[/code]文件：

[code]// 引入组件 import Loading from './index.vue' // 创建个空对象 const obj = {} // 设置安装方法 obj.install = (Vue) => { // 1. 创建组件构造器 const LoadingConstructor = Vue.extend(Loading) // 2. new 的方式，根据组件构造器，可以创建出来一个组件对象 const loading = new LoadingConstructor() // 3. 将组件对象手动挂载到某一个元素上挂载会替换元素内容,这里创建了一个div元向来作为被替换内容 loading.$mount(document.createElement('div')) // 4. 将组件添加到dom中 document.body.appendChild(loading.$el) // 5. 将$loading挂载到Vue的原型上 Vue.prototype.$loading = loading } // 导出对象 export default obj [/code]

[code]index.vue[/code]文件：

[code]<template> <div class="loading-wrap" v-if="block || bar || water">  <div class="bar-load" v-if="bar"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div>  <div class="block-load" v-if="block"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>  <div class="water-load" v-if="water"> <span class="circle circle1"></span> <span class="circle circle2"></span> </div> </div> </template> <script> export default { data() { return { block: false, bar: false, water: false } }, methods: { // loading展示 show(val) { // 假如没有传入范例，默以为条状loading if (!val) { this.bar = true return } // 假如传入的是对象{范例，加载时间} const { type, duration } = val || {} if (typeof val === 'object') { this[type] = true // 假如duration > 0,否则永久展示loading动画 if (duration && duration > 0) { setTimeout(() => { this[type] = false }, duration) } return } // 假如传入的就是某个loading范例 this[val] = true }, // loading隐藏 hide() { this.block = false this.bar = false } } } </script> <style lang="scss"> .loading-wrap{ position: fixed; top: 0; left: 0; z-index: 999; height: 100%; width: 100%; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; } </style>  <style lang="scss"> .loading-wrap{ .bar-load{ width: 100px; height: 100px; text-align: center; line-height: 100px; position: relative; .item{ display: inline-block; opacity: 0; width: 6px; height: 30px; margin: 0 5px; border-radius: 4px; position: relative; animation: move 1s ease infinite; background: linear-gradient(to bottom, rgb(160, 192, 150), #1989fa, #ffd01e); &:nth-child(2){ animation-delay: .2s; } &:nth-child(3){ animation-delay: .4s; } &:nth-child(4){ animation-delay: .6s; } &:nth-child(5){ animation-delay: .8s; } } } @keyframes move { 0% { height: 20px; opacity: 0; background: linear-gradient(to bottom, rgb(160, 192, 150), #1989fa, #ffd01e); } 50% { height: 50px; margin: -15px 5px; opacity: 1; background: linear-gradient(to bottom, rgb(160, 192, 150), #ffd01e, #1989fa); } 100% { height: 20px; opacity: 0; background: linear-gradient(to bottom, rgb(160, 192, 150), #1989fa, #ffd01e); } } } </style>  <style lang="scss"> .loading-wrap{ .block-load{ width: 150px; height: 15px; margin: 0 auto; text-align: center; span{ display: inline-block; opacity: 0; width: 15px; height: 100%; margin-right: 5px; background: #1989fa; -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-animation: load 1s ease infinite; animation: load 1s ease infinite; &:last-child{ margin-right: 0px; } &:nth-child(1){ -webkit-animation-delay: 0.13s; animation-delay: 0.13s; } &:nth-child(2){ -webkit-animation-delay: 0.26s; animation-delay: 0.26s; } &:nth-child(3){ -webkit-animation-delay: 0.39s; animation-delay: 0.39s; } &:nth-child(4){ -webkit-animation-delay: 0.52s; animation-delay: 0.52s; } &:nth-child(5){ -webkit-animation-delay: 0.65s; animation-delay: 0.65s; } } } @-webkit-keyframes load{ 0%{ opacity: 1; -webkit-transform: scale(1); } 100%{ opacity: 0; -webkit-transform: rotate(90deg) scale(.3); } } @keyframes load{ 0%{ opacity: 1; -webkit-transform: scale(1); } 100%{ opacity: 0; -webkit-transform: rotate(90deg) scale(.3); } } } </style>  <style lang="scss" scoped> .loading-wrap{ .water-load{ width: 100px; height: 100px; margin: 0 auto; text-align: center; background: rgb(41, 134, 196); border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; .circle{ display: inline-block; position: absolute; width: 90px; height: 90px; border-radius: 50%; // border: 5px solid rgb(246, 247, 248); box-shadow: 0 0 0 3px rgb(41, 134, 196); overflow: hidden; } .circle1{ &::before{ content: ''; position: absolute; top: 0; left: 50%; width: 150%; height: 150%; border-radius: 40%; background: rgb(240, 228, 228); animation: moveingOne 5s linear infinite; } &::after{ content: ''; position: absolute; top: 0; left: 50%; width: 150%; height: 150%; border-radius: 45%; background: rgba(240, 228, 228, 0.2); animation: moveingTwo 8s linear infinite; } } .circle2{ &::before{ content: ''; position: absolute; top: 0; left: 50%; width: 150%; height: 150%; border-radius: 42%; background: rgb(240, 228, 228); animation: moveingThree 11s linear infinite; } &::after{ content: ''; position: absolute; top: 0; left: 50%; width: 150%; height: 150%; border-radius: 40%; background: rgba(240, 228, 228, 0.2); animation: moveingFour 14s linear infinite; } } @keyframes moveingOne{ 0%{ transform: translate(-55%,-65%) rotate(0deg); } 100%{ transform: translate(-55%,-65%) rotate(360deg); } } @keyframes moveingTwo{ 0%{ transform: translate(-50%,-60%) rotate(0deg); } 100%{ transform: translate(-50%,-60%) rotate(360deg); } } @keyframes moveingThree{ 0%{ transform: translate(-50%,-65%) rotate(0deg); } 100%{ transform: translate(-50%,-65%) rotate(360deg); } } @keyframes moveingFour{ 0%{ transform: translate(-45%,-60%) rotate(0deg); } 100%{ transform: translate(-45%,-60%) rotate(360deg); } } } } </style>[/code]

这是我自己开辟的加载动画，各位可直接复制利用

组件模板开辟好后，接下来就是在[code]vue[/code]的入口文件[code]main.js[/code]中进行引入

[code]main.js[/code]文件里参加以下代码：

[code]import Vue from 'vue' // 导入组件 import loading from '@/components/Loading' // 利用 Vue.use(loading) [/code]

接下来等项目跑起来后我们就可以根据在组件加载文件[code]index.js[/code]内里设置的调用方法进行全局调用了

我设置的是：

[code] // 将$loading挂载到Vue的原型上 Vue.prototype.$loading = loading[/code]

再看[code]index.vue[/code]文件里[code]methods[/code]设置的方法，

因此全局调用的方法就是：

[code]// 显示 this.$loading.show() // show({ obj }) 可担当传参 // this.$loading.show(arguments) // 显示 // arguments为参数可传：对象、字符串、或者不传 // 对象：{ // type: 'bar' || 'block' || 'water', // loading外形：（bar: 条状，block：方块状, water: 水波状）, // duration: 3000 // loading展示时间，不传或者传0就不绝展示 // } // 比方：this.$loading.show({ // type: 'bar', // duration: 3000 // }) // 字符串：this.$loading.show('bar') // 或者不传：this.$loading.show() // 不传默认loading展示范例为bar // this.$loading.hide() // 隐藏 // 隐藏 this.$loading.hide()[/code]

第一种全局公共组件就这么开辟好了，接下来是别的一种