• Affix 图钉
    • Variables

    Affix 图钉

    使用图钉,可以将内容固定在屏幕上,并且不随页面的滚动而滚动。常用于侧边菜单等,往下滑动页面体验。

    TIP

    1.0.4+

    Affix 图钉 - 图1

    1. <avue-affix>
    2. <el-button type="primary">固定在最顶部</el-button>
    3. </avue-affix>
    4. <script>
    5. export default {
    6. }
    7. </script>

    Affix 图钉 - 图2

    1. <avue-affix :offset-top="50">
    2. <el-button type="primary">固定在距离顶部 50px 的位置</el-button>
    3. </avue-affix>
    4. <script>
    5. export default {
    6. }
    7. </script>

    Affix 图钉 - 图3

    1. <avue-affix :offset-top="100">
    2. <el-button type="primary">固定在距离顶部 100px 的位置</el-button>
    3. </avue-affix>
    4. <script>
    5. export default {
    6. }
    7. </script>

    Affix 图钉 - 图4

    1. <avue-affix :offset-top="150">
    2. <el-button type="primary">固定在距离顶部 150px 的位置</el-button>
    3. </avue-affix>
    4. <script>
    5. export default {
    6. }
    7. </script>

    Affix 图钉 - 图5

    用于测试长度的

    1. <div style="height:500px"></div>
    2. <script>
    3. export default {
    4. }
    5. </script>

    Variables

    参数说明类型可选值默认值
    id指定父类String-window
    offset-top距离窗口顶部达到指定偏移量后触发Number-0