You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.3 KiB
62 lines
1.3 KiB
<tiny-fade>
|
|
<div class="tiny-fade">
|
|
<slot-html />
|
|
</div>
|
|
<script>
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
export default {
|
|
|
|
state: {
|
|
show: 2,
|
|
interval: 1000
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
onMounted() {
|
|
const elements = this.$$('.tiny-fade > *')
|
|
|
|
elements.forEach((element, index) => {
|
|
element.classList.add('tiny-fade__item')
|
|
|
|
if (this.state.show > index) {
|
|
element.classList.add('tiny-fade__item--active')
|
|
}
|
|
})
|
|
|
|
const timer = setInterval(() => {
|
|
this.toggle()
|
|
}, this.state.interval)
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
toggle() {
|
|
const elements = this.$('.tiny-fade__item--active:last-child')
|
|
|
|
console.log(elements)
|
|
|
|
//elements.forEach((element, index) => {
|
|
//if (element.classList.contains('tiny-fade__item--active')) {
|
|
// element.classList.remove('tiny-fade__item--active')
|
|
//}
|
|
//})*/
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
<style>
|
|
|
|
</style>
|
|
|
|
</tiny-fade> |