vue项目接口域名动态的获取方法
532
2023-01-26
vue中锚点的三种方法
第一种:
router.js中添加
mode: 'history',
srcollBehavior(to,from,savedPosition){
if(to.hash){
return {
selector:to.hash
}
}
}
组件:
export default {
data(){
return {
}
}
}
.list{
width: 100%;
height: 50px;
}
li{
width: 11%;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #ccc;
color: #ff6c00;
float: left;
list-style: none!important;
}
.main_con{
width: 100%;
height: 200px;
border: 1px solid #ccc;
line-height: 200px;
text-align: center;
color: blue;
}
第二种:
写一个方法 组件
export default{
data(){
return {
}
},
methods: {
goAnchor(selector) {
var anchor = this.$el.querySelector(selector)
document.documentElement.scrollTop = anchor.offsetTop
}
}
}
.item{
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
}
第三种: 自定义指令
export default{
data(){
return {
}
}
}
.item{
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
}
main.js 定义全局指令 方便其他地方复用
vue.directive('anchor',{
inserted : function(el,binding){
el.onclick = function(){
document.documentElement.scrollTop = $('#anchor-'+binding.value).offset().top
}
}
})
总结
以上所述是给大家介绍的vue中锚点的三种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~