有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue加载页面loading(vue封装插件(loading))实现方式

vue 炮渣日记 1周前 (11-22) 11次浏览 已收录 0个评论 扫描二维码
第一步:创建loading.vue文件

vue加载页面loading(vue封装插件(loading))实现方式
<template>
    <div v-show="show" class="container">
        loading
    </div>
</template>
<script>
export default {
    data () {
        return {
            show: false, 
        }
    },
    methods: {
        
    }
}
</script> 

第二步:创建index.js文件

vue加载页面loading(vue封装插件(loading))实现方式

/*eslint-disable*/
import LoadingComponent from './loading.vue'
// let $vm
export default {
    install (_Vue, options) {
        const LoadingConstructor = _Vue.extend(LoadingComponent) 
        const instance = new LoadingConstructor()   //创建alert子实例
        instance.$mount(document.createElement('div')) //挂载实例到我们创建的DOM上
        document.body.appendChild(instance.$el)
        _Vue.prototype.$showLoading = (flag) => {
            instance.show = flag;
        }
    }
} 

第三步:在main.js文件挂载

vue加载页面loading(vue封装插件(loading))实现方式

第四部:页面中使用

vue加载页面loading(vue封装插件(loading))实现方式
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址