current position:Home>Vue3 component development from 0 to 1 - system components: drawer

Vue3 component development from 0 to 1 - system components: drawer

2021-08-26 20:10:17 Lin shenlu

This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details :8 Yuegengwen challenge

Briefly talk about drawers

In the component written at the beginning , I wrote a special article Basic components Mask Mask , This component is Web The terminal is used less , Therefore, it is generally not written separately in the component library .

And I divide it into basic components , As a support component for other components .

It was originally intended to be used in the next part of the business component , But when selecting system components , Find a component that can also be used . That's what I want to mention here Drawer Drawer components What to use .

Drawer components are also commonly used as display information , stay PC The end is also used less .

But it is always needed in some places .

Let's take a look at the usage scenario first .

image.png

It's really hard to find it on purpose , Then take it github Let's take this plug-in as an example .

It's a less standard drawer application .

Float at the top , Include title , Content , Display block of custom appearance position .

Because it's still a container , So 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 code 

The structural part is mainly header Head as well as content Content Part two , Fine tune the style part .

Logical part

The logic part is relatively simple , Just close 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 code 

This one is also relatively free , And the content area can also adjust events according to no needs .

copyright notice
author[Lin shenlu],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826201014112i.html

Random recommended