Cajón

Capa emergente que se desliza desde un borde de la pantalla, ideal para operaciones secundarias como detalles o filtrado. Cuatro direcciones, tamaño configurable y control del comportamiento de la máscara.

Cajón

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton type="primary" @click="open('right')">right, derecha</LhButton>
      <LhButton @click="open('left')">left, izquierda</LhButton>
      <LhButton @click="open('top')">top, arriba</LhButton>
      <LhButton @click="open('bottom')">bottom, abajo</LhButton>
      <LhButton @click="openNoMask">La máscara no cierra</LhButton>
    </div>
    <LhDrawer v-model="visible" :title="title" :direction="direction" :size="size">
      <p style="margin: 0 0 8px">direction controla la dirección y size, las dimensiones (un número en px o una cadena con porcentaje).</p>
      <p class="demo-note">Los botones inferiores pueden combinar lockScroll / closeOnEsc, etc.</p>
      <template #footer>
        <LhButton @click="visible = false">Cancelar</LhButton>
        <LhButton type="primary" @click="visible = false">Guardar</LhButton>
      </template>
    </LhDrawer>
    <LhDrawer
      v-model="noMask"
      title="Hacer clic en la máscara no cierra"
      direction="right"
      size="30%"
      :mask-closable="false"
      :show-close="true"
      :lock-scroll="true"
      :close-on-esc="false"
    >
      <p style="margin: 0">Con maskClosable=false y closeOnEsc=false, solo se puede cerrar mediante los botones o el icono de cierre.</p>
      <template #footer>
        <LhButton type="primary" @click="noMask = false">Cerrar</LhButton>
      </template>
    </LhDrawer>
  </div>
</template>

<script>
export default {
  data: () => ({
    visible: false,
    noMask: false,
    title: 'Cajón derecho',
    direction: 'right',
    size: '360px',
  }),
  methods: {
    open(dir) {
      this.direction = dir
      this.title = `Cajón ${dir}`
      this.size = dir === 'top' || dir === 'bottom' ? '30%' : '360px'
      this.visible = true
    },
    openNoMask() {
      this.noMask = true
    },
  },
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
v-model	Visibilidad (prop modelValue controlado)	boolean	false
title	Título	string	—
direction	Dirección	'right' \| 'left' \| 'top' \| 'bottom'	'right'
size	Dimensiones: un número se interpreta como px; una cadena admite porcentajes	string \| number	—
maskClosable	Si se cierra al hacer clic en la máscara	boolean	true
showClose	Si se muestra el botón de cierre	boolean	true
teleportTarget	Destino de montaje de la capa emergente (selector o elemento; body por defecto. Vue 2.7 no tiene Teleport: se implementa moviendo el anfitrión)	string \| HTMLElement	—
lockScroll	Si se bloquea el desplazamiento de la página	boolean	true
closeOnEsc	Si responde al cierre con Esc	boolean	true
themeVars	Variables de tema a nivel de componente; anula la configuración de ConfigProvider	Record<string, string>	—
bgPattern	Patrón de fondo a nivel de componente; anula la configuración de ConfigProvider	string	—
sx	Propiedades de layout abreviadas (se aplican al panel)	—	—

Slots

Slot	Descripción
header	Área del título (por defecto usa el prop title)
default	Cuerpo del cajón
footer	Área de botones inferior