登录加载动画

实现登录中 … 三个点的loading动画

<template>
  <div>
    <el-input type="password" placeholder="请填写密码" autocomplete="new-password"
      v-model="password" @keyup.enter.native="login" show-password clearable>
    </el-input>
    <el-button @click="login" :loading="loggingIn">登录</el-button>
    <div v-if="loggingIn" class="loading-animation">
      <span class="loading-text">登录中</span>
      <span class="dots-container">
        <span class="dot" v-for="(dot, index) in dots" :key="index" :class="{ 'active': dot.active }"></span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      loggingIn: false,
      dots: [
        { active: false },
        { active: false },
        { active: false }
      ]
    };
  },
  methods: {
    login() {
      // 模拟登录过程
      this.loggingIn = true;
      // 启动动画
      this.startAnimation();
      setTimeout(() => {
        // 模拟登录成功后的操作
        this.loggingIn = false;
        // 停止动画
        this.stopAnimation();
        // 这里可以进行跳转或其他操作
      }, 2000);
    },
    startAnimation() {
      this.interval = setInterval(() => {
        this.dots.forEach((dot, index) => {
          setTimeout(() => {
            dot.active = true;
            setTimeout(() => {
              dot.active = false;
            }, 500);
          }, index * 200);
        });
      }, this.dots.length * 200);
    },
    stopAnimation() {
      clearInterval(this.interval);
      // 重置所有点的状态
      this.dots.forEach(dot => {
        dot.active = false;
      });
    }
  }
};
</script>

<style>
.loading-animation {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.loading-text {
  font-size: 14px;
}

.dots-container {
  display: inline-block;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #007bff;
  margin: 0 3px;
  opacity: 0.3;
}

.dot.active {
  opacity: 1;
}

</style>

优化: 监听 this.loggingIn 自动开关动画

watch: {
    loggingIn (newVal) {
      if (newVal) {
        this.startAnimation();
      } else {
        this.stopAnimation();
      }
    }
  },
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

尤山海

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值