Affix 图钉
... 2021-7-29 Less than 1 minute
使用图钉,可以将内容固定在屏幕上,并且不随页面的滚动而滚动。常用于侧边菜单等,往下滑动页面体验。
Tips
1.0.4+
<avue-affix :offset-top="100">
<el-button type="primary">固定在最顶部</el-button>
</avue-affix>
<script>
export default {
}
</script>
<avue-affix :offset-top="150">
<el-button type="primary">固定在距离顶部 50px 的位置</el-button>
</avue-affix>
<script>
export default {
}
</script>
<avue-affix :offset-top="200" >
<el-button type="primary">固定在距离顶部 100px 的位置</el-button>
</avue-affix>
<script>
export default {
}
</script>
<avue-affix :offset-top="250" >
<el-button type="primary">固定在距离顶部 150px 的位置</el-button>
</avue-affix>
<script>
export default {
}
</script>
用于测试长度的
<div style="height:500px"></div>
<script>
export default {
}
</script>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
target | 指定父类class或者id | String | - | window |
offset-top | 距离窗口顶部达到指定偏移量后触发 | Number | - | 0 |
This app can be installed on your PC or mobile device. This will allow this web app to look and behave like any other installed app. You will find it in your app lists and be able to pin it to your home screen, start menus or task bars. This installed web app will also be able to safely interact with other apps and your operating system.