• Drawer 抽屉
    • Variables
    • Scoped Slot
    • Events

    Drawer 抽屉

    抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。

    TIP

    1.0.4+

    Drawer 抽屉 - 图1

    1. <el-button @click="dialogVisible=true">打开</el-button>
    2. <avue-drawer title="提示" show-close v-model="dialogVisible" :before-close="handleClose">
    3.   这里是内容
    4. </avue-drawer>
    5. <script>
    6. export default {
    7.   data() {
    8.     return {
    9.       dialogVisible: false,
    10.     }
    11.   },
    12.   methods: {
    13.     handleClose(hide) {
    14.       this.$message.success('关闭')
    15.       hide();
    16.     }
    17.   }
    18. }
    19. </script>

    Variables

    参数说明类型可选值默认值
    titleDrawer 的标题，也可通过具名 slot （见下表）传入string——
    widthDrawer 的宽度string—300
    fullscreen是否为全屏 Drawerboolean—false
    placementDrawer 的方向stringleft/rightright
    modal是否需要遮罩层boolean—true
    close-on-click-modal是否可以通过点击 modal 关闭 Drawerboolean—true
    custom-classDrawer 的自定义类名string—-
    show-close是否显示关闭按钮boolean—true
    before-close关闭前的回调，会暂停 Drawer 的关闭function(done)，done 用于关闭 Drawer—-

    Scoped Slot

    name说明
    —Drawer 的内容
    titleDrawer 标题区的内容

    Events

    事件名说明参数
    openDrawer 打开的回调-
    closeDrawer 关闭的回调-