minhnt-dev: scroll smooth

This commit is contained in:
MoreStrive
2024-07-08 17:03:33 +07:00
parent 81bfa351e8
commit 76b2fa4771
4 changed files with 18 additions and 10 deletions
@@ -4,10 +4,7 @@ import { getInputValue } from "@/utils/parseSQL";
import { enumPageComponentTemplates } from "@/definitions/enum";
const router = useRouter();
const route = useRoute();
const store = reactive({
component: useDynamicPageStore(),
});
import { useScroll } from '@vueuse/core';
const _props = defineProps<{
dataResult?: any[];
@@ -108,10 +105,11 @@ const mapActivesToItems = (index: number) => {
}
return {};
};
</script>
<template>
<section v-if="listArticleByCategory?.length > 0">
<section :id="`cpn_[${_props.component.id}]`" v-if="listArticleByCategory?.length > 0">
<div class="section-container">
<div class="section-layout" :style="designObject['div.section']">
<template v-for="(component, index) in listArticlePaging?.length > 0 ? listArticlePaging : listArticleByCategory" :key="index">
@@ -126,13 +124,13 @@ const mapActivesToItems = (index: number) => {
/>
</template>
<div class="button-page flex">
<span class="btn-page prev-page" @click.stop="() => handleNextPrev('-')" v-if="page > 1">
<a :href="`#cpn_[${_props.component.id}]`" class="btn-page prev-page" @click.stop="() => handleNextPrev('-')" v-if="page > 1">
<Icon name="ooui:previous-ltr"></Icon>
</span>
<span :class="['btn-page', page === index + 1 && 'active']" @click.stop="() => select(index + 1)" v-for="(_, index) in Math.ceil(totals / limit)">{{ index + 1 }}</span>
<span class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
</a>
<a :href="`#cpn_[${_props.component.id}]`" :class="['btn-page', page === index + 1 && 'active']" @click.stop="() => select(index + 1)" v-for="(_, index) in Math.ceil(totals / limit)" :key="index">{{ index + 1 }}</a>
<a :href="`#cpn_[${_props.component.id}]`" class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
<Icon name="ooui:previous-rtl"></Icon>
</span>
</a>
</div>
</div>
</div>