This is the 22nd day of my participation in the August More Text Challenge

A little bit about drawers

In the component written at the beginning, I specially wrote a basic component Mask. This component is rarely used on the Web side, so it is generally not written separately in the component library.

I divide it up as a base component that serves as a support component for other components.

I was going to use it in the next part of the business component, but when I selected the system component, I found a component that could also be used. That’s what the Drawer component here is for.

Drawer components are also commonly used as display information, in the PC side is also used less.

But there’s always a part of it.

Let’s look at the usage scenarios first.

It’s hard to find, but take github’s plugin for example.

It’s a not-so-standard drawer application.

Float top level display block containing title, content, and custom location.

Because it’s still a container, it’s relatively simple.

Let’s start with the structure.

<div v-transfer-dom :data-transfer="transfer"> <transition name="fade"> <div :class="['yx-drawer-mask', inner ? 'yx-drawer-inner' : '']" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div> </transition> <div :class="[ 'yx-drawer-wrap', wrapShow ? `yx-drawer-hidden` : '', className ? className : '', mask ? `yx-drawer-no-mask` : '', inner ? `yx-drawer-wrap-inner` : '', canMove ? `yx-drawer-wrap-dragging`: '' ]" @click="handleWrapClick"> <transition :name="'move-' + placement"> <div :class="[ 'yx-drawer', `yx-drawer-${placement}`, !showHead ? 'yx-drawder-noheader' : '', inner ? 'yx-drawer-inner' : '' ]" :style="{width: `${width}px`}" v-show="visible"> <div :class="[ 'yx-drawer-content', ! mask ? 'yx-drawer-content-no-mask' :'' ]" ref="content"> <a class="ivu-drawer-close" v-if="closable" @click="close"> <slot name="close"> <yx-icon type="ios-close"></yx-icon> </slot> </a> <div class="yx-drawer-header" v-if="showHead"><slot name="header"> <div class="yx-drawer-header-inner">{{ title }}</div> </slot> </div> <div class="yx-drawer-body" :style="styles"><slot></slot></div> </div> <div class="ivu-drawer-drag" :class="{ 'ivu-drawer-drag-left': placement === 'left' }" v-if="draggable" @mousedown="handleTriggerMousedown"> <slot name="trigger"> <div class="ivu-drawer-drag-move-trigger"> <div class="ivu-drawer-drag-move-trigger-point"> <i></i><i></i><i></i><i></i><i></i> </div> </div> </slot> </div> </div> </transition> </div> </div>Copy the code

The structure part mainly consists of header and content, and the style part can be fine-tuned.

The logical part

The logical part is relatively simple, is to turn off the control of the event.

const close = () = > {
  if(! props.beforeClose) {return handleClose();
  }

  const before = props.beforeClose();

  if (before && before.then) {
    before.then(() = > {
      handleClose();
    });
  } else{ handleClose(); }}const handleClose = () = > {
  this.visible = false;
  ctx.$emit('input'.false);
  ctx.$emit('on-close');
}
const handleMask = () = > {
  if(props.maskClosable && mask.value) { close(); }}Copy the code

This section is also relatively free, and the content area can also adjust events according to and without demand.