Drawer

Drawer

demo 原始链接demo 源码编辑文档组件源码

drawer - 图1

二维码

drawer - 图2

Install

安装

局部注册

全局注册

  1. import { Drawer } from 'vux'
  2. export default {
  3. components: {
  4. Drawer
  5. }
  6. }

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { Drawer } from 'vux'
  4. Vue.component('drawer', Drawer)

当前组件 forked 自 https://github.com/bajian/vue-drawer

drawer 设计是作为公用侧边栏使用,所以不支持直接在单页面里使用,而是配合 router-view 来使用。

  1. <template>
  2. <div>
  3. <drawer
  4. width="200px;"
  5. :show.sync="drawerVisibility">
  6. <div slot="drawer">
  7. <!-- 菜单内容 -->
  8. </div>
  9. <!-- rourer-view 作为默认插槽内容 -->
  10. <div>
  11. <router-view></router-view>
  12. </div>
  13. </drawer>
  14. </div>
  15. </template>

源码请参考 App.vue

API

属性

名字类型默认值说明版本要求
showbooleanfalse是否展开,使用 :show.sync 绑定(vue@^2.3.3)v2.4.0
drawer-stylestring菜单样式v2.4.0
show-modestringoverlay展示方式,push(推开内容区域)或者 overlay(在内容上显示)v2.4.0
placementstringleft显示位置,可以为 left 或者 rightv2.4.0

插槽

名字说明版本要求
默认插槽主体内容插槽v2.4.0
drawer侧边栏内容插槽v2.4.0

贡献者

贡献者

该组件(包含文档)迭代次数 8,贡献人数 1
airyland

Changelog

发布日志

  • v2.4.0 [feature] 新组件:侧边栏(beta)