<template>
  <div class="kole-drawer"><button class="kole-drawer-button kole-drawer-primary" type="button" @click="$emit('open')">打开抽屉</button><div v-if="open" class="kole-drawer-drawer-mask" @click.self="maskClosable && $emit('close')"></div><aside v-if="open" class="kole-drawer-drawer" role="dialog" aria-modal="true"><h3 class="kole-drawer-title">{{ title }}</h3><p class="kole-drawer-desc">在当前页面侧向编辑，不丢失列表上下文。</p><div class="kole-drawer-drawer-footer"><button class="kole-drawer-button" type="button" @click="$emit('close')">取消</button><button class="kole-drawer-button kole-drawer-primary" type="button" @click="$emit('confirm')">确定</button></div></aside></div>
</template>

<script>
export default {
  name: 'KoleDrawer',
  props: {
    open: { type: Boolean, default: false }, // 是否展开
    title: { type: String, default: '编辑资料' }, // 标题
    placement: { type: String, default: 'right' }, // 弹出位置
    maskClosable: { type: Boolean, default: true }, // 点击遮罩是否可关闭
  },
  data: function () { return { open: false }; },
  // events: open, close, confirm
};
</script>

<style src="./Drawer.css"></style>
