# Drawer 抽屉

<template>
  <div class="demo-wrapper">
    <w-button type="primary" @click="visible = true">打开抽屉</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-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
        style="margin-left: 24px;"
        type="primary"
        @click="visible = true"
      >
        打开抽屉
      </w-button>
      <w-drawer
        :size="width"
        ref="drawer"
        :visible.sync="visible"
        append-to-body
        click-modal-other
        :close-on-click-modal="false"
        :modal="false"
        :position="position"
        title="Drawer的基础用法"
        @onClose="handleClose"
      >
        <div class="dragger-content-container">
          <!-- slot -->
          <ul>
            <li>点击触发按钮打开抽屉, 抽屉默认位置在左侧;</li>
            <li>默认点击遮罩部分或头部关闭按钮可以将抽屉关闭;</li>
            <li>
              通过
              <strong>slot</strong>
              的方式向抽屉传入需要展示的内容;
            </li>
          </ul>
        </div>
        <w-collapse-trigger
          :get-container="
            () => $refs.drawer.$el.querySelector('.w-drawer__content')
          "
          @before-resize-change="handleBeforeResizeChange"
          @after-resize-change="hanldeAfterResizeChange"
          :min-size="200"
          :max-size="600"
          fixed
          theme="primary"
          text="模板列表"
          :placement="getPosition()"
          show-bar
          :collapse="collapse"
          @click="handleCollapseTrigger"
        ></w-collapse-trigger>
      </w-drawer>
  </div>
</template>
<script>
export default {
  data () {
    return {
      position: 'right',
        width: '300px',
        visible: false,
        collapse: false,
    }
  },
  methods: {
    getPosition() {
        const Position = {
          left: 'right',
          right: 'left',
          top: 'bottom',
          bottom: 'top'
        }
        return Position[this.position]
      },
      handleClose() {
        this.visible = false
      },
      handleCollapseTrigger() {
        this.collapse = !this.collapse
        this.width = this.collapse ? '20px' : '300px'
      },
      handleBeforeResizeChange(val) {
        console.log('开始拖拽：', val)
      },
      hanldeAfterResizeChange(val) {
        console.log('结束拖拽：', val)
      }
  }
}
</script>
<style scoped lang="scss">
    .dragger-content-container {
      width: 100%;
      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="visible = true">打开抽屉</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">打开抽屉</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">打开抽屉</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>