用vue写一个弹窗可以用了修改密码

以下是一个简单的用Vue.js编写的修改密码弹窗组件示例：

<template>
  <div class="password-modal" v-show="show">
    <div class="modal-content">
      <h2>修改密码</h2>
      <form>
        <label for="old-password">旧密码</label>
        <input type="password" id="old-password" v-model="oldPassword">
        <label for="new-password">新密码</label>
        <input type="password" id="new-password" v-model="newPassword">
        <label for="confirm-password">确认密码</label>
        <input type="password" id="confirm-password" v-model="confirmPassword">
        <button type="submit" @click.prevent="submitForm">提交</button>
      </form>
      <button class="close" @click="closeModal">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    }
  },
  methods: {
    showModal() {
      this.show = true;
    },
    closeModal() {
      this.show = false;
    },
    submitForm() {
      // 在这里添加提交表单的代码
      console.log(this.oldPassword, this.newPassword, this.confirmPassword);
      this.closeModal();
    }
  }
}
</script>

<style scoped>
.password-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

h2 {
  margin-top: 0;
}

label {
  margin-top: 10px;
  display: block;
}

input[type="password"] {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

button.close {
  margin-top: 10px;
  align-self: flex-end;
}
</style>

在父组件中，可以像这样使用该组件：

<template>
  <div>
    <button @click="showPasswordModal">修改密码</button>
    <password-modal ref="passwordModal"></password-modal>
  </div>
</template>

<script>
import PasswordModal from './PasswordModal.vue';

export default {
  components: {
    PasswordModal
  },
  methods: {
    showPasswordModal() {
      this.$refs.passwordModal.showModal();
    }
  }
}
</script>

这将在父组件中添加一个“修改密码”按钮，并在单击时显示一个弹窗，其中包含一个表单，用户可以输入旧密码、新密码和确认密码。表单提交后，该组件将调用一个名为“submitForm”的方法，您可以在其中添加提交表单的代码。请注意，此示例中的表单提交方法只是将表单数据打印到控制台，然后关闭弹窗。您需要根据您的应用程序的需要更改此方法。