实现登录中 … 三个点的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();}}},