// lot component
chip
:key="student.id"
:isLotted="currStudentId===student.id"
v-for="student in students"
:student="student"
:layout="layout">
目的是抽签选一个学生答题,具体实现通过计时器迭代随机数,迭代时间逐渐增长实现视觉效果,在这里isLotted是传给自组件的实现css变化的属性,lot是子组件中的css类名,如下图
// studentchip component
<div :class="{'lot':isLotted,'lotted': wasLotted}">
if="layout === 'large'">
抽签方法在父组件中提供,如下图
computed: {
people: function () {
return _.clone(this.students)
}
},
methods: {
minusPeopleNum: function () {
return this.people.length--
},
random: function () {
return _.random(0, this.people.length - 1)
},
lot: function () {
var num = this.random()
var lottedPeople = this.people[num]
this.currStudentId = lottedPeople.id
this.times++
if (this.times < 50) {
setTimeout(this.lot, 50 + (this.times * 10))
} else {
this.times = 0
this.people.splice(num, 1)
this.minusPeopleNum
lottedPeople.isLotted = true
}
return lottedPeople
}
}
可以实现动态改变CSS样式,但是发现不刷新的话CSS样式不改变,但是lot方法是在跑的
解决办法是:在父组件中删除与子组件中同名的css类名
(按理说我在组件中写的css都是scoped,不应该影响组件间的,但是结果决定这scope似乎有值得商榷之处 )
欢迎各位大佬不吝赐教。
转载于:https://www.cnblogs.com/bryanz/p/7232576.html