程序员Java.vue，python前端后端爬虫开发资源分享

<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>

watch: {
    loggingIn (newVal) {
      if (newVal) {
        this.startAnimation();
      } else {
        this.stopAnimation();
      }
    }
  },