Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
drawerlayout
a vue.js drawer with more function for vue2.x
A Vue.js project
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.