Merge branch 'develop' into master
This commit is contained in:
commit
aeb549e670
|
@ -1,48 +1,3 @@
|
||||||
<template>
|
|
||||||
<q-btn
|
|
||||||
title="previous button"
|
|
||||||
class="swiper-btn prev"
|
|
||||||
color="primary"
|
|
||||||
size="sm"
|
|
||||||
@click="handlePrev"
|
|
||||||
round
|
|
||||||
flat
|
|
||||||
>
|
|
||||||
<IconArrowCircleFilledLeft />
|
|
||||||
</q-btn>
|
|
||||||
|
|
||||||
<swiper-container
|
|
||||||
class="swiper"
|
|
||||||
:space-between="screenWidth > 1024 ? 56 : 25"
|
|
||||||
:slides-per-view="'auto'"
|
|
||||||
:centered-slides="true"
|
|
||||||
:grabCursor="true"
|
|
||||||
:navigation="true"
|
|
||||||
:loop="true"
|
|
||||||
:pagination="{
|
|
||||||
dynamicBullets: true,
|
|
||||||
clickable: true,
|
|
||||||
}"
|
|
||||||
:keyboard="{
|
|
||||||
enabled: true,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<slot></slot>
|
|
||||||
</swiper-container>
|
|
||||||
|
|
||||||
<q-btn
|
|
||||||
title="next button"
|
|
||||||
class="swiper-btn next"
|
|
||||||
color="primary"
|
|
||||||
size="sm"
|
|
||||||
@click="handleNext"
|
|
||||||
round
|
|
||||||
flat
|
|
||||||
>
|
|
||||||
<IconArrowCircleFilledRight />
|
|
||||||
</q-btn>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { defineComponent, onMounted, ref } from 'vue';
|
import { defineComponent, onMounted, ref } from 'vue';
|
||||||
|
@ -66,8 +21,7 @@ export default defineComponent({
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// console.log('Montado!');
|
// console.log('Montado!');
|
||||||
|
/*swiperContainer.value =
|
||||||
swiperContainer.value =
|
|
||||||
document.querySelector('swiper-container').shadowRoot;
|
document.querySelector('swiper-container').shadowRoot;
|
||||||
prevSwiperBtn.value = swiperContainer.value.querySelector(
|
prevSwiperBtn.value = swiperContainer.value.querySelector(
|
||||||
'.swiper-button-prev'
|
'.swiper-button-prev'
|
||||||
|
@ -79,21 +33,9 @@ export default defineComponent({
|
||||||
nextSwiperBtn.value.style.display = swiperDisplay;
|
nextSwiperBtn.value.style.display = swiperDisplay;
|
||||||
prevSwiperBtn.value.style.display = swiperDisplay;
|
prevSwiperBtn.value.style.display = swiperDisplay;
|
||||||
nextBtn.value = document.querySelector('.swiper-btn.next');
|
nextBtn.value = document.querySelector('.swiper-btn.next');
|
||||||
prevBtn.value = document.querySelector('.swiper-btn.prev');
|
prevBtn.value = document.querySelector('.swiper-btn.prev');*/
|
||||||
});
|
});
|
||||||
|
|
||||||
/* onUpdated(() => {
|
|
||||||
console.log('Atualizado!');
|
|
||||||
|
|
||||||
console.groupCollapsed('%c Custom', 'color: tomato;');
|
|
||||||
console.log({ prevBtn: prevBtn.value, nextBtn: nextBtn.value });
|
|
||||||
console.groupEnd();
|
|
||||||
|
|
||||||
console.groupCollapsed('%c Swiper', 'color: hotpink;');
|
|
||||||
console.log(prevSwiperBtn.value);
|
|
||||||
console.groupEnd();
|
|
||||||
}); */
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
screenWidth,
|
screenWidth,
|
||||||
handlePrev() {
|
handlePrev() {
|
||||||
|
@ -108,7 +50,49 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<template>
|
||||||
|
<q-btn
|
||||||
|
title="previous button"
|
||||||
|
class="swiper-btn prev"
|
||||||
|
color="primary"
|
||||||
|
size="sm"
|
||||||
|
@click="handlePrev"
|
||||||
|
round
|
||||||
|
flat
|
||||||
|
>
|
||||||
|
<IconArrowCircleFilledLeft />
|
||||||
|
</q-btn>
|
||||||
|
|
||||||
|
<!--<swiper-container
|
||||||
|
class="swiper"
|
||||||
|
:space-between="screenWidth > 1024 ? 56 : 25"
|
||||||
|
:slides-per-view="'auto'"
|
||||||
|
:centered-slides="true"
|
||||||
|
:grabCursor="true"
|
||||||
|
:navigation="true"
|
||||||
|
:loop="true"
|
||||||
|
:pagination="{
|
||||||
|
dynamicBullets: true,
|
||||||
|
clickable: true,
|
||||||
|
}"
|
||||||
|
:keyboard="{
|
||||||
|
enabled: true,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</swiper-container>-->
|
||||||
|
<q-btn
|
||||||
|
title="next button"
|
||||||
|
class="swiper-btn next"
|
||||||
|
color="primary"
|
||||||
|
size="sm"
|
||||||
|
@click="handleNext"
|
||||||
|
round
|
||||||
|
flat
|
||||||
|
>
|
||||||
|
<IconArrowCircleFilledRight />
|
||||||
|
</q-btn>
|
||||||
|
</template>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.swiper {
|
.swiper {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
Loading…
Reference in New Issue