Loading效果

最新推荐文章于 2024-08-03 23:03:36 发布

。。媛。。

最新推荐文章于 2024-08-03 23:03:36 发布

阅读量116

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/caoyuan258/article/details/111995633

版权

Vue 组件加载指示器 van-loading 状态管理

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

common=》loading.vue

<template>
  <div>
    <van-overlay :show="true" >
      <div class="wrapper" >
        <van-loading size="54px" vertical>加载中...</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  mounted() {
      console.log(this.$store.state.num)
  },
  methods: {},
  components: {}
};
</script>
<style scoped>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
</style>

App.vue

<template>
  <div id="app">    
    <router-view/>
     <Loading v-show="this.$store.state.loading"> </Loading>   
  </div>
</template>

<script>
import Loading from '@/common/Loading'
export default {
  name: 'App',
   components: {
    Loading
  }
}
</script>

store=>index

  state:{
        loading:true,
    },
    mutations:{
         //设置loading效果
         setLoading(state,payload){
            state.loading=payload
    }