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 :modesync="left"> // Slot, put your WXML content of the drawer here </drawer></template><script> 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
Props
There are four props exposed on wepy-com-paper-drawer
open
Default set to true
<drawer :opensync="customOpen"> // slot </drawer>
mode
The direction & style of the drawer.
Default set to left
, available options: left
, right
, bottom
, full
<drawer :modesync="bottom"> // slot </drawer>
closeCLass
Set a custom class to the ‘x’ close icon
<drawer :closeClasssync="customCloseClass"> // slot </drawer>
displayClose
Remove the ‘x’ close icon if needed
<drawer :displayClosesync="hasDisplayClose"> // slot </drawer>