drawer.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <el-drawer
  3. :visible.sync="closeDrawerTemp"
  4. :with-header="false"
  5. direction="rtl"
  6. size="90%"
  7. append-to-body
  8. :before-close="closeDrawer">
  9. <div class="detail__panel">
  10. <router-view v-if="closeDrawerTemp"/>
  11. </div>
  12. </el-drawer>
  13. </template>
  14. <script>
  15. import {mapGetters} from 'vuex'
  16. export default {
  17. computed:{
  18. ...mapGetters({
  19. closeDrawerTemp:'closeDrawerTemp',
  20. historyRouter:'historyRouter'
  21. })
  22. },
  23. data () {
  24. return {
  25. }
  26. },
  27. watch:{
  28. closeDrawerTemp (val) {
  29. val === false ? this.$emit('onSuccess'):''
  30. }
  31. },
  32. methods:{
  33. closeDrawer (done) {
  34. if (this.historyRouter) {
  35. console.log(this.historyRouter)
  36. this.$router.replace(this.historyRouter)
  37. this.$store.dispatch('setHistoryRouter',null)
  38. } else {
  39. this.$store.dispatch('changeDetailDrawer',false)
  40. this.$router.go(-1)
  41. }
  42. }
  43. },
  44. mounted () {
  45. var that = this
  46. window.addEventListener("popstate", function(e) {
  47. that.$store.dispatch('changeDetailDrawer',false)
  48. }, false);
  49. }
  50. }
  51. </script>
  52. <style>
  53. </style>
  54. <style scoped>
  55. .detail__panel{
  56. background:#f1f2f3;
  57. overflow-y: scroll;
  58. font-size: 14px;
  59. color:#666;
  60. height:100vh;
  61. }
  62. </style>