vue.js drawer drawerlayout asi
a vue.js drawer with more function for vue2.x
demoA Vue.js project
online-demo
Build Setup# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build
<!-- drawer--> <drawer :show="drawerShow" :pos="pos" :tran="tran" @change-show="changeDrawerShow"> <!-- drawerlayout with slot="drawer"--> <div class="layout" slot="drawer" > <h2><a href="#">bajian drawer</a></h2> <ul> <li v-for="item in navItems"><a href="#{{item}}">{{item}}</a></li> </ul> </div> <!-- page content --> <button v-on:click="directionFlip">directionChange</button><br><br> <button v-on:click="tranFlip">tranChange</button><br><br> <button v-on:click="drawerToggle">toggle</button> </drawer> changeDrawerShow(state) { this.drawerShow=state; } Api Properties
| Name | Type | Default | Description |
|---|---|---|---|
| pos | String |
left |
the position where the drawer is:left/right |
| tran | String |
overlay |
the transition that the drawer beharior:overlay/push |
| show.sync | Boolean |
false |
the drawer visibility，set true to show the drawer |
| on-hide | Function |
undefined |
the drawer hide listener |
| on-show | Function |
undefined |
the drawer show listener |
| change-show | Function |
undefined |
as vue2.0 deprecated the sync,this event must be called to change drawer state by the component itself |
| ==================== | ========= | ============ | =================== |
For detailed explanation on how things work, checkout the guide and docs for vue-loader.
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
