codingdogs/vue-pin

使用 Vue 指令快速的 “钉”住某个元素 🌲 Pin any element in the container with a Vue directive.

vue-pin

使用 Vue 指令快速的 “钉”住某个元素

Inrto

使用 Vue 指令快速的 “钉”住某个元素，同时支持原生调用，移植于 jQuery.pin

Install

npm install vue-pin --save

Usage

初始化

import Vue from 'vue'
import Pin from 'vue-pin'

// install
Vue.use(Pin)

基于 Vue 指令使用

<template>
    <!-- 常规使用 -->
    <nav v-pin>
        <ul>
            <li>Home</li>
        </ul>
        <ul>
            <li>Products</li>
        </ul>
        <ul>
            <li>About</li>
        </ul>
    </nav>

    <!-- 自定义选项 -->
    <aside v-pin="{containerSelector: '.container', padding: {top: 10, bottom: 10}}">
        <ul>
            <li>Inbox</li>
        </ul>
        <ul>
            <li>Today</li>
        </ul>
        <ul>
            <li>All</li>
        </ul>
    </aside>
</template>

<script>
export default {
}
</script>

非 Vue 框架使用

import Pin from 'vue-pin'

// 获取元素
var el = document.querySelector('.nav')
// 选项（可选）
var options = {
    containerSelector: '.container',
    padding: {
        top: 10,
        bottom: 10
    }
}

// 实例化
var pin = new Pin(el, options)
// 或
Pin.create(el, options)

// 在特殊情况下需要手动更新时可使用以下方式调用
pin.update()
// 或
el.pin.update()

options

• containerSelector: 要使固定的元素保留在外部容器中，请使用 containerSelector 选项
• padding: 使用 padding 选项可以为固定元素添加 top/bottom填充

Links

jQuery.pin