Easy-affix NPM

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
  }
}