Awesome
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<br/> <br/> ‘right’ mode<br/> <br/> ‘bottom’ mode<br/> <br/> ‘full’ mode<br/> <br/>
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>