如何在nativescript-vue中实现页面加载器？

tns create my-app --template nativescript-vue-template
cd my-app

tns plugin add nativescript-loading-indicator

// loading-indicator.js
import { LoadingIndicator } from 'nativescript-loading-indicator';

const loader = new LoadingIndicator();

const options = {
  message: 'Loading...',
  progress: 0.65,
  android: {
    indeterminate: true,
    cancelable: false,
    max: 100,
    progressNumberFormat: "%1d/%2d",
    progressPercentFormat: 0.53,
    progressStyle: 1,
    secondaryProgress: 1
  },
  ios: {
    details: "Additional detail note!",
    margin: 10,
    dimBackground: true,
    color: "#4B9ED6", // color of indicator and labels
    backgroundColor: "yellow",
    userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
    hideBezel: true, // default false, can hide the surrounding bezel
  }
};

export { loader, options };

<template>
  <Page>
    <ActionBar title="Home" />
    <StackLayout>
      <Button text="Show Loader" @tap="showLoader" />
      <Button text="Hide Loader" @tap="hideLoader" />
    </StackLayout>
  </Page>
</template>

<script>
import { loader, options } from '../loading-indicator';

export default {
  methods: {
    showLoader() {
      loader.show(options);
      // Simulate a network request or some async operation
      setTimeout(() => {
        this.hideLoader();
      }, 3000); // Hide loader after 3 seconds
    },
    hideLoader() {
      loader.hide();
    }
  }
};
</script>

<style scoped>
/* Add your styles here */
</style>

tns run android
# 或者
tns run ios