Drawer抽屉

基本使用

一个基本的抽屉

$header

$label

退出

可以使用 gan-drawer 标签声明一个抽屉。推荐使用sync操作符，良好的进行发布订阅的沟通。

<template>
  <div>
    <gan-drawer :visible.sync="visible"/>
    <gan-button @click="() => visible = true">点击打开</gan-button>
  </div>
</template>
<script>
export default {
  data: () => ({
    visible: false
  })
}
</script>

显示代码

定义头部

对于头部的文字，如果你喜欢这种风格，你可以自定义文字

自定义头部

自定义标签

退出

可以使用 header-icon, header-label, header-title定义标题，标签，闪电图标

<template>
  <div>
    <gan-drawer :visible.sync="visible"
      header-icon="icon-flashlight_fill"
      header-label="自定义标签"
      header-title="自定义头部"/>
    <gan-button @click="() => visible = true">点击打开</gan-button>
  </div>
</template>
<script>
export default {
  data: () => ({
    visible: false
  })
}
</script>

显示代码

插槽

对于头部的文字，如果你喜欢这种风格，你可以自定义文字

我是头部插槽

我是底部插槽

可以使用 header-icon, header-label, header-title定义标题，标签，闪电图标

<template>
  <div>
    <gan-drawer :visible.sync="visible">
      <template slot="header">
        我是头部插槽
      </template>
      <template slot="footer">
        我是底部插槽
      </template>
    </gan-drawer>
    <gan-button @click="() => visible = true">点击打开</gan-button>
  </div>
</template>
<script>
export default {
  data: () => ({
    visible: false
  })
}
</script>

显示代码

闪电事件

对于头部的文字，如果你喜欢这种风格，你可以自定义文字

自定义头部

自定义标签

退出

可以使用 header-icon, header-label, header-title定义标题，标签，闪电图标

<template>
  <div>
    <gan-drawer :visible.sync="visible"
      @move="bindMove"
      header-icon="icon-flashlight_fill"
      header-label="自定义标签"
      header-title="自定义头部"/>
    <gan-button @click="() => visible = true">点击打开</gan-button>
  </div>
</template>
<script>
export default {
  data: () => ({
    visible: false
  }),
  methods: {
    bindMove() {
      console.log('...move')
    }
  }
}
</script>

显示代码