https://github.com/gexiaolin/vue-draggable-patch

draggable patch template for vue.js
https://github.com/gexiaolin/vue-draggable-patch

Last synced: 7 days ago
JSON representation

draggable patch template for vue.js

• Host: GitHub
• URL: https://github.com/gexiaolin/vue-draggable-patch
• Owner: gexiaolin
• Created: 2019-11-04T10:01:28.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T00:06:19.000Z (almost 2 years ago)
• Last Synced: 2024-04-24T19:24:02.304Z (7 months ago)
• Language: Vue
• Size: 2.14 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# vue-draggable-patch

VueDraggablePatch适用于vue.js `2.x` 版本。解决移动端可拖动挂角贴片touch拖拽、自动吸附的交互。

## 安装

```shell

npm install vue-draggable-patch -S

```

## 使用

`patch`组件接收自定义的slot作为贴片内容渲染，默认距离底部定位`100px`，可通过传入`buttom`props覆盖默认值。

```html

    


        

            

        

    


    import Vue from 'vue';

    import VueDraggablePatch from 'vue-draggable-patch';

    Vue.use(VueDraggablePatch);

    /**

     * or

     * Vue.component(Patch.name, Patch);

     */

    

    export default {};

    .demo img {

        display: block;

    }

```

## API

| key | 描述 | 类型 |

| ----- | ----- | ----- |

| bottom | 贴片距底部的初始距离 | Number |

## 语法规范

VueDraggablePatch通过`umd`兼容模式打包，支持`amd`、`commonsjs`、`commonsjs2`、`window`全局变量等方式引入。

## 版本

+ `1.0.1`: bug fix, 贴片滑动过程阻止默认事件

+ `1.0.0`: 基本交互完成