基础使用

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

<template>
  <CButton
    label="点击打开抽屉"
    @click="show = true"
  />

  <CDrawer
    v-model="show"
    title="你好"
  >
    我是一些抽屉内容
  </CDrawer>
</template>

点击展开/收起代码

点击打开交互式编辑器

不同位置

<script setup>
import { ref } from 'vue'
import {
  matArrowBack,
  matArrowDownward,
  matArrowForward,
  matArrowUpward,
} from '@quasar/extras/material-icons/index'

const show = ref(false)
const position = ref('left')

function openWithPosition(pos) {
  position.value = pos
  show.value = true
}
</script>

<template>
  <div class="c-flex c-gutter-md c-wrap">
    <div>
      <c-button
        icon
        @click="openWithPosition('left')"
      >
        <c-icon :content="matArrowBack" />
      </c-button>
    </div>
    <div>
      <c-button
        icon
        @click="openWithPosition('top')"
      >
        <c-icon :content="matArrowUpward" />
      </c-button>
    </div>
    <div>
      <c-button
        icon
        @click="openWithPosition('right')"
      >
        <c-icon :content="matArrowForward" />
      </c-button>
    </div>
    <div>
      <c-button
        icon
        @click="openWithPosition('bottom')"
      >
        <c-icon :content="matArrowDownward" />
      </c-button>
    </div>
  </div>

  <c-drawer
    v-model="show"
    title="你好"
    :position="position"
  >
    我是一些抽屉内容
  </c-drawer>
</template>

点击展开/收起代码

点击打开交互式编辑器

CDrawer API

Props

Slots

Events

modelValue

boolean

默认值  false

是否展示抽屉，用于v-model绑定

position

"left" | "top" | "right" | "bottom"

默认值  'left'

抽屉弹出位置

title

string

默认值  ''

抽屉的标题

width

string

默认值  '20vw'

抽屉的宽度，该属性仅在左右弹出抽屉时可用

bodyHeight

string

默认值  '20vh'

抽屉的高度，该属性仅在上下弹出抽屉时可用

closeOnClickBackdrop

boolean

默认值  true

点击遮罩是否关闭抽屉