uniapp全局调用自定义loading框或toast消息;
全局调用主要依靠vuex状态管理,实现思路大致是:在自定义loading组件中监听vuex(vuex-uniapp官方文档)中的loadingState当前的显示或隐藏状态,在自定义loading组件中监听到vuex中的状态发生改变时,调用loading组件中控制显示隐藏的方法即可。此时在页面中即可直接修改vuex中的状态从而致使页面显示隐藏自定义loading或toast;美中不足就是需要用到loading的组件中要注册一下组件;
自定义loading组件
<script>
//映射vuex中控制loading显示隐藏的状态到此组件
import { mapState } from "vuex";
export default {
data() {
return {
show: false,
};
},
computed: {
...mapState(["loadingState"]),
},
watch: {
// 监听vuex中的loadingState变化
loadingState(newVal, oldVal) {
if (newVal) {
this.open();
} else {
this.close();
}
// console.log(newVal, oldVal, "监听到loadingState变化");
},
},
methods: {
open() {
this.show = true;
},
close() {
this.show = false;
},
},
};
</script>
vuex
const store = new Vuex.Store({
state: {
loadingState: false,//loading 显示隐藏
},
mutations: {
showLoading(state) {
state.loadingState = true;
},
hideLoading(state) {
state.loadingState = false;
}
}
})
// 到上面这一步其实已经可以使用了,但是为了方便,使用了uni.$emit和uni.$on来全局监听
App.vue
//在onLaunch时,监听全局自定义事件,这样在页面组件或者.js文件中可以直接uni.$emit自定义事件来控制显示隐藏,这样就不需要在用到loading的页面中映射vuex的数据了
<script>
import store from "@/store/index.js";
export default {
onLaunch: function () {
// 监听自定义loading的显示与隐藏方法
uni.$on("showLoading", ()=>{store.commit("showLoading")});
uni.$on("hideLoading", ()=>{store.commit("hideLoading")});
},
};
</script>
调用
uni.$emit('showLoading');
uni.$emit('hideLoading');
Tips:虽然直接在父组件中引入loading子组件然后调用loading中的方法也可以实现,但是抛去每次要给组件绑定ref再通过ref控制组件不说,如果直接引入子组件不通过vuex控制,那么在项目的某个.js文件中,是无法控制自定义loading或toast的显示隐藏,上面所描述的方法解决了此问题,在.js文件中也可调用。示例代码中直接控制了显示隐藏,实际使用中通过vuex控制时携带参数,可以实现更丰富的自定义loading或toast。