Vue.prototype.$Jmessage.loading('登录已过期,正在重新登陆', 0);完整转化为vue3.x
时间: 2024-09-15 13:06:25 浏览: 43
在Vue 3.x中,你不再可以直接访问`Vue.prototype`,因为它们已经移除了对全局API的直接引用,转而推荐使用Composition API或者Options API。如果你想实现类似的功能,你可以创建一个自定义的`loading`方法,并在需要的地方注入到组件实例或者使用setup钩子。
如果你是通过Composition API(如`ref`和`onMounted`),可以这样做:
```javascript
import { ref, onMounted } from 'vue';
export default {
setup() {
const loading = ref(false);
function setLoading(text, duration) {
loading.value = true;
// 模拟异步操作
setTimeout(() => {
loading.value = false;
if (duration > 0) {
console.log(`${text} 完成,等待${duration}秒`);
}
}, duration || 0);
}
onMounted(() => {
setLoading('登录已过期,正在重新登陆');
});
return {
setLoading,
};
},
}
```
然后在模板中使用这个`setLoading`函数:
```html
<template>
<div v-if="!loading">
<!-- 其他内容 -->
</div>
<span v-if="loading">加载中...</span>
</template>
```
如果你是在Options API下,可以考虑使用`methods`对象:
```javascript
export default {
data() {
return {
loading: false,
};
},
methods: {
setLoading(text, duration) {
this.loading = true;
// 模拟异步操作
setTimeout(() => {
this.loading = false;
if (duration > 0) {
console.log(`${text} 完成,等待${duration}秒`);
}
}, duration || 0);
},
},
mounted() {
this.setLoading('登录已过期,正在重新登陆');
},
};
```
阅读全文