分页模块的时候,过后以后页面,如果是当前页,须要加一个属性 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>