About

Warning : This is custom element ui for me.

This package changes the element-ui dialog close event to mousedown. In the original element-ui, modal is closed when a mouseup event occurs on the wrapper. The close-on-click-modal property is just a property that keeps your modal state when you click wrapper. Modal should be closed when the wrapper is clicked, but the event should be a mousedown, not a click.

<template>
  <transition
    name="dialog-fade"
    @after-enter="afterEnter"
    @after-leave="afterLeave">
    <div
      v-show="visible"
      class="el-dialog__wrapper"
      @mousedown.self="handleWrapperClick" @mouseup="handleMouseup">
      <div
        role="dialog"
        :key="key"
        aria-modal="true"
        :aria-label="title || 'dialog'"
        :class="['el-dialog', { 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
        ref="dialog"
        :style="style"
        @mousedown="handleMousedown">
        <div class="el-dialog__header">
          <slot name="title">
            <span class="el-dialog__title">{{ title }}</span>
          </slot>
          <button
            type="button"
            class="el-dialog__headerbtn"
            aria-label="Close"
            v-if="showClose"
            @click="handleClose">
            <i class="el-dialog__close el-icon el-icon-close"></i>
          </button>
        </div>
        <div class="el-dialog__body" v-if="rendered"><slot></slot></div>
        <div class="el-dialog__footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

Color

I add three colors according to my needs. lightorange(#f5a623), greyblack(#313131), lightred(#d0021b). You can use those colors on button, link, tag ...

Switch

The basic color(primary -> lightorange) is changed. Also, The height of the bar and the size of the button are changed.

Checkbox

The basic color(primary -> lightorange) is changed.

Input

The border-radius is changed (to 1px). And border-color, box-shadow is little changed

Form

required content is changed (* -> circle). The content's font size is 6px

table

When mouse hover on row, background-color was changed. but, remove the style to make custom easier striped color is changed (#fafafa -> #fdfdfd)