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
4 years ago
|
<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>
|