分页模块的时候,过后以后页面,如果是当前页,须要加一个属性 aria-current="page"
:
vue3代码:aria-current="{'page':page === n}"
后果没有渲染进去,IDE也标黄。
代码
<template> <nav aria-label="..."> <ul class="pagination"> <li class="page-item" :class="{'disabled':page === 1}"> <span class="page-link">Previous</span> </li> <li v-for="n in total_page" class="page-item" :class="{'active': page === n }" :aria-current="page === n ?'page':false"> <a v-if="page === n" class="page-link" href="#" @click="submit(n)">{{ n }}</a> <span v-else class="page-link" @click="submit(n)">{{ n }}</span> </li> <li class="page-item" :class="{'disabled': page === total_page}"> <a class="page-link" href="#" @click="submit(total_page)">Next</a> </li> </ul> </nav></template>
模板
<nav aria-label="..."> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active" aria-current="page"> <a class="page-link" href="#">2</a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul></nav>