johncalvinroberts/wepy-com-paper-modal

wepy-com-paper-modal

A handsome modal component for use in wepyjs, a Vue-like framework for building WeChat mini programs.

What it looks like

Usage

installation

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

Importing the component

For example, on a page index.wpy

// index.wpy
<template>
    <modal>
    // Slot, put your WXML content of modal here
    </modal>
</template>
<script>
    import wepy from 'wepy'
    import Modal from 'wepy-com-paper-modal'

    export default class Index extends wepy.page {
        components = {
            modal: Modal
        }
    }
</script>

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

// index.wpy
	this.$invoke('modal', 'toggle', null)

Props

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

open

Default set to true

    <modal :open.sync="customOpen">
		// slot
    </modal>

closeCLass

Set a custom class to the ‘x’ close icon

    <modal :closeClass.sync="customCloseClass">
		// slot
    </modal>