Vue ——使用动态组件

贝塔贝卡贝

于 2021-12-05 01:20:15 发布

阅读量426

点赞数

本文链接：https://blog.csdn.net/Kiruthika/article/details/121724765

版权

Vue 组件个人资料密码重置用户接口

关键词由CSDN通过智能技术生成

<v-card-title>
 <v-btn
    depressed
    color="primary"
    class="mr-2"
    @click="editPersonInfo('ChangePassword')"
  >
    <v-icon>mdi-lock-reset</v-icon>重置密码
  </v-btn>
  <v-btn
    depressed
    color="primary"
    @click="editPersonInfo('ChangePersonInfo')"
  >
    <v-icon>mdi-square-edit-outline</v-icon>编辑
  </v-btn>
</v-card-title>
<Component
      :is="sheet_editor"
      :show="drawer_status"
      is_modify="edit"
      device="pc"
      type="edit"
      :personInfo="personInfo"
    />

import ChangePassword from "../drawer/ChangePassword";
import ChangePersonInfo from "../drawer/ChangePersonInfo";

const EDITORS = {
  ChangePassword,
  ChangePersonInfo
};

export default{
	data(){
		return {
			drawer_status: [false, false],
      		sheet_editor: null,
		}
	},
	methods:{
		editPersonInfo(type) {
	      this.sheet_editor = EDITORS[type];
	      setTimeout(() => {
	        this.$set(this.drawer_status, 0, true);
	      }, 1);
    	}
	}


}
editPersonInfo(type) {
  this.sheet_editor = EDITORS[type];
  setTimeout(() => {
    this.$set(this.drawer_status, 0, true);
  }, 1);
},