WinDesign

# Drawer 抽屉

# 代码演示

基础用法

drawer组件实际上是一个容器组件, 需要展示的内容, 全权由 slot 传入。

查看代码 

<template>
  <div class="demo-wrapper">
    <w-button type="primary" @click="visible = true">open</w-button>
    <w-drawer
      :visible.sync="visible"
      title="Drawer的基础用法"
      @onClose="handleClose"
    >
      <div class="content-container">
        <!-- slot -->
        <ul>
          <li>点击触发按钮打开抽屉, 抽屉默认位置在左侧;</li>
          <li>默认点击遮罩部分或头部关闭按钮可以将抽屉关闭;</li>
          <li>
            通过
            <strong>slot</strong>
            的方式向抽屉传入需要展示的内容;
          </li>
        </ul>
      </div>
    </w-drawer>
  </div>
</template>
<script>
export default {
  data () {
    return {
      visible: false
    }
  },
  methods: {
    handleClose () {
      this.visible = false
    }
  }
}
</script>
<style scoped lang="scss">
.drawer-demo {
  .content-container {
    width: 280px;
    padding-bottom: 20px;
    ul {
      list-style: none;
    }
    ul li {
      font-size: 14px;
      color: #666;
    }
    li + li {
      margin-top: 10px;
    }
  }
}
</style>

底部插槽 👉 V2.4.26、V2.4.27

通过 slot='footer' 插槽传入。通过 body-style 设置内容样式。

查看代码 

<template>
  <div class="demo-wrapper">
    <w-button type="primary" @click="visible = true">open</w-button>
    <w-drawer
      :wrapper-closable="false"
      :body-style="{ display: 'flex', padding: '0 20px' }"
      :visible.sync="visible"
      title="Drawer的基础用法"
      @onClose="handleClose"
    >
      <div class="content-container">
        <!-- slot -->
        <ul>
          <li>点击触发按钮打开抽屉, 抽屉默认位置在左侧;</li>
          <li>默认点击遮罩部分或头部关闭按钮可以将抽屉关闭;</li>
          <li>
            通过
            <strong>slot</strong>
            的方式向抽屉传入需要展示的内容;
          </li>
        </ul>
      </div>
    </w-drawer>
  </div>
</template>
<script>
export default {
  data () {
    return {
      visible: false
    }
  },
  methods: {
    handleClose () {
      this.visible = false
    }
  }
}
</script>
<style scoped lang="scss">
.drawer-demo {
  .content-container {
    width: 280px;
    padding-bottom: 20px;
    ul {
      list-style: none;
    }
    ul li {
      font-size: 14px;
      color: #666;
    }
    li + li {
      margin-top: 10px;
    }
  }
}
</style>

多层嵌套

拥有多层嵌套的方法。

查看代码 

<template>
  <div class="demo-wrapper">
    <w-button type="primary" @click="drawer = true">open</w-button>
    <w-drawer
      title="我是外面的 Drawer"
      position="right"
      :visible.sync="drawer"
      size="40%"
    >
      <div>
        <w-button @click="innerDrawer = true">打开里面的!</w-button>
        <w-drawer
          position="right"
          title="我是里面的"
          :append-to-body="true"
          :before-close="handleClose"
          :visible.sync="innerDrawer"
        >
          <p>_(:зゝ∠)_</p>
        </w-drawer>
      </div>
    </w-drawer>
  </div>
</template>
<script>
export default {
  data () {
    return {
      drawer: false,
      innerDrawer: false,
    }
  },
  methods: {
    handleClose(done) {
      this.$Confirm('还有未保存的工作哦确定关闭吗？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    }
  }
}
</script>
<style scoped lang="scss">
.drawer-demo {
  .w-drawer__body {
    margin: 0 16px;
  }
}
</style>

选择位置

抽屉是 fixed定位, 默认从视窗左侧打开, 可以通过改动 position属性, 传入 top /bottom / left / right来指定抽屉的位置。

查看代码 

<template>
  <div class="demo-wrapper">
    <w-radio-group v-model="position">
      <w-radio label="top">top</w-radio>
      <w-radio label="right">right</w-radio>
      <w-radio label="bottom">bottom</w-radio>
      <w-radio label="left">left</w-radio>
    </w-radio-group>
    <w-button type="primary" @click="visible = true">open</w-button>
    <w-drawer
      :direction="position"
      :visible.sync="visible"
      :title="`Drawer的位置 position = '${position}'`"
      @onClose="handleClose"
    >
      <div class="content-container">
        <!-- slot -->
        <ul>
          <li>抽屉默认出现的位置在左侧, 即 position = "left";</li>
          <li>position的其他可选值为: "right", "top", "bottom";</li>
          <li>更多参数请查看参数配置说明;</li>
        </ul>
      </div>
    </w-drawer>
  </div>
</template>
<script>
export default {
  data () {
    return {
      position: 'left',
      visible: false
    }
  },
  methods: {
    handleClose () {
      this.visible = false
    }
  }
}
</script>
<style scoped lang="scss">
  .drawer-demo {
    .content-container {
      .w-drawer--left,
      .w-drawer--right {
        .content-container {
          width: 320px;
        }
      }
      ul li {
          font-size: 14px;
          color: #666;
      }
      li + li {
          margin-top: 10px;
      }
    }
  }
</style>

关闭拦截

beforeClose参数，用于拦截关闭抽屉的动作，可以用于处理一些在关闭之前需要处理的事件。

查看代码 

<template>
  <div class="demo-wrapper">
    <w-button type="primary" @click="visible = true">open</w-button>
    <w-drawer
      title="Drawer的基础用法"
      :visible.sync="visible"
      :before-close="beforeCloseHandler"
    >
      <div class="content-container">
        <!-- slot -->
        <ul>
          <li>点击触发按钮打开抽屉, 抽屉默认位置在左侧;</li>
          <li>默认点击遮罩部分关闭抽屉;</li>
          <li>
            通过
            <strong>slot</strong>
            的方式向抽屉传入需要展示的内容;
          </li>
        </ul>
      </div>
    </w-drawer>
  </div>
</template>
<script>
export default {
  data () {
    return {
      visible: false
    }
  },
  methods: {
    beforeCloseHandler (done) {
      this.$Confirm('是否确认关闭 drawer?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        done()
      }).catch(() => {
        this.$Message({
          type: 'info',
          message: '已取消操作'
        })
      })
    }
  }
}
</script>
<style scoped lang="scss">
.drawer-demo {
  .content-container {
    width: 280px;
    padding-bottom: 20px;
    ul {
      list-style: none;
    }
    ul li {
      font-size: 14px;
      color: #666;
    }
    li + li {
      margin-top: 10px;
    }
  }
}
</style>

# API

# Attributes

参数 说明 类型 可选值 默认值 Version
before-close 关闭之前的回调, 会拦截抽屉的关闭操作 Function Function (done) {}, 确认关闭时，调用 done 即可 — v1.6.0
close-on-click-modal 是否可以点击遮罩关闭 drawer, 默认可以 Boolean — true v1.4.13
drawer-class 为 drawer 组件添加 class String — —
custom-class * 同 drawer-class String — — v2.0.0
destroy-on-close 是否在关闭 drawer 时摧毁子元素 Boolean — false v1.6.0
modal 是否显示遮罩, 默认显示 Boolean — true v1.4.13
modal-append-to-body 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上 Boolean — true
position 抽屉出现的位置 String 'top' | 'right' | 'bottom' | 'left' 'left'
direction * 同 position String 'top' | 'right' | 'bottom' | 'left' 'left' v2.0.0
visible 抽屉的显示与隐藏控制参数，是否显示 Drawer，v1.4.13 以上版本支持 .sync 修饰符 Boolean — false
size drawer 窗口内容的大小，当抽屉方向为left, right时，size 限制窗体宽度，当抽屉方向为top, bottom时，size 限制的是窗体的高度。 string — 320px v1.6.0
append-to-body Drawer 自身是否插入至body元素上。 Boolean — false v2.0.0
close-on-press-escape 是否可以通过按下 ESC 关闭 Drawer Boolean — true v2.0.0
title Drawer 的标题, 也可以用具名的 slot 传入 String — — v2.0.0
wrapper-closable 点击遮罩层是否可以关闭 Drawer Boolean — true v2.0.0
with-header 控制是否显示 header 栏 Boolean — true v2.0.0
body-style 设置 body 的样式 object — {} V2.4.27

# Methods

参数 说明 回调参数 Version
handleCloseDrawer 关闭 drawer(before-close 仍有效) — v1.6.0

# Events

参数 说明 回调参数 Version
onClose 关闭 drawer 时触发 —
close * 同 onClose — v2.0.0
onOpen 打开 drawer 时触发 —
open * 同 onOpen — v2.0.0
opened Drawer 打开动画结束时的回调 — v2.0.0
closed Drawer 关闭动画结束时的回调 — v2.0.0

# Drawer Slots

name 说明 Version
— Drawer 主体内容
title Drawer 标题 v2.0.0
footer Drawer 底部 v2.4.26
上次更新: 9/23/2024, 3:34:20 PM

← Loading 加载 →