https://github.com/johncalvinroberts/wepy-com-paper-modal

https://github.com/johncalvinroberts/wepy-com-paper-modal

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/johncalvinroberts/wepy-com-paper-modal
• Owner: johncalvinroberts
• License: mit
• Created: 2018-05-20T16:10:02.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-05-20T20:11:59.000Z (over 6 years ago)
• Last Synced: 2024-11-01T16:49:09.664Z (3 months ago)
• Language: JavaScript
• Size: 22.5 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-wepy - wepy-com-paper-modal: 基于wepy的简洁帅气的modal组件

README

        
# wepy-com-paper-modal

A handsome modal component for use in [wepyjs](https://github.com/wepyjs/wepy), a Vue-like framework for building WeChat mini programs.

## What it looks like

![modal](https://user-images.githubusercontent.com/11850362/40283133-1e82f29c-5cac-11e8-89b2-1010003807e1.gif)

## Usage

### installation

```

npm install wepy-com-paper-modal --save

```

### Importing the component

For example, on a page `index.wpy`

```javascript

// index.wpy

    

    // Slot, put your WXML content of modal here

    

    import wepy from 'wepy'

    import Modal from 'wepy-com-paper-modal'

    export default class Index extends wepy.page {

        components = {

            modal: Modal

        }

    }

```

### Showing the modal

Inside of a `@tap` handler (or anywhere in a wepy component or page),  you could invoke the modal to display, i.e. show the modal by calling the /toggle/ function

```javascript

// index.wpy

	this.$invoke('modal', 'toggle', null)

```

### Props

There are two props exposed on `wepy-com-paper-modal`

#### open

Default set to `true`

```javascript

    

		// slot

    

```

#### closeCLass

Set a custom class to the ‘x’ close icon 

```javascript

    

		// slot

    

```