写一个动效的优美的hbuilderx的vue登录界面实例

在HBuilderX的Vue项目中创建一个优雅的登录界面通常包括静态HTML、CSS样式以及动态的JavaScript逻辑。这里是一个基础示例：

<!-- login.vue -->
<template>
  <div class="login-container">
    <div v-loading="{el: '#loader'}" :style="{ opacity: showLoader ? 1 : 0 }">
      <!-- 加载动画如菊花图，需要引入HBuilderX的vue-loading组件 -->
      <loading id="loader"></loading>
    </div>
    <form @submit.prevent="handleSubmit">
      <input type="text" placeholder="用户名" v-model="username" />
      <input type="password" placeholder="密码" v-model="password" />
      <button type="submit">登录</button>
      <p>{{ errorMessage }}</p> <!-- 显示错误消息 -->
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      showLoader: false, // 初始化加载状态为false
      errorMessage: '', // 错误信息
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault(); // 阻止表单默认提交行为
      this.showLoader = true; // 开始加载

      // 模拟异步请求
      setTimeout(() => {
        if (this.username === 'admin' && this.password === 'password') {
          this.$message.success('登录成功');
          this.showLoader = false;
        } else {
          this.errorMessage = '用户名或密码错误';
          this.showLoader = false;
        }
      }, 1000);
    },
  },
};
</script>

<style scoped>
.login-container {
  width: 300px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

form input {
  margin-bottom: 10px;
}
</style>

在这个例子中，我们使用了Vue的v-model双向数据绑定和v-loading指令来添加动态加载效果。当用户点击登录按钮时，会触发handleSubmit方法，模拟一个异步请求，实际项目中可以替换为AJAX或axios等库进行API交互。