H5W3
当前位置:H5W3 > 其他技术问题 > 正文

Ant Design of Vue 的 Pagination 如何在itemRender中指定a标签的href值?

官方文档Pagination分页 – Ant Design of Vue

它的itemRender回调可用于自定义页码按钮的结构,用于SEO。
现在我想对a标签增加href值(默认情况是没有href值的),请问如何实现呢?

下方的代码会对a标签外层的li标签增加href,怎么在a标签上增加href属性呢?

相关代码

      <a-pagination
        hideOnSinglePage
        v-model="currentPage"
        :total="total"
        :itemRender="itemRender"
        @change="pageChange"/>
      itemRender(page, type, ele) {
        let path = page > 1 ? `${this.baseUrl}/${page}` : this.baseUrl;
        ele.context.$attrs.href = path;
        return ele;
      }

现在的html

<li title="2" tabindex="0" class="ant-pagination-item ant-pagination-item-2 ant-pagination-item-active" href="/galleries/2">
    <a>2</a>
</li>

期待的html

<li title="2" tabindex="0" class="ant-pagination-item ant-pagination-item-2 ant-pagination-item-active">
    <a href="/galleries/2">2</a>
</li>

关键词

修改VNode属性,VNode绑定事件

回答:

细节问题相信你应该可以自己处理

itemRender(page, type, originalElement) {
  if (type === "page") {
    return <a href={`/galleries/${page}`}>{page}</a>;
  } else if (type === "prev") {
    return <a href={`/galleries/${this.currentPage - 1}`}>上一页</a>;
  } else if (type === "next") {
    return <a href={`/galleries/${this.currentPage + 1}`}>下一页</a>;
  }
}

clipboard.png

回答:

通过这种方式也可以达到目的

      itemRender(page, type, vNode) {
        let path = page > 1 ? `${this.baseUrl}/${page}` : this.baseUrl;
        if (vNode.data) {
          Object.assign(vNode.data, {
            attrs: {
              href: path
            }
          });
        } else {
          vNode.data = {
            attrs: {
              href: path
            }
          }
        }
        let callback = function (e) {
          e.preventDefault();
        };
        if (vNode.data.on) {
          Object.assign(vNode.data.on, {click: callback});
        } else {
          vNode.data.on = {click: callback};
        }

        return vNode;
      }

本文地址:H5W3 » Ant Design of Vue 的 Pagination 如何在itemRender中指定a标签的href值?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址