这是基于iview的样式,其他组件库可作参考,这里分享两种方法,往下看↓
1、这种方法需要先在template中引用组件,然后在method中调用方法
1)首先在@\src\components下新建loading文件夹,里面新建index.vue
<template>
<div>
<Modal v-model="waitModal"
width="460"
class="loading-modal"
:closable="false"
:mask-closable="false">
<div class="demo-spin-container">
<Spin fix>
<Icon type="ios-loading"
size="18"
class="spin-wait-load"></Icon>
<div>{{ waitContent }}</div>
</Spin>
</div>
<div slot="footer"></div>
</Modal>
</div>
</template>
<script>
export default {
name: 'Loading',
data() {
return {
//等待弹框显示和隐藏
waitModal: false,
//等待弹框提示内容
waitContent: '加载中...',
}
},
methods: {
// 显示弹框
show(msg = '') {
this.waitContent = msg
this.waitModal = true
},
// 隐藏弹框
hide() {
this.waitContent = ''
this.waitModal = false
},
},
}
</script>
<style lang="less" scoped>
/* 等待模态框样式 */
.loading-modal {
.demo-spin-container {
display: inline-block;
width: 100%;
height: 100px;
position: relative;
}
.ivu-modal-body {
height: 200px;
display: flex;
align-items: center;
}
.ivu-modal-footer {
border-top: none;
padding: 0 !important;
}
@keyframes ani-demo-spin {
from {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(360deg);
}
}
}
</style>
2)然后再main.js中引入该组件
import Loading from '@/components/loading'
Vue.component('Loading',Loading)
3)在页面中使用,通过$refs访问Loading组件中的show()方法展示弹框,hide()方法隐藏弹框
<template>
<div>
<Button @click="showModal">点击显示弹框</Button>
<Loading ref="loading"></Loading>
</div>
</template>
<script>
export default {
name: 'Example',
create:{
this.initData()
},
methods: {
initData () {
// 如果在create中使用时,注意要在$nextTick等待组件挂载完后在调用方法,
this.$nextTick(()=>{
this.$refs.loading.show('waiting...')
})
},
showModal () {
// 显示弹框
this.$refs.loading.show('waiting...')
setTimeout(() => {
// 隐藏弹框
this.$refs.loading.hide()
}, 2000);
},
}
}
</script>
2、将组件用插件(plugin)的方式封装
1)用这种方法,components中的写法和上一种方法有些许差别
<template>
<div>
<Modal v-model="waitModal"
width="460"
class="loading-modal"
:closable="false"
:mask-closable="false">
<div class="demo-spin-container">
<Spin fix>
<Icon type="ios-loading"
size="18"
class="spin-wait-load"></Icon>
<div>{{ waitContent }}</div>
</Spin>
</div>
<div slot="footer"></div>
</Modal>
</div>
</template>
<script>
export default {
props: {
waitModal: Boolean,
waitContent: {
type: String,
default: '正在加载中...',
},
},
}
</script>
<style lang="less" scoped>
/* 等待模态框样式 */
.loading-modal {
.demo-spin-container {
display: inline-block;
width: 100%;
height: 100px;
position: relative;
}
.ivu-modal-body {
height: 200px;
display: flex;
align-items: center;
}
.ivu-modal-footer {
border-top: none;
padding: 0 !important;
}
@keyframes ani-demo-spin {
from {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(360deg);
}
}
}
</style>
2)然后在@\src\plugins下新建loading文件夹,里面新建index.js
// 引入我们的loading.vue组件
import Loading from '@/components/loading'
let $vm
export default {
// 必须定义的方法
install(Vue, options) {
if (!$vm) {
//通过Vue.extend()方法创建了一个构造器LoadingPlugin
const LoadingPlugin = Vue.extend(Loading)
//通过new LoadingPlugin()创建了vm实例,并挂载到一个div元素上
$vm = new LoadingPlugin({
el:document.createElement('div')
})
//通过document.body.appendChild(vm.el)将其插入到DOM节点中。
document.body.appendChild($vm.$el)
}
//当创建了$vm实例后,我们可以访问该实例的属性和方法
$vm.waitModal = false
let loading = {
show (text = '加载中...') {
//通过$vm.show就可以改变loading组件的waitModal值来控制其显示隐藏,waitContent 控制传参显示提示文字。
$vm.waitModal = true;
$vm.waitContent = text
},
hide () {
$vm.waitModal = false
}
}
if (!Vue.$loading) {
Vue.$loading = loading
}
//通过Vue.mixin或者Vue.prototype.loading来全局添加了$loading事件,其又包含了show和hide两个方法
Vue.prototype.$loading = Vue.$loading
//Vue.mixin({
// created() {
// this.$loading = Vue.$loading;
// }
//})
},
}
3)在main.js中引入这个插件
// 挂载等待弹框插件放到vue实例中
import Loading from '@/plugins/loading/index.js'
Vue.use(Loading)
4)到这里,就可以直接在method中直接使用了。我们可以直接在页面中使用this.$loading.show()来显示加载,使用this.$loading.hide()来关闭加载。
<template>
<div>
<Button @click="showModal">点击显示弹框</Button>
<Loading ref="loading"></Loading>
</div>
</template>
<script>
export default {
name: 'Example',
create:{
this.initData()
},
methods: {
initData () {
this.$loading.show('waiting...')
},
showModal () {
// 显示弹框
this.$loading.show('waiting...')
setTimeout(() => {
// 隐藏弹框
this.$loading.hide()
}, 2000);
},
}
}
</script>
简单的、不需要传太多的参数的组件封装,个人更推荐使用第二种方案
如有错误的地方,欢迎大佬批评指正。