vue+ts element-plu是页码器根据屏幕宽度变化,解决刷新后初始化值问题
2023-12-28 13:38:10
?
?实现思路:组件挂载后执行初始化操作,初始化添加事件监听器,当浏览器窗口大小发生变化时会调用这个函数handleResize?
?
<el-pagination v-model:current-page="currentPage" background :total="total" layout="prev, pager, next"
class="pagination" :page-size="pageSize" :pager-count="3"></el-pagination>
import { reactive, ref, computed, onMounted, onUnmounted } from 'vue' const total = ref(30); const pageSize = ref(10); const currentPage = ref(1); const pagedHonorList = computed(() => { ? const startIndex = (currentPage.value - 1) * pageSize.value; ? const endIndex = startIndex + pageSize.value; ? return honorList.slice(startIndex, endIndex); }); // 动态计算宽度 当屏幕分辨率 =< 430px时候使用其他组件 const screenWidth = ref(window.innerWidth); //处理窗口大小变化的逻辑 const handleResize = () => { screenWidth.value = window.innerWidth; if (screenWidth.value == 1024) { pageSize.value = 8 } else if (screenWidth.value == 768) { pageSize.value = 6 } else if (screenWidth.value <= 430) { pageSize.value = 4 } // 将 pageSize 存储到本地存储 localStorage.setItem('pageSize', pageSize.value.toString()); }; onMounted(() => { //动态计算宽 // 在页面加载时尝试从本地存储中读取 pageSize if (localStorage.getItem('pageSize')) { const pageNumber = localStorage.getItem('pageSize')! pageSize.value = parseInt(pageNumber) } //初始化添加事件监听器,当浏览器窗口大小发生变化时会调用这个函数handleResize? window.addEventListener('resize', handleResize); });
文章来源:https://blog.csdn.net/xiaoming4965/article/details/135263039
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!