Vue ——使用Vuex控制右侧抽屉的开启与隐藏_vue 抽屉 自动隐藏

store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    show_sheet: false
  },
  mutations: {
	show_sheet(state, { show }) {
      state.show_sheet = show;
    },
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

index.vue:

<template>
  <div>
	<v-card-title>配置 <a @click="show_sheet">(修改)</a></v-card-title>
	<Component
      :is="sheet_editor"
      type="edit"
      :allDatas="allDatas"
    />
  </div>
</template>

<script>	
import DetailA from "@/views/DetailA";
import DetailB from "@/views/DetailB";

const EDITORS = {
  DetailA,
  DetailB
};
export default {
	props:{
		allDatas:{
			type:Object
		}
	},
	data(){
		return {
			sheet_editor: null,
			type: null,
		}
	},
	created(){
		this.getCurIdData();
	},
	methods:{
		getCurIdData() {
      		this.type = this.allDatas.type;
    	},
    	show_sheet() {
	      this.sheet_editor = EDITORS[this.type];
	      setTimeout(() => this.$store.commit("show_sheet", { show: true }), 1);
	    },
	},
	watch: {
	    allDatas() {
	      this.getCurIdData();
	      this.getTree();
	    }
  	},
  	components: {
	    DetailA,
	    DetailB,
	  }
}



</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58