new BScroll 设置滚动条 vue3.0 全局loading

function setScroll() {

  scroll = new BScroll(storeListRef.value, {

    bounce: false,

    mouseWheel: true,

    scrollY: true,

    scrollbar: true,

    // observeDOM: true

  });

}

使用

watch(

  () => mapClickIndex.value,

  val => {

    if (val != null) {

      if (isShowDetail.value) {

        handleBack();

        nextTick(() => {

          scroll.scrollToElement(`#storeListItem${val}`, 300);

        });

      } else {

        scroll.scrollToElement(`#storeListItem${val}`, 300);

      }

    }

  }

);

全局loading

组件

  

<!--

 * @Desc:

-->

<template>

  <van-overlay class="loading-page" :show="loading" :z-index="9">

    <van-loading color="#1989fa" />

  </van-overlay>

</template>

<script setup>

import { Loading as VanLoading, Overlay as VanOverlay } from "vant";

const props = defineProps({

  loading: {

    type: Boolean,

    required: true,

  },

});

</script>

<style lang="less" scoped>

.loading-page {

  display: flex;

  justify-content: center;

  align-items: center;

}

</style>

main.js 注册

import PageLoading from "./components/PageLoading/index.vue";

const app = createApp(App); // 通过 createApp 初始化 app

app.component("PageLoading", PageLoading);

使用

 <PageLoading :loading="pageLoading" />

  pageLoading = ref(false),

/**

 * @description: 进行自动登录

 * @return {*}

 */

function doAutoLogin() {

  pageLoading.value = true;

  console.log("auto-login");

  apiAutoLogin()

    .then(res => {

      hanldeLoginData(res);

    })

    .finally(() => {

      pageLoading.value = false;

    });

}