codecamp

ElementPlus Affix 固钉

Affix 固钉

将页面元素固定在特定可视区域。

基本用法

固钉默认固定在页面顶部。


通过设置 offset 属性来改变吸顶距离,默认值为 0。

<template>
  <el-affix :offset="120">
  <el-button type="primary">距离顶部 120px</el-button>
</el-affix>
</template>

指定容器

通过设置 target 属性,让固钉始终保持在容器内,超过范围则隐藏。


请注意容器避免出现滚动条。

<template>
  <div class="affix-container">
  <el-affix target=".affix-container" :offset="80">
    <el-button type="primary">指定容器</el-button>
  </el-affix>
</div>
</template>

固定位置

Affix 组件提供了两个固定位置:top 和 bottom。


通过设置 position 属性来改变固定位置,默认值为 top 。

<template>
  <el-affix position="bottom" :offset="20">
  <el-button type="primary">距离底部 20px</el-button>
</el-affix>
</template>

Attributes

参数说明类型可选值默认值
offset偏移距离number0
position固钉位置stringtop / bottomtop
target指定容器(CSS 选择器)string
z-index固钉层级number100

Events

事件名称说明回调参数
change固钉状态改变时触发的事件(value: boolean)
scroll滚动时触发的事件滚动距离和固钉状态

Methods

方法名说明参数
update手动更新固钉状态


ElementPlus Notification 通知
ElementPlus NavMenu 导航菜单
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ElementPlus 配置

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }