Vue.prototype.$Jmessage.loading('登录已过期,正在重新登陆', 0)vue2.x转化为vue3.x
时间: 2024-09-15 07:06:10 浏览: 12
在Vue 2.x中,`this.$Jmessage.loading('登录已过期,正在重新登陆', 0)` 是使用的第三方插件 `vue-resource` 或者 `vue-jq` 中的 `$Jmessage` 对象,用于显示加载提示信息。但在Vue 3.x中,由于`$Jmessage` 这样的全局混入(global mixin)已经不再推荐,更倾向于使用自定义指令或者组件来管理这类功能。
如果想在Vue 3中实现类似的功能,你可以创建一个自定义的 loading 组件,然后在需要的地方使用它。例如:
```html
<!-- Loading.vue -->
<template>
<div v-if="showLoading" class="loading-message">
<span>{{ message }}</span>
</div>
</template>
<script>
export default {
props: {
message: { type: String, required: true },
timeout: { type: Number, default: 0 }
},
data() {
return {
showLoading: false,
};
},
mounted() {
this.showLoading = true;
setTimeout(() => (this.showLoading = false), this.timeout);
},
};
</script>
```
然后在需要的地方使用这个组件:
```html
<button @click="loginLoading">点击登录</button>
<script>
import Loading from './Loading.vue';
export default {
methods: {
loginLoading() {
this.$emit('loading', '登录已过期,正在重新登陆', 2000); // 2秒后消失
},
},
components: {
Loading,
},
};
</script>
```
这样,当触发登录事件时,会显示一个加载提示,并在给定时间后自动消失。