# Drawer 抽屉

<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>

<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>

<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>