Vue.prototype.$Jmessage.loading('登录已过期，正在重新登陆', 0)； vue2完整转化vue3

这是一个Vue.js 2.x中的自定义指令（`this.$Jmessage`），用于显示加载提示，并带有消息内容和延迟时间。在Vue 3中，由于不再直接操作原型链(`Object.defineProperty`)，而是推荐使用Composition API或Options API来实现类似的功能。

如果你使用的是Vue 3的Composition API，你可以这样做：

import { ref, onMounted } from 'vue';

const showMessage = (msg, timeout = 0) => {
  // 使用ref创建一个状态管理变量
  const loadingMessage = ref('');

  // 当组件挂载时执行该函数
  onMounted(() => {
    setTimeout(() => {
      loadingMessage.value = msg;
    }, timeout);
  });

  // 在模板中通过计算属性引用该变量
  return () => loadingMessage.value;
};

// 在模板中使用
<template>
  <div v-if="showLoadingMessage()">{{ $Jmessage.loading }}</div>
</template>

<script setup>
import {.showMessage } from './utils'; // 或者从其他模块导入

const showLoadingMessage = showMessage('登录已过期，正在重新登录', 0);
</script>

如果你选择Options API，可以创建一个插件（plugin）来处理：

// message-loading.js
export default {
  install(Vue) {
    Vue.prototype.$Jmessage = {
      loading: function(msg, timeout) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.$emit('loading-message', msg, timeout);
          }, timeout);
        });
      },
    };
  },
};

然后在需要的地方使用:

<template>
  <div @loading-message="loadingMessage"></div>
</template>

<script>
import MessageLoading from '@/plugins/message-loading.js';

export default {
  mounted() {
    MessageLoading.install(this);
  },
  methods: {
    loadingMessage(msg, timeout) {
      console.log(`登录已过期，正在重新登录: ${msg}`);
    },
  },
};
</script>