iview的Anchor组件会吃掉url的query参数
编辑iview的Anchor组件会吃掉url的query参数
前言
做需求的时候,新需求加了个在右侧加上导航锚点的功能:
看了下,嗨,简单,当前项目的iview组件库自带Anchor组件,只需要给不同的位置的div加上id,然后点击对应id的Anchor组件,就能丝滑跳转了。
万万没想到,遇到了如下几个坑:
遇到的坑:
AnchorLink
的href属性不能是中文,不然跳转失败解决方案:href属性设置为英文,如下
<AnchorLink href="#popInfo" title="POP信息">
AnchorLink
会吃掉查询参数表现形式是,点击
AnchorLink
组件,这个组件会直接将地址栏变成window.location.pathname
和组件接收的href
属性直接拼接而成的字符串。造成的影响是,导航栏参数被搞掉之后,业务一刷新页面,参数就丢失了,而且提交表单的时候,有时候会根据query参数来提交不同的信息。
这个在官方的示例中也是同样的bug表现:
而antd组件库则没有这个bug:
现在,有如上两个坑,使用这个组件完成业务需求似乎不太可能了,时间很紧迫,要手写一个anchor组件,并且还要有组件库这种动画(页面上下滚动的时候,对应的anchor锚点还需要自动滚动):
在给我的时间内完成的话,基本不太可能,所以我决定继续研究一下这个iview的anchor组件。
开始尝试解决问题:
先试试能不能让渲染出来的Anchor的跳转功能正常而不吃掉我的query参数:
研究了一会,我尝试修改其中一个AnchorLink
的href为我手动构建的地址,然后观察渲染出来的a标签
代码如下:
<AnchorLink href="#popInfo" title="POP信息">
<AnchorLink :href="genAnchor('anchor1')" title="店铺信息" />
...
// 此为vue的methods:
genAnchor(anchor) {
return `${window.location.pathname}${window.location.search}#${anchor}`
},
渲染出来的html组件如下所示:
目前看来,好像有戏,只要我点一下店铺信息,页面应该能自动跳转到指定锚点。
但是我一点,出现了下述问题:
本着先解决问题的原则,我修改了一下genAnchor方法,手动replace一下前缀:
genAnchor(anchor) {
return `${window.location.pathname}${window.location.search}#${anchor}`.replace('/publish-web', '') // 手动把/publish-web置为空
},
然后再次点击店铺信息,成功了!
如图所示,点击我修改过href参数的 店铺信息 ,地址栏的query参数没有被吃掉,并且页面也滚动到了指定的位置;然后我再点击我没有手动生成href的 POP信息 ,不仅页面没有滚动,而且query参数还被吃掉了。
但是这里还有个问题,虽然能成功跳转了,但是组件并没有显示动画,也不会跟随滚动条的滚动而自动高亮当前的anchor,所以开始解决第二个问题:
再尝试让动画正常显示:
如果按照正常文档使用这个组件,除了不能点击(一点击就会吃掉地址栏的query参数),其余的自动根据页面滚动的动画什么的都很完美;
最终解决方案:
结合以上两种方案的优点,并且摈弃缺点,一个在当下业务场景比较完美的解决方案出来了:
渲染两个Anchor组件,记为A和B,A负责点击跳转,B负责展示效果(使用pointer-events: none
这个css来禁止掉B的鼠标响应),然后将A和B使用固定定位到同一位置即可,文档流的位置是B覆盖在A之上。
最终代码如下:
<div class="right" ref="rightAnchor">
<Anchor container="#main_content" :scroll-offset="-130">
<AnchorLink :href="genAnchor('popInfo')" title="POP信息">
<AnchorLink :href="genAnchor('anchor1')" title="店铺信息" />
<AnchorLink :href="genAnchor('anchor2')" title="产品信息" />
<AnchorLink :href="genAnchor('anchor3')" title="属性信息" />
<AnchorLink :href="genAnchor('anchor4')" title="资质信息" />
<AnchorLink :href="genAnchor('anchor5')" title="库存与价格" />
<AnchorLink :href="genAnchor('anchor6')" title="图片以及描述" />
<AnchorLink :href="genAnchor('anchor7')" title="包装及物流" />
<AnchorLink :href="genAnchor('anchor8')" title="其他信息" />
</AnchorLink>
<AnchorLink :href="genAnchor('anchor9')" title="半托管信息">
<AnchorLink :href="genAnchor('anchor10')" title="参与国家/地区" />
<AnchorLink :href="genAnchor('anchor11')" title="物流信息" />
<AnchorLink :href="genAnchor('anchor12')" title="商品价格和库存" />
</AnchorLink>
</Anchor>
</div>
<div class="right-show" style="pointer-events: none">
<Anchor show-ink container="#main_content" :scroll-offset="-130">
<AnchorLink href="#popInfo" title="POP信息">
<AnchorLink href="#anchor1" title="店铺信息" />
<AnchorLink href="#anchor2" title="产品信息" />
<AnchorLink href="#anchor3" title="属性信息" />
<AnchorLink href="#anchor4" title="资质信息" />
<AnchorLink href="#anchor5" title="库存与价格" />
<AnchorLink href="#anchor6" title="图片以及描述" />
<AnchorLink href="#anchor7" title="包装及物流" />
<AnchorLink href="#anchor8" title="其他信息" />
</AnchorLink>
<AnchorLink href="#anchor9" title="半托管信息">
<AnchorLink href="#anchor10" title="参与国家/地区" />
<AnchorLink href="#anchor11" title="物流信息" />
<AnchorLink href="#anchor12" title="商品价格和库存" />
</AnchorLink>
</Anchor>
</div>
.right {
position: fixed;
top: 80px;
right: 80px;
padding-left: 20px;
}
.right-show {
position: fixed;
top: 80px;
right: 80px;
padding-left: 20px;
}
至此,此坑填完
#面试# #iview# #bug#
- 0
-
分享