v-poppers v1.2.0

popper

Chinse Version

给定一个元素（比如一个按钮）和一个描述它的工具提示元素，Popper会自动将弹框提示放在元素附近的正确位置。

它将定位从文档流中“弹出”并浮动在目标元素附近的任何UI元素。最常见的例子是工具提示，但它也包括弹出窗口、下拉菜单等。所有这些都可以泛称为“popper”元素。

npmUrl

https://www.npmjs.com/package/v-poppers

为什么使用Popper库？

• 在任何数量的滚动容器中滚动时, 确保与被跟踪元素保持在一起

• 无需手动设置CSS, Popper会自动设置到相应的位置

• 灵活配置弹出位置， 大大减少了开发生产力

安装

# Using npm 
npm i v-poppers -S


# Using yarn 
yarn add v-poppers

通过script标签引入

<script src="*/index.umd.min.js"></script>

以Vue项目为例， 当然你可以在你的任何项目中使用

使用

<div class="popper" ref="popper"></div>
<div class="target" ref="target"></div>

<script>
import Popper from 'v-poppers'

export default {
  data() {
    return {
      s: null,
    }
  },
  mounted() {
    this.s = new Popper(this.$refs.popper, this.$refs.target)
    this.s.show()
  }
}

</script>

new Popper(el, trackNode, options)

• 当 new 的时候， Popper会初始化配置， 你必须使用show()方法， 来使Popper到达指定的位置。

• Popper 默认采用绝对定位， 当然你可以通过下面的配置来修改它

• Popper默认会将 popper 元素自动添加到 body 上， 计算默认也将是以body为基准， 如果需要加入到 popper 元素的父级上， 请看下面的配置选项。

传入配置

可以通过传入配置来使Popper更灵活

<div ref="wrap">
  <div class="popper" ref="popper"></div>
  <div class="target" ref="target"></div>
</div>

<button @click="update">改变配置</button>

<script>
import Popper from 'v-poppers'

export default {
  data() {
    return {
      s: null,
      options: {
        position: 'absolute',
        trackPosition: 'bottom-start',
        offset: {
          y: 0
        },
        exceed: {
          y: 30,
          x: 30
        },
        appendParentNode: null,
        className: {
          top: ['top-class']
        },
        styles: {
          color: 'red'
        }
      }
    }
  },
  mounted() {
    this.options.appendParentNode = this.$refs.wrap
    this.s = new Popper(this.$refs.popper, this.$refs.target, this.options)
    this.s.show()
  },
  beforeDestroy() {
    this.s.destroy()
  },
  methods: {
    update() {
      this.options.offset.y = 20
      this.s.setOptions(this.options).update()
    }
  }
}

</script>

配置属性

• trackPosition 的可能值: bottom-start | bottom-center | bottom-end | top-start | top-center | top-end | left-center | right-center

• className 的可能值： top | bottom | left | right |

Popper 方法

当不需要使用popper元素的时候， 应该要手动去销毁它