想自定义一个loading加载层,于是看了看vue的插件文档我用的是第四种方法,在Vue的原型上添加一个loading方法,具体步骤:
1,新建一个loading文件夹,这是你的插件的文件夹,里边包含index.js和一个src,src里就是你用的loading的组件模板,
目录结构:
├── loading
│ ├── src
│ │ ├── loading.vue//组件
│ ├── index.js
然后index.js代码如下:
export default {
install(Vue){
let tpl;
// 弹出框
Vue.prototype.loading = () =>{
var loading = Vue.extend(require('./src/loading.vue').default);
tpl = new loading().$mount().$el; // 创建实例,挂载到文档以后的地方
document.body.appendChild(tpl);
return tpl
}
Vue.mixin({
methods: {
hideLoading: function () {
document.body.removeChild(tpl);
}
}
})
}
}
因为考虑到以后会移除这个loading层,所以声明一个公共变量tpl,方便到时候移除。
可能是我都vue-loader比较新的原因吧,Vue.extend(require(‘./src/loading.vue’).default)不加“default”会报一个错误(vue2: template or render function not defined)
参考的这里,在Vue全局中混入一个methods(hideLoading)用来隐藏那个loading层。
2,loading.vue的代码如下:
<template>
<div class="loading_container" @touchmove.prevent @scroll.prevent>
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
<p class="loadin_tip">{
{
loadingText}}</p>
</div>
</div>
</template>
<script type="text/javascript">
export default {
name: "loading",
data(){
return {
}
},
props:{
loadingText:{
type:String,
default:"加载中..."
}
}
}
</script>
<style type="text/css" lang="less" scoped>
.loading_container{
position:fixed;
top: