easy-affix
v1.0.8
Published
[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg)](https://opensource.org/licenses/mit-license.php) [![npm](https://img.shields.io/npm/v/easy-affix.svg)](https://www.npmjs.com/package/easy-affix) [![size](https://img.shields.io/bundlephobia/minz
Downloads
25
Maintainers
Readme
easy-affix | Vue 图钉组件
介绍
使用图钉,可以将内容固定在屏幕上,并且不随页面的滚动而滚动。常用于侧边菜单等。
创作原因
文档和示例
https://dream2023.github.io/easy-affix/
安装
npm install easy-affix --save
使用
// 局部引入
import Affix from 'easy-affix'
export default {
components: {
Affix
}
}
// 全局引入
import Affix from 'easy-affix'
Vue.component('affix', Affix)
Props 参数
<!-- 基本用法 -->
<affix>内容....</affix>
<!-- 可以指定偏移距离 -->
<affix :offset="50">当距离顶部50px时, 开始绝对定位...</affix>
<!-- 相对于窗口底部偏移 -->
<affix type="bottom">内容....</affix>
props: {
// 类型(仅能为bottom 和 top)
type: {
type: String,
default: 'top',
validator (value) {
return value === 'top' || value === 'bottom'
}
},
// 偏移距离
offset: {
type: Number,
default: 0
},
// 监听间隔毫秒数 (事件节流)
delay: {
type: Number,
default: 100
},
// z-index值(当绝对定位时, z-index值)
zIndex: {
type: Number,
default: 10
}
}
待做事项
- 增加 typescript 提示
- 增加单元测试
- 增加 e2e 测试
- 增加指定相对元素偏移 target
- 兼容性检查
- 增加英文文档