dream2023 / easy-affix

Vue图钉组件, 可以将内容固定在屏幕上，并且不随页面的滚动而滚动，常用于侧边菜单和导航栏等

easy-affix | Vue 图钉组件

介绍

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

创作原因

其实在 iview和 ant-design框架中已有 affix组件, 但如果在小项目或者使用element之类的框架, 就没办法引入了(虽然可以同时安装两个框架,也可以按需引入, 但是不建议)。

另外, 网上虽然已有 vue-affix, 但是其必须指定相对元素, 而不可以默认跟随window, 所以和我的需求略微不同, 就动手做了一个。

文档和示例

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
• 兼容性检查
• 增加英文文档

easy-affix's Issues

当页面的宽度改变的时候，固钉的位置出现错位

当页面的宽度改变的时候，固钉的位置出现错位