https://github.com/rwson/swipe-left

左滑菜单组件
https://github.com/rwson/swipe-left

Last synced: 4 months ago
JSON representation

左滑菜单组件

• Host: GitHub
• URL: https://github.com/rwson/swipe-left
• Owner: rwson
• Created: 2017-02-13T13:26:39.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-02-14T01:27:44.000Z (over 9 years ago)
• Last Synced: 2025-03-29T19:11:24.278Z (over 1 year ago)
• Language: JavaScript
• Size: 218 KB
• Stars: 5
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# swipe-left

左滑菜单组件

![效果](screen.gif)

### Usage

    import SwipeLeft from "./SwipeLeft";

    

    const sl = new SwipeLeft();

    

    sl.init(selector(String), Array.);

    demo:

    

    import SwipeLeft from "./SwipeLeft";

    //  实例化一个SwipeLeft对象

    const sl = new SwipeLeft();

    

    //  配置参数, menus

    sl.init(".menus", {

        menus: [{

            "text": "删除",

            "classes": ["on", "test"],

            "css": {

            	"font-size": "14px",

            	"width": "100px",

            	"background-color": "red"

            },

            handler: (e) => {

            	if(confirm("你确定删除此项吗?")) {

            		e.el.parentNode.parentNode.removeChild(e.el.parentNode);

            	}

            }

        }, {

            "text": "新增",

            "classes": "text-calss",

            "css": {

            	"font-size": "14px",

            	"background-color": "green"

            },

            handler: (e) => {

            	alert("即将新增一项");

            }

        }]

    });

### 参数解释

属性名 | 参数类型 | 默认值 | 意义

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

text | String | N/A | 显示在菜单按钮上的文字

classes | Array./String | N/A | 自定义样式类, 当为数组时,表示同时添加多个样式类

css | Object | {} | 自定义样式

handler | Function | function() {} | 菜单项被轻击之后的函数响应

####  注:

本项目中的事件依赖于本人的另一项目([Toucher](https://github.com/rwson/Toucher))实现