johncalvinroberts/wepy-com-paper-drawer

wepy-com-paper-drawer

A useful drawer/sheet component for use in wepyjs, a Vue-like framework for building WeChat mini programs.

What it looks like

‘left’ mode

‘right’ mode

‘bottom’ mode

‘full’ mode

Usage

installation

npm install wepy-com-paper-drawer --save

Importing the component

For example, on a page index.wpy

// index.wpy
<template>
    <drawer :mode.sync="left">
    // Slot, put your WXML content of the drawer here
    </drawer>
</template>
<script>
    import wepy from 'wepy'
    import Drawer from 'wepy-com-paper-drawer'

    export default class Index extends wepy.page {
        components = {
            drawer: Drawer
        }

        data = {
            left: "left"
        }
    }
</script>

Showing the drawer

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

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

Props

There are four props exposed on wepy-com-paper-drawer

open

Default set to true

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

mode

The direction & style of the drawer. Default set to left, available options: left, right, bottom, full

    <drawer :mode.sync="bottom">
		// slot
    </drawer>

closeCLass

Set a custom class to the ‘x’ close icon

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

displayClose

Remove the ‘x’ close icon if needed

    <drawer :displayClose.sync="hasDisplayClose">
		// slot
    </drawer>