Vue.prototype.$Jmessage.loading('登录已过期，正在重新登陆', 0);转化为vue3.x

在Vue 3中，由于不再直接操作`this`或全局实例`Vue.prototype`，你需要将这个方法转换成组件内的响应式状态或者使用自定义指令。这里我们可以创建一个自定义的`loading`指令，并封装在一个独立的插件里。假设你有一个名为`LoadingPlugin`的文件：

// LoadingPlugin.js
import { defineComponent } from 'vue';

export const Loading = defineComponent({
  props: {
    message: {
      type: String,
      required: true,
    },
    duration: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    return () => {
      // 使用ref存储加载状态和消息
      const loadingRef = ref(false);
      
      // 模拟加载动画或异步操作
      useEffect(() => {
        if (props.duration > 0) {
          setTimeout(() => {
            loadingRef.value = false;
          }, props.duration * 1000);
        }
      }, [props.duration]);

      // 定义指令
      const loadingDirective = {
        install(app) {
          app.directive('loading', {
            bind(el, binding, vnode) {
              el.textContent = props.message;
              loadingRef.value = true;
            },
            update(el, binding, vnode) {
              if (!binding.value) {
                loadingRef.value = false;
              }
            },
            unbind(el, binding, vnode) {
              loadingRef.value = false;
            },
          });
        },
      };

      // 注入指令到Vue原型上
      Object.defineProperty( Vue.prototype, '$loading', {value: loadingDirective.install});
    };
  },
});

然后在你的组件中使用它：

<template>
  <div v-loading="isLoading" :message="$t('登录已过期，正在重新登陆')" :duration="0"></div>
</template>

<script>
import { ref } from 'vue';
import Loading from '@/plugins/LoadingPlugin.vue'; // 引入自定义Loading组件

export default {
  directives: {
    loading: Loading,
  },
  setup() {
    const isLoading = ref(false);

    // ...其他组件逻辑...

    // 当需要显示加载提示时设置isLoading为true
    // $loading().install(this.app); 这样写在Vue 3已经不需要了
    return { isLoading };
  },
};
</script>