Drawer 抽屉

概述

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

何时使用

  • 当需要一个附加的面板来控制父窗体内容,这个面板在需要时呼出。比如,控制界面展示样式,往界面中添加内容。
  • 当需要在当前任务流中插入临时任务,创建或预览附加内容。比如展示协议条款,创建子对象。

代码示例

Drawer 抽屉 - 图1

基础抽屉

基础抽屉,点击触发按钮抽屉从右滑出,点击遮罩区关闭。

  1. <template>
  2. <Button @click="value1 = true" type="primary">Open</Button>
  3. <Drawer title="Basic Drawer" :closable="false" v-model="value1">
  4. <p>Some contents...</p>
  5. <p>Some contents...</p>
  6. <p>Some contents...</p>
  7. </Drawer>
  8. </template>
  9. <script>
  10. export default {
  11. data () {
  12. return {
  13. value1: false
  14. }
  15. }
  16. }
  17. </script>

Drawer 抽屉 - 图2

左侧滑出

基础抽屉,点击触发按钮抽屉从左滑出,点击遮罩区关闭。

  1. <template>
  2. <Button @click="value2 = true" type="primary">Open</Button>
  3. <Drawer title="Basic Drawer" placement="left" :closable="false" v-model="value2">
  4. <p>Some contents...</p>
  5. <p>Some contents...</p>
  6. <p>Some contents...</p>
  7. </Drawer>
  8. </template>
  9. <script>
  10. export default {
  11. data () {
  12. return {
  13. value2: false
  14. }
  15. }
  16. }
  17. </script>

Drawer 抽屉 - 图3

对象编辑

用于承载编辑相关操作,需要点击关闭按钮关闭。

  1. <template>
  2. <div>
  3. <Button @click="value3 = true" type="primary">Create</Button>
  4. <Drawer
  5. title="Create"
  6. v-model="value3"
  7. width="720"
  8. :mask-closable="false"
  9. :styles="styles"
  10. >
  11. <Form :model="formData">
  12. <Row :gutter="32">
  13. <Col span="12">
  14. <FormItem label="Name" label-position="top">
  15. <Input v-model="formData.name" placeholder="please enter user name" />
  16. </FormItem>
  17. </Col>
  18. <Col span="12">
  19. <FormItem label="Url" label-position="top">
  20. <Input v-model="formData.url" placeholder="please enter url">
  21. <span slot="prepend">http://</span>
  22. <span slot="append">.com</span>
  23. </Input>
  24. </FormItem>
  25. </Col>
  26. </Row>
  27. <Row :gutter="32">
  28. <Col span="12">
  29. <FormItem label="Owner" label-position="top">
  30. <Select v-model="formData.owner" placeholder="please select an owner">
  31. <Option value="jobs">Steven Paul Jobs</Option>
  32. <Option value="ive">Sir Jonathan Paul Ive</Option>
  33. </Select>
  34. </FormItem>
  35. </Col>
  36. <Col span="12">
  37. <FormItem label="Type" label-position="top">
  38. <Select v-model="formData.type" placeholder="please choose the type">
  39. <Option value="private">Private</Option>
  40. <Option value="public">Public</Option>
  41. </Select>
  42. </FormItem>
  43. </Col>
  44. </Row>
  45. <Row :gutter="32">
  46. <Col span="12">
  47. <FormItem label="Approver" label-position="top">
  48. <Select v-model="formData.approver" placeholder="please choose the approver">
  49. <Option value="jobs">Steven Paul Jobs</Option>
  50. <Option value="ive">Sir Jonathan Paul Ive</Option>
  51. </Select>
  52. </FormItem>
  53. </Col>
  54. <Col span="12">
  55. <FormItem label="DateTime" label-position="top">
  56. <DatePicker v-model="formData.date" type="daterange" placeholder="please select the date" style="display: block" placement="bottom-end"></DatePicker>
  57. </FormItem>
  58. </Col>
  59. </Row>
  60. <FormItem label="Description" label-position="top">
  61. <Input type="textarea" v-model="formData.desc" :rows="4" placeholder="please enter the description" />
  62. </FormItem>
  63. </Form>
  64. <div class="demo-drawer-footer">
  65. <Button style="margin-right: 8px" @click="value3 = false">Cancel</Button>
  66. <Button type="primary" @click="value3 = false">Submit</Button>
  67. </div>
  68. </Drawer>
  69. </div>
  70. </template>
  71. <script>
  72. export default {
  73. data () {
  74. return {
  75. value3: false,
  76. styles: {
  77. height: 'calc(100% - 55px)',
  78. overflow: 'auto',
  79. paddingBottom: '53px',
  80. position: 'static'
  81. },
  82. formData: {
  83. name: '',
  84. url: '',
  85. owner: '',
  86. type: '',
  87. approver: '',
  88. date: '',
  89. desc: ''
  90. },
  91. }
  92. }
  93. }
  94. </script>
  95. <style>
  96. .demo-drawer-footer{
  97. width: 100%;
  98. position: absolute;
  99. bottom: 0;
  100. left: 0;
  101. border-top: 1px solid #e8e8e8;
  102. padding: 10px 16px;
  103. text-align: right;
  104. background: #fff;
  105. }
  106. </style>

Drawer 抽屉 - 图4

信息预览抽屉

需要快速预览对象概要时使用,点击遮罩区关闭。

  1. <template>
  2. <div>
  3. <Button @click="value4 = true" type="primary">View Profile</Button>
  4. <Drawer :closable="false" width="640" v-model="value4">
  5. <p :style="pStyle">User Profile</p>
  6. <p :style="pStyle">Personal</p>
  7. <div class="demo-drawer-profile">
  8. <Row>
  9. <Col span="12">
  10. Full Name: Aresn
  11. </Col>
  12. <Col span="12">
  13. Account: aresn@aresn.com
  14. </Col>
  15. </Row>
  16. <Row>
  17. <Col span="12">
  18. City: BeiJing
  19. </Col>
  20. <Col span="12">
  21. Country: China
  22. </Col>
  23. </Row>
  24. <Row>
  25. <Col span="12">
  26. Birthday: May 14, 1991
  27. </Col>
  28. <Col span="12">
  29. Website: <a href="https://dev.iviewui.com" target="_blank">https://dev.iviewui.com</a>
  30. </Col>
  31. </Row>
  32. Message: Hello, Developer
  33. </div>
  34. <Divider />
  35. <p :style="pStyle">Company</p>
  36. <div class="demo-drawer-profile">
  37. <Row>
  38. <Col span="12">
  39. Position: Programmer
  40. </Col>
  41. <Col span="12">
  42. Responsibilities:Coding
  43. </Col>
  44. </Row>
  45. <Row>
  46. <Col span="12">
  47. Department: Map visualization
  48. </Col>
  49. </Row>
  50. Skills:C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc.
  51. </div>
  52. <Divider />
  53. <p :style="pStyle">Contacts</p>
  54. <div class="demo-drawer-profile">
  55. <Row>
  56. <Col span="12">
  57. Email: admin@aresn.com
  58. </Col>
  59. <Col span="12">
  60. Phone Number: +86 18888888888
  61. </Col>
  62. </Row>
  63. <Row>
  64. <Col span="12">
  65. GitHub: <a href="https://github.com/iview/iview" target="_blank">https://github.com/iview/iview</a>
  66. </Col>
  67. </Row>
  68. </div>
  69. </Drawer>
  70. </div>
  71. </template>
  72. <script>
  73. export default {
  74. data () {
  75. return {
  76. value4: false,
  77. pStyle: {
  78. fontSize: '16px',
  79. color: 'rgba(0,0,0,0.85)',
  80. lineHeight: '24px',
  81. display: 'block',
  82. marginBottom: '16px'
  83. }
  84. }
  85. }
  86. }
  87. </script>
  88. <style>
  89. .demo-drawer-profile{
  90. font-size: 14px;
  91. }
  92. .demo-drawer-profile .ivu-col{
  93. margin-bottom: 12px;
  94. }
  95. </style>

Drawer 抽屉 - 图5

多层抽屉

在抽屉内打开新的抽屉,用以解决多分支任务的复杂状况。

  1. <template>
  2. <Button @click="value5 = true" type="primary">Open Drawer</Button>
  3. <Drawer title="Multi-level drawer" width="512" :closable="false" v-model="value5">
  4. <Button @click="value6 = true" type="primary">Two-level Drawer</Button>
  5. </Drawer>
  6. <Drawer title="Two-level Drawer" :closable="false" v-model="value6">
  7. This is two-level drawer.
  8. </Drawer>
  9. </template>
  10. <script>
  11. export default {
  12. data () {
  13. return {
  14. value5: false,
  15. value6: false
  16. }
  17. }
  18. }
  19. </script>

API

Drawer props

属性说明类型默认值
value抽屉是否显示,可使用 v-model 双向绑定数据Booleanfalse
title抽屉标题,如果使用 slot 自定义了页头,则 title 无效String-
width抽屉宽度。当其值不大于 100 时以百分比显示,大于 100 时为像素Number | String256
closable是否显示右上角的关闭按钮Booleantrue
mask-closable是否允许点击遮罩层关闭Booleantrue
mask是否显示遮罩层Booleantrue
mask-style遮罩层样式Object-
styles抽屉中间层的样式Object-
scrollable页面是否可以滚动Booleanfalse
placement抽屉的方向,可选值为 left 或 rightStringright
transfer是否将抽屉放置于 body 内Booleantrue
class-name设置抽屉容器.ivu-drawer-wrap的类名String-
inner是否设置抽屉在某个元素内打开,开启此属性时,应当关闭 transfer 属性Booleanfalse
draggable 3.3.0是否开启拖拽调整宽度Booleanfalse
before-close 3.3.0返回 Promise 可以阻止关闭Function-

Drawer events

事件名说明返回值
on-close关闭抽屉时触发
on-visible-change显示状态发生变化时触发true / false
on-resize-width 3.3.0调整宽度时触发width

Drawer slot

名称说明
header自定义标题栏
close自定义右上角关闭内容
trigger 3.3.0自定义调整宽度节点
默认抽屉主体内容