easy-affix | Vue 图钉组件
介绍
使用图钉,可以将内容固定在屏幕上,并且不随页面的滚动而滚动。常用于侧边菜单等。
创作原因
其实在
iview
和
ant-design
框架中已有
affix组件, 但如果在小项目或者使用element之类的框架, 就没办法引入了(虽然可以同时安装两个框架,也可以按需引入, 但是不建议)。
另外, 网上虽然已有
vue-affix
, 但是其必须指定相对元素, 而不可以默认跟随window, 所以和我的需求略微不同, 就动手做了一个。
文档和示例
https://dream2023.github.io/easy-affix/
安装
npm install easy-affix --save
使用
// 局部引入 components: Affix
// 全局引入Vue
Props 参数
<!-- 基本用法 -->内容....
<!-- 可以指定偏移距离 -->当距离顶部50px时, 开始绝对定位...
<!-- 相对于窗口底部偏移 -->内容....
props: // 类型(仅能为bottom 和 top) type: type: String default: 'top' { 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
- 兼容性检查
- 增加英文文档