@v2coding/ui 0.1.0

package/src/components/drawer/drawer.vue

@@ -0,0 +1,523 @@
+<template>
+  <div v-transfer-dom :data-transfer="transfer">
+    <transition name="fade">
+      <div :class="maskClasses" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
+    </transition>
+    <div :class="wrapClasses" @click="handleWrapClick">
+      <transition :name="'move-' + placement">
+        <div :class="classes" :style="mainStyles" v-show="visible">
+          <div :class="contentClasses" ref="content">
+            <a class="ui-drawer-close" v-if="closable" @click="close">
+              <slot name="close">
+                <i class="el-icon-close"></i>
+              </slot>
+            </a>
+            <div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
+            <div :class="[prefixCls + '-body']" :style="styles"><slot></slot></div>
+          </div>
+          <div class="ui-drawer-drag" :class="{ 'ui-drawer-drag-left': placement === 'left' }" v-if="draggable" @mousedown="handleTriggerMousedown">
+            <slot name="trigger">
+              <div class="ui-drawer-drag-move-trigger">
+                <div class="ui-drawer-drag-move-trigger-point">
+                  <i></i><i></i><i></i><i></i><i></i>
+                </div>
+              </div>
+            </slot>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+<script>
+  import { oneOf} from './assist';
+  import TransferDom from './transfer-dom';
+  import { on, off } from './dom';
+
+  const prefixCls = 'ui-drawer';
+
+  export default {
+    name: 'UiDrawer',
+    directives: { TransferDom },
+    props: {
+      value: {
+        type: Boolean,
+        default: false
+      },
+      title: {
+        type: String
+      },
+      width: {
+        type: [Number, String],
+        default: 256
+      },
+      closable: {
+        type: Boolean,
+        default: true
+      },
+      maskClosable: {
+        type: Boolean,
+        default: true
+      },
+      mask: {
+        type: Boolean,
+        default: true
+      },
+      maskStyle: {
+        type: Object
+      },
+      styles: {
+        type: Object
+      },
+      scrollable: {
+        type: Boolean,
+        default: false
+      },
+      placement: {
+        validator (value) {
+          return oneOf(value, ['left', 'right']);
+        },
+        default: 'right'
+      },
+      zIndex: {
+        type: Number,
+        default: 1000
+      },
+      transfer: {
+        type: Boolean,
+        default: true,
+      },
+      className: {
+        type: String
+      },
+      inner: {
+        type: Boolean,
+        default: false
+      },
+      // Whether drag and drop is allowed to adjust width
+      draggable: {
+        type: Boolean,
+        default: false
+      },
+      beforeClose: Function,
+    },
+    data () {
+      return {
+        prefixCls: prefixCls,
+        visible: this.value,
+        wrapShow: false,
+        showHead: true,
+        canMove: false,
+        dragWidth: this.width,
+        wrapperWidth: this.width,
+        wrapperLeft: 0,
+        minWidth: 256
+      };
+    },
+    computed: {
+      wrapClasses () {
+        return [
+          `${prefixCls}-wrap`,
+          {
+            [`${prefixCls}-hidden`]: !this.wrapShow,
+            [`${this.className}`]: !!this.className,
+            [`${prefixCls}-no-mask`]: !this.mask,
+            [`${prefixCls}-wrap-inner`]: this.inner,
+            [`${prefixCls}-wrap-dragging`]: this.canMove
+          }
+        ];
+      },
+      mainStyles () {
+        let style = {};
+        const width = parseInt(this.dragWidth);
+        const styleWidth = {
+          width: width <= 100 ? `${width}%` : `${width}px`
+        };
+        Object.assign(style, styleWidth);
+        return style;
+      },
+      contentClasses () {
+        return [
+          `${prefixCls}-content`,
+          {
+            [`${prefixCls}-content-no-mask`]: !this.mask
+          }
+        ];
+      },
+      classes () {
+        return [
+          `${prefixCls}`,
+          `${prefixCls}-${this.placement}`,
+          {
+            [`${prefixCls}-no-header`]: !this.showHead,
+            [`${prefixCls}-inner`]: this.inner
+          }
+        ];
+      },
+      maskClasses () {
+        return [
+          `${prefixCls}-mask`,
+          {
+            [`${prefixCls}-mask-inner`]: this.inner
+          }
+        ];
+      }
+    },
+    methods: {
+      close () {
+        if (!this.beforeClose) {
+          return this.handleClose();
+        }
+        const before = this.beforeClose();
+        if (before && before.then) {
+          before.then(() => {
+            this.handleClose();
+          });
+        } else {
+          this.handleClose();
+        }
+      },
+      handleClose () {
+        this.visible = false;
+        this.$emit('input', false);
+        this.$emit('on-close');
+      },
+      handleMask () {
+        if (this.maskClosable && this.mask) {
+          this.close();
+        }
+      },
+      handleWrapClick (event) {
+        // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
+        const className = event.target.getAttribute('class');
+        if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.handleMask();
+      },
+      handleMousemove (event) {
+        if (!this.canMove || !this.draggable) return;
+        // 更新容器宽度和距离左侧页面距离，如果是window则距左侧距离为0
+        this.handleSetWrapperWidth();
+        const left = event.pageX - this.wrapperLeft;
+        // 如果抽屉方向为右边，宽度计算需用容器宽度减去left
+        let width = this.placement === 'right' ? this.wrapperWidth - left : left;
+        // 限定最小宽度
+        width = Math.max(width, parseFloat(this.minWidth));
+        event.atMin = width === parseFloat(this.minWidth);
+        // 如果当前width不大于100，视为百分比
+        if (width <= 100) width = (width / this.wrapperWidth) * 100;
+        this.dragWidth = width;
+        this.$emit('on-resize-width', parseInt(this.dragWidth));
+      },
+      handleSetWrapperWidth () {
+        const {
+          width,
+          left
+        } = this.$el.getBoundingClientRect();
+        this.wrapperWidth = width;
+        this.wrapperLeft = left;
+      },
+      handleMouseup () {
+        if (!this.draggable) return;
+        this.canMove = false;
+      },
+      handleTriggerMousedown () {
+        this.canMove = true;
+        // 防止鼠标选中抽屉中文字，造成拖动trigger触发浏览器原生拖动行为
+        window.getSelection().removeAllRanges();
+      },
+    },
+    mounted () {
+      if (this.visible) {
+        this.wrapShow = true;
+      }
+      let showHead = true;
+      if (this.$slots.header === undefined && !this.title) {
+        showHead = false;
+      }
+      this.showHead = showHead;
+      on(document, 'mousemove', this.handleMousemove);
+      on(document, 'mouseup', this.handleMouseup);
+      this.handleSetWrapperWidth();
+    },
+    beforeDestroy () {
+      off(document, 'mousemove', this.handleMousemove);
+      off(document, 'mouseup', this.handleMouseup);
+    },
+    watch: {
+      value (val) {
+        this.visible = val;
+      },
+      visible (val) {
+        if (val === false) {
+          this.timer = setTimeout(() => {
+            this.wrapShow = false;
+          }, 300);
+        } else {
+          if (this.timer) clearTimeout(this.timer);
+          this.wrapShow = true;
+        }
+        this.$emit('on-visible-change', val);
+      },
+      title (val) {
+        if (this.$slots.header === undefined) {
+          this.showHead = !!val;
+        }
+      },
+      width (val) {
+        this.dragWidth = val;
+      }
+    }
+  };
+</script>
+
+<style lang="less">
+  @drawer-prefix-cls: ~"ui-drawer";
+
+  .content-header() {
+    border-bottom: 1px solid #e8eaec;
+    padding: 14px 16px;
+    line-height: 1;
+
+    p,
+    &-inner
+    {
+      display: inline-block;
+      width: 100%;
+      height: 20px;
+      line-height: 20px;
+      font-size: 16px;
+      color: #17233d;
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    p i, p span{
+      //vertical-align: middle;
+    }
+  }
+
+  .content-close(@top: 0, @icon-font-size: 22px) {
+    font-size: 12px;
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    overflow: hidden;
+    cursor: pointer;
+
+    .el-icon-close {
+      font-size: @icon-font-size;
+      color: #999;
+      transition: color .2s ease;
+      position: relative;
+      top: @top;
+      &:hover {
+        color: #444;
+      }
+    }
+  }
+
+  .mask() {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(55, 55, 55, 0.6);
+    height: 100%;
+    z-index: 1000;
+
+    &-hidden {
+      display: none;
+    }
+  }
+
+  .@{drawer-prefix-cls} {
+    width: auto;
+    height: 100%;
+    position: fixed;
+    top: 0;
+
+    &-inner{
+      position: absolute;
+    }
+
+    &-left{
+      left: 0;
+    }
+    &-right{
+      right: 0;
+    }
+
+    &-hidden {
+      display: none !important;
+    }
+
+    &-wrap {
+      position: fixed;
+      overflow: auto;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1000;
+      -webkit-overflow-scrolling: touch;
+      outline: 0;
+
+      &-inner{
+        position: absolute;
+        overflow: hidden;
+      }
+
+      &-dragging{
+        user-select: none;
+      }
+    }
+
+    &-wrap * {
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+
+    &-mask {
+      .mask;
+      &-inner{
+        position: absolute;
+      }
+    }
+
+    &-content {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      background-color: #fff;
+      border: 0;
+      background-clip: padding-box;
+      box-shadow: 0 4px 12px rgba(0,0,0,.15);
+
+      &-no-mask{
+        pointer-events: auto;
+      }
+    }
+
+    &-header {
+      .content-header;
+    }
+
+    &-close {
+      z-index: 1;
+      .content-close(1px, 20px);
+    }
+
+    &-body {
+      width: 100%;
+      height: calc(~'100% - 51px');
+      padding: 16px;
+      font-size: 14px;
+      line-height: 1.5;
+      word-wrap: break-word;
+      position: absolute;
+      overflow: auto;
+      box-sizing: border-box;
+    }
+
+    &-no-header &-body{
+      height: 100%;
+    }
+
+    &-no-mask{
+      pointer-events: none;
+
+      .@{drawer-prefix-cls}-drag{
+        pointer-events: auto;
+      }
+    }
+
+    &-drag{
+      top: 0;
+      height: 100%;
+      width: 0;
+      position: absolute;
+      &-left{
+        right: 0;
+      }
+      &-move-trigger{
+        width: 8px;
+        height: 100px;
+        line-height: 100px;
+        position: absolute;
+        top: 50%;
+        background: rgb(243, 243, 243);
+        transform: translate(-50%, -50%);
+        border-radius: ~"4px / 6px";
+        box-shadow: 0 0 1px 1px rgba(0, 0, 0, .2);
+        cursor: col-resize;
+        &-point{
+          display: inline-block;
+          width: 50%;
+          transform: translateX(50%);
+          i{
+            display: block;
+            border-bottom: 1px solid rgb(192, 192, 192);
+            padding-bottom: 2px;
+          }
+        }
+      }
+    }
+  }
+
+  .motion-common(@time) {
+    animation-duration: @time;
+    animation-fill-mode: both;
+  }
+
+  .make-motion(@className, @keyframeName, @time: .3s) {
+    .@{className}-enter-active, .@{className}-appear {
+      .motion-common(@time);
+      animation-play-state: paused;
+    }
+    .@{className}-leave-active {
+      .motion-common(@time);
+      animation-play-state: paused;
+    }
+    .@{className}-enter-active, .@{className}-appear {
+      animation-name: ~"@{keyframeName}In";
+      animation-play-state: running;
+    }
+    .@{className}-leave-active {
+      animation-name: ~"@{keyframeName}Out";
+      animation-play-state: running;
+    }
+  }
+
+  .fade-motion(@className, @keyframeName) {
+    .make-motion(@className, @keyframeName, .15s);
+    .@{className}-enter-active, .@{className}-appear {
+      opacity: 0;
+      animation-timing-function: linear;
+    }
+    .@{className}-leave-active {
+      animation-timing-function: linear;
+    }
+  }
+
+  .fade-motion(fade, uiFadeIn);
+
+  @keyframes uiFadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes ivuFadeOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+</style>

package/src/components/exports/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="export-wrapper" @click="handleExport">
+    <slot>导出</slot>
+  </div>
+</template>
+
+<script>
+  import exports from './exports';
+
+  const Export = {
+    name: 'ui-export',
+    props: {},
+    methods: {
+      handleExport() {
+        const data = [
+          {id: 1, name: 'i那是大', age: 10, sex: 1},
+          {id: 2, name: 'asdasd 123安师大', age: 12, sex: 0},
+          {id: 3, name: '安达充再擦', age: 11, sex: 1},
+          {id: 4, name: '1发撒说', age: 14, sex: 2},
+        ];
+        const columns = [
+          {key: 'id', title: 'ID'},
+          {key: 'name', title: '名称'},
+          {key: 'age', title: '年龄'},
+          {
+            title: '性别',
+            transform: ({sex}) => {
+              if (sex === 1) {
+                return '男';
+              }
+              if (sex === 2) {
+                return '女';
+              }
+              return '保密';
+            },
+          },
+        ];
+        const filename = 'file.xlsx';
+        exports(data, filename, columns);
+      },
+    },
+  };
+
+  export default {
+    install: (Vue) => {
+      Vue.component(Export.name, Export);
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>