场景描述:
1. 注册弹出框是用 v-model 绑定数据 showRegisterModal 实现的,点击遮罩层框架会把 showRegisterModal=false
2.REGISTER按钮 showRegisterModal=true
3.showRegisterModal 希望是vuex里面的数据,我们可以在任何地方控制弹出框的开和关。
解决方案
<template> <div class="q-mt-md"> <div> <q-btn label="Register" @click="showRegisterModal=true"/> <q-dialog v-model="showRegisterModal"> <q-card style="400px;"> <Register /> </q-card> </q-dialog> </div> </template> <script> import Register from 'components/Register.vue' export default { components:{Register}, computed:{ showRegisterModal:{ get(){ return this.$store.state.myself.show_register_modal }, set(value){ this.$store.commit('myself/HANDLE_REGISTER_MODAL', value) } } } } </script>
备注
这样实现有点曲线救国,小场景用不到,于是我改进了一下:https://www.cnblogs.com/remly/p/12981671.html