Affix

固钉

Affix 组件 用于将内容固定页面的位置，不随着页面滚动而改变位置

基础用法

固定顶部

vue

<template> <ap-affix> <ap-button primary>Here is the content of the fixed top</ap-button> </ap-affix> </template>

显示代码

偏移

固定在顶部指定位置

vue

<template> <ap-affix :offset-top="50"> <ap-button primary >Fix the position at the top of 50px at the top</ap-button > </ap-affix> </template>

显示代码

状态改变时的回调

vue

<template> <ap-affix :offset-top="100" @change="handleChange"> <ap-button primary >Fix the position at the top of 100px at the top</ap-button > </ap-affix> </template> <script lang="ts" setup> import { toast } from 'apathia-ui' let flag = false const handleChange = status => { if (flag === status) { return } else { flag = status toast({ type: 'info', duration: 1000, message: `Status has changed, current status is ${status}`, }) } } </script>

显示代码

固定底部

vue

<template> <ap-affix :offset-bottom="10"> <ap-button primary>Here is the content of the fixed bottom</ap-button> </ap-affix> </template>

显示代码

Props

参数	类型	是否必传	说明	默认值
offset-top	number	否	距离顶部的距离	0
offset-bottom	number	否	距离底部的距离	-

Events

事件名称	说明	回调参数
change	当固定状态改变时触发	true/false

Slots

插槽名称	说明	参数
default	显示内容	-