Drawer 抽屉

示例

位置

使用 placement 属性控制抽屉弹出的位置。

Modal Outside Closable

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

  <section>
    <veui-button @click="topOpen = true">
      Top
    </veui-button>
    <veui-button @click="rightOpen = true">
      Right
    </veui-button>
    <veui-button @click="bottomOpen = true">
      Bottom
    </veui-button>
    <veui-button @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;
  }
}

.veui-button,
.veui-checkbox {
  & + & {
    margin-left: 20px;
  }
}
</style>

模态与非模态

使用 modal 属性控制抽屉是否为模态类型。

在 GitHub 上编辑此页编辑

<template>
<article>
  <veui-button @click="modalOpen = true">
    Modal
  </veui-button>
  <veui-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>
.veui-button {
  margin-right: 20px;
}
</style>

自定义内容

在 GitHub 上编辑此页编辑

<template>
<article>
  <veui-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 @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 @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>
.veui-button {
  margin-right: 20px;
}
</style>

API

属性

名称类型默认值描述

ui

string=

预设样式。

值	描述
`s`	小内容尺寸（内容及部件尺寸，非抽屉整体空间大小）。
`m`	中内容尺寸（内容及部件尺寸，非抽屉整体空间大小）。

placement

string

'right'

抽屉位置。

值	描述
`top`	从上面滑出。
`right`	从右面滑出。
`bottom`	从下面滑出。
`left`	从左面滑出。

modal boolean true 是否是模态抽屉。模态抽屉默认遮挡底层（无法点击）且抢占焦点（关闭后焦点会回归）。

title string - 抽屉标题文本。如果指定了 title 插槽，则优先使用 title 插槽。

open

boolean

false

.sync

是否显示抽屉。

closable boolean true 是否显示关闭按钮。

outside-closable boolean false 点击抽屉外部时是否关闭抽屉。

draggable boolean false 是否可拖拽。

escapable boolean false 按下 esc 键是否可以关闭抽屉。仅在 closable 为 true 时生效。

footless boolean false 是否不显示默认的底部操作栏。

loading boolean= false 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。

disabled boolean= false 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态，无法点击。

ok-label string= - “确定”按钮的文字内容。

cancel-label string= - “取消”按钮的文字内容。

before-close function(string): boolean=|Promise<boolean=> - 在将触发关闭的操作发生后执行，参考 Dialog 组件的 before-close 属性。

overlay-class string | Object - 抽屉浮层根元素类名，参考 Overlay 组件的 overlay-class 属性。

插槽

名称描述

default 内容区。

title 标题区。若同时指定了 title 属性和 title 插槽，以后者为准。

foot

底部区域，默认会展示“确定”、“取消”按钮。

名称	类型	描述
`close`	`function(type: string): void`	触发抽屉关闭的回调函数。`type` 为关闭的类型，将作为参数传入 `before-close` 钩子函数作为参数，同时将同步触发同名的事件。

事件

名称	描述
`ok`	点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。
`cancel`	点击“取消”按钮、关闭按钮、通过 `esc` 关闭抽屉时，或者通过调用作用域函数 `close('cancel')` 时触发。
`<value>`	通过调用作用域函数 `close(value)` 时触发。
`afterclose`	浮层关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。

在 GitHub 上编辑此页编辑