用vue写出一个按钮匹配一个勾选框,写四行。第一行延时0.1秒触发。第二行0.2秒依次类推。然后有个开始按钮。勾选后按钮后。比如勾选了第一行。第三行。分别在每0.1秒点击下第一行按钮。每0.3秒点击下第三行按钮,并增加点击动画。开始按钮点击后变成停止按钮并变色
时间: 2023-08-23 13:04:53 浏览: 39
下面是一个实现上述功能的 Vue 代码:
```
<template>
<div>
<div v-for="(item, index) in items" :key="index">
<input type="checkbox" v-model="item.checked"> {{ item.label }}
<button v-if="item.checked" ref="buttons" @click="handleClick(index)" :class="{ clicked: item.clicked }">点击</button>
</div>
<button @click="toggleStartStop" :class="{ started: started }">{{ started ? '停止' : '开始' }}</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ label: '第一行', checked: false, clicked: false },
{ label: '第二行', checked: false, clicked: false },
{ label: '第三行', checked: false, clicked: false },
{ label: '第四行', checked: false, clicked: false }
],
started: false,
timeouts: []
};
},
methods: {
handleClick(index) {
this.items[index].clicked = true;
setTimeout(() => {
this.items[index].clicked = false;
}, 300);
},
toggleStartStop() {
if (this.started) {
this.stop();
} else {
this.start();
}
this.started = !this.started;
},
start() {
this.items.forEach((item, index) => {
if (item.checked) {
const timeoutId = setInterval(() => {
this.$refs.buttons[index].click();
}, (index + 1) * 100);
this.timeouts.push(timeoutId);
}
});
},
stop() {
this.timeouts.forEach(timeoutId => clearInterval(timeoutId));
this.timeouts = [];
this.items.forEach(item => item.clicked = false);
}
}
};
</script>
<style>
.clicked {
animation: click-animation 0.3s linear;
}
@keyframes click-animation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.started {
background-color: red;
color: white;
}
</style>
```
这个组件具有以下功能:
- 显示四行文本和对应的勾选框和按钮。
- 点击按钮会触发一个点击动画。
- 点击开始按钮后,每隔一定间隔时间,会自动点击勾选的行对应的按钮。
- 点击停止按钮后,自动点击的功能停止,并且所有按钮的点击动画都会停止。
阅读全文