抽屉 affix 待优化 待新增

拖拉抽屉

使用说明

简单引入

你需要通过v-model绑定一个boolean值用于控制抽屉

展开代码

<vi-drawer v-model="open" :direction="direction"></vi-drawer>

页面固定

通过teleport属性控制drawer是否固定于页面，默认为false

若非teleport，你需要确保父盒子position非normal且overflow为hidden

展开代码

<div style="overflow: hidden; position: relative; height: 100px; width: 100%;">
    <vi-drawer v-model="open" :teleport="false"></vi-drawer>
</div>

抽屉方向

通过direction属性定义抽屉方位（top、bottom、right、left），默认为right

展开代码

<row>
<vi-button @click="change('right')">右边栏</vi-button>
<vi-button @click="change('top')">上边栏</vi-button>
<vi-button @click="change('bottom')">下边栏</vi-button>
<vi-button @click="change('left')">左边栏</vi-button>
</row>

Props

属性名	描述	类型	默认值

插槽

插槽名	描述	有无默认内容

css变量

变量名	描述	默认值