• Drawer
    • 安装
    • 属性
    • 插槽
    • 贡献者
    • 发布日志

    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)