Vue ——使用动态组件

最新推荐文章于 2024-03-07 15:36:36 发布

原创最新推荐文章于 2024-03-07 15:36:36 发布 · 462 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

这篇博客展示了如何在Vue应用中实现个人资料编辑和密码重置功能。通过点击按钮触发`editPersonInfo`方法，分别打开ChangePassword和ChangePersonInfo组件的抽屉。内容涉及到Vue组件交互、状态管理和用户操作流程。

<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);
},