写了一个全局loading 自定义指令,调用的时候显示loading和“加载中”的提示,如图
现在 “加载中” 是写死的,怎样在调用的地方动态传入别的提示呢,比如 “正在跳转”
代码如下:
loading.vue
<template>
<div
v-show="visible"
class="loading-wrap"
>
<div class="loading-box">
<div class="img-box">
<img
src="./images/loading.gif"
alt=""
>
</div>
<p>加载中...</p>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
components: {},
data() {
return {
visible: false
}
}
}
</script>
<style lang="stylus" scoped>
.loading-wrap
position absolute
left 0
right 0
top 0
bottom 0
background rgba(0, 0, 0, 0.2)
.loading-box
position absolute
left 50%
top 50%
// height 60px
width 60px
transform translate(-50%, -50%)
text-align center
.img-box
width 100%
height 60px
>img
width 60px
>p
margin-top 5px
color $white-color
letter-spacing 1px
</style>
loading.js
import Vue from 'vue'
import Loading from './loading.vue'
const Mask = Vue.extend(Loading)
const toggleLoading = (el, binding) => {
if (binding.value) {
Vue.nextTick(() => {
// 控制Loading组件显示
el.instance.visible = true
// 插入到目标元素
insertDom(el, el, binding)
})
} else {
el.instance.visible = false
}
}
const insertDom = (parent, el) => {
parent.appendChild(el.mask)
}
export default {
bind(el, binding, vnode) {
const mask = new Mask({
el: document.createElement('div'),
data() {}
})
el.instance = mask
el.mask = mask.$el
el.maskStyle = {}
binding.value && toggleLoading(el, binding)
},
update(el, binding) {
if (binding.oldValue !== binding.value) {
toggleLoading(el, binding)
}
},
unbind(el, binding) {
el.instance && el.instance.$destroy()
}
}
App.vue
<template>
<div
id="app"
v-loading="loading"
>
<router-view />
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'App',
computed: {
...mapState('examine', ['loading'])
}
}
</script>
<style lang="stylus">
// @import "./style/index.styl"
#app
position fixed
top 0
bottom 0
font-family 'Avenir', Helvetica, Arial, sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
font-size 14px
letter-spacing 0.05em
width 100%
height 100%
overflow hidden
</style>
###给你举个例子,下面是elementUI的loading使用:
<div
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
</div>
在你的loading.js文件中bind
和update
中都有el
参数;
然后el.getAttribute
方法;这么说你有思路了吗