Drawer

Examples

Placement

Use the placement prop to control the position where the drawer pops up.

Modal Outside Closable

<template>
<article>
  <section>
    <veui-checkbox
      v-model="modal"
      class="item"
    >
      Modal
    </veui-checkbox>
    <veui-checkbox
      v-model="outsideClosable"
      class="item"
    >
      Outside Closable
    </veui-checkbox>
  </section>

  <section>
    <veui-button
      class="item"
      @click="topOpen = true"
    >
      Top
    </veui-button>
    <veui-button
      class="item"
      @click="rightOpen = true"
    >
      Right
    </veui-button>
    <veui-button
      class="item"
      @click="bottomOpen = true"
    >
      Bottom
    </veui-button>
    <veui-button
      class="item"
      @click="leftOpen = true"
    >
      Left
    </veui-button>
  </section>

  <veui-drawer
    :open.sync="topOpen"
    :outside-closable="outsideClosable"
    :modal="modal"
    placement="top"
  >
    <p>content area</p>
    <template #title="{ close }">
      <a @click="close">
        关闭
      </a>
    </template>
    <template #foot>
      <div>Foot</div>
    </template>
  </veui-drawer>
  <veui-drawer
    :open.sync="rightOpen"
    :modal="modal"
    :outside-closable="outsideClosable"
    placement="right"
    title="Title"
  />
  <veui-drawer
    title="Title"
    :modal="modal"
    :open.sync="bottomOpen"
    :outside-closable="outsideClosable"
    placement="bottom"
  />
  <veui-drawer
    title="Title"
    :modal="modal"
    :open.sync="leftOpen"
    :outside-closable="outsideClosable"
    placement="left"
  />
</article>
</template>

<script>
import { Checkbox, Drawer, Button } from 'veui'

export default {
  name: 'drawer-demo',
  components: {
    'veui-drawer': Drawer,
    'veui-checkbox': Checkbox,
    'veui-button': Button
  },
  data () {
    return {
      modal: true,
      outsideClosable: false,
      topOpen: false,
      rightOpen: false,
      bottomOpen: false,
      leftOpen: false
    }
  }
}
</script>

<style lang="less" scoped>
section {
  & + & {
    margin-top: 20px;
  }
}

.item {
  & + & {
    margin-left: 20px;
  }
}
</style>

Use the modal prop to control whether the drawer is modal or not.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-button
    class="button"
    @click="modalOpen = true"
  >
    Modal
  </veui-button>
  <veui-button
    class="button"
    @click="nonModalOpen = true"
  >
    Non-modal
  </veui-button>
  <veui-drawer
    title="System"
    :open.sync="modalOpen"
    @ok="handleModalClose(true)"
    @cancel="handleModalClose"
  >
    Do you want to refresh the page?
  </veui-drawer>
  <veui-drawer
    title="System"
    :open.sync="nonModalOpen"
    :modal="false"
    @ok="handleModalClose(true)"
    @cancel="handleModalClose"
  >
    Do you want to refresh the page?
  </veui-drawer>
</article>
</template>

<script>
import { Drawer, Button } from 'veui'

export default {
  components: {
    'veui-drawer': Drawer,
    'veui-button': Button
  },
  data () {
    return {
      modalOpen: false,
      nonModalOpen: false
    }
  },
  methods: {
    handleModalClose (ok) {
      this.modalOpen = false
      if (ok) {
        location.reload()
      }
    },
    handleNonModalClose (ok) {
      this.nonModalOpen = false
      if (ok) {
        location.reload()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.button {
  margin-right: 20px;
}
</style>

Custom content

Edit this demo on GitHubEdit

<template>
<article>
  <veui-button
    class="button"
    @click="simpleOpen = true"
  >
    Title & content
  </veui-button>
  <veui-drawer
    :open.sync="simpleOpen"
    title="Customized Title & Content"
    @ok="simpleOpen = false"
    @cancel="simpleOpen = false"
  >
    Customized content via <code>&lt;slot&gt;</code>.
  </veui-drawer>

  <veui-button
    class="button"
    @click="titleIconOpen = true"
  >
    Icon in Title
  </veui-button>
  <veui-drawer
    :open.sync="titleIconOpen"
    @ok="titleIconOpen = false"
    @cancel="titleIconOpen = false"
  >
    <template #title>
      Title with Icon <veui-icon name="flag"/>
    </template>
    Customized content via <code>&lt;slot&gt;</code>.
  </veui-drawer>

  <veui-button
    class="button"
    @click="footOpen = true"
  >
    Foot
  </veui-button>
  <veui-drawer
    :open.sync="footOpen"
    title="Customized Foot"
  >
    Customized content via <code>&lt;slot&gt;</code>.
    <template #foot="{ close }">
      <veui-button
        ui="s primary"
        @click="close('ok')"
      >
        Close
      </veui-button>
    </template>
  </veui-drawer>
</article>
</template>

<script>
import { Drawer, Button, Icon } from 'veui'
import 'veui-theme-dls-icons/flag'

export default {
  components: {
    'veui-drawer': Drawer,
    'veui-button': Button,
    'veui-icon': Icon
  },
  data () {
    return {
      simpleOpen: false,
      titleIconOpen: false,
      footOpen: false
    }
  }
}
</script>

<style lang="less" scoped>
.button {
  margin-right: 20px;
}
</style>

API

Props

Name Type Default Description

ui

string

Predefined styles.

Value	Description
`s`	Small content size (size of content and components, not the overall size of the drawer).
`m`	Medium content size (size of content and components, not the overall size of the drawer).

placement

string

'right'

Drawer position.

Value	Description
`top`	Slide out from the top.
`right`	Slide out from the right.
`bottom`	Slide out from the bottom.
`left`	Slide out from the left.

modal boolean true Whether the drawer is modal. If it's modal, it will cover the underlying content and grab the focus (the focus will return after it's closed).

title string - The text of the drawer title. If both the title prop and the title slot are specified, the latter will be used.

open

boolean

false

.sync

Whether to show the drawer or not.

closable boolean true Whether to show the close button.

outside-closable boolean false Whether to close the drawer when clicked outside the drawer.

escapable boolean false Whether the drawer can be closed by pressing the esc key. Only effective when closable is true.

priority number - The z-index of the drawer layer. Refer to the Overlay component's priority prop.

footless boolean false Whether to hide the default footer.

loading boolean false Whether it's in the loading state. When it's in the loading state, the OK button will also enter the loading state and cannot be clicked.

disabled boolean false Whether it's in the disabled state. When it's in the disabled state, the OK button will also enter the disabled state and cannot be clicked.

ok-label string - The text content of the "OK" button.

cancel-label string - The text content of the "Cancel" button.

before-close function(string): boolean=|Promise<boolean> - Run after the operation that triggers the closing. Refer to the Dialog component's before-close prop.

overlay-class string | Object - The class name of the drawer layer root element. Refer to the Overlay component's overlay-class prop.

Slots

Name Description

default Content area.

title Title area. If both the title prop and the title slot are specified, the latter will be used.

foot

Footer area. The "OK" and "Cancel" buttons will be displayed by default.

Name	Type	Description
`close`	`function(type: string): void`	A callback function that triggers the drawer to close. `type` is the type of the closing action, which will be passed as a parameter to the `before-close` hook function and will also trigger an event with the same name.

Events

Name	Description
`ok`	Fired when the "OK" button is clicked or when the `close('ok')` function is called in the scope.
`cancel`	Fired when the "Cancel" button is clicked, the close button is clicked, or the drawer is closed by pressing `esc` or calling the `close('cancel')` function in the scope.
`<value>`	Fired when the `close(value)` function is called in the scope.
`afteropen`	Fired after the drawer is opened. The drawer content will be rendered after it's opened, so if there are logic that depends on the content rendering, please execute them after this event is triggered.
`afterclose`	Fired after the drawer is closed. If the style theme provides an exit animation, it will be triggered after the exit animation is completed.

Edit this page on GitHubEdit