完成split-pane组件，添加icons自定义图标组件

2018-06-07 15:39:55 +08:00 · 2018-06-07 15:39:55 +08:00 · dd7a7c16e6
parent 5f3a524f41
commit dd7a7c16e6
12 changed files with 183 additions and 9 deletions
--- a/src/assets/icons/iconfont.css
+++ b/src/assets/icons/iconfont.css
@ -0,0 +1,19 @@
+
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1528353056011'); /* IE9*/
+  src: url('iconfont.eot?t=1528353056011#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAUIAAsAAAAAB2gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kmtY21hcAAAAYAAAABeAAABhqBEBr5nbHlmAAAB4AAAATIAAAFIr85ML2hlYWQAAAMUAAAALwAAADYRnSg7aGhlYQAAA0QAAAAcAAAAJAfeA4RobXR4AAADYAAAAAwAAAAMC+kAAGxvY2EAAANsAAAACAAAAAgAdgCkbWF4cAAAA3QAAAAfAAAAIAESAF1uYW1lAAADlAAAAUUAAAJtPlT+fXBvc3QAAATcAAAALAAAAD22sftdeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sE4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDw/zNzwv4EhhrmBoQEozAiSAwAx6Q0weJzFkMENgDAMAy9t6QMxCA8G4sUc3a/DdIxiQnkwQS05VhxLiQIsQBQPMYFdGA9OueZ+ZHU/eSZLjUBptXf1nyqiWXYNKplpsHmr/9i87qPTVyiDOrHVl4QbSUEOnwAAeJxNT71OwlAY/b57uW35a+X2v1CgVLgalMRSYTACgw4aBxInRx9AVxaHu5g4ODg7GhNfgifpQoy+htWyeXLOcHKSc3KAAfx+0jX1wIQ9OIIzWAKgMsSeTkKMRDoiQ7QjZruWTkUsIjXujegpuj3FcpJJOnAVVTFQxzaOo2QiRkTgcTojJ5g4IaLfDK55v8XpC1Y80X7ML8kb2p24ZcwO84uDuZV0TW1V49zn/FlTGNMIKRk63rlOmZUrSv7OjMBed/ZJB2u+CK5u6t0mv31K78O+W0aUEs1mV/+YN4JGwYfAMbmv7tQ1L6jHuxauvqueWQsHX1CAFF9lCaiEKtjbl6A64E5gOgA6VsW4EU/dmECWbxjDKMswYizfvC6kXGxFZeGyf+nPeTEvpSyq/wAnJTzPAAB4nGNgZGBgAOKyeKuP8fw2Xxm4WRhA4LrdJ3kE/b+BhYG5AcjlYGACiQIAJCQKDQB4nGNgZGBgbvjfwBDDwgACQJKRARUwAwBHCQJsBAAAAAPpAAAEAAAAAAAAAAB2AKR4nGNgZGBgYGYIZGBlAAEmIOYCQgaG/2A+AwAQ9wFwAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgJmRiZGZkYWBsYK/KLU4sypVtyy1qCQzOTGHgQEAS4YGvQ==') format('woff'),
+  url('iconfont.ttf?t=1528353056011') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1528353056011#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family:"iconfont" !important;
+  font-size:16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-resize-vertical:before { content: "\e7c3"; }
+
--- a/src/assets/icons/iconfont.eot
+++ b/src/assets/icons/iconfont.eot
--- a/src/assets/icons/iconfont.svg
+++ b/src/assets/icons/iconfont.svg
@ -0,0 +1,36 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
+d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
+t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
+t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
+    
+
+    
+    <glyph glyph-name="resize-vertical" unicode="&#59331;" d="M512 896C229.248 896 0 666.752 0 384s229.248-512 512-512 512 229.248 512 512S794.752 896 512 896zM576 192l64 0-128-128-128 128 64 0L448 576l-64 0 128 128 128-128-64 0L576 192z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>
--- a/src/assets/icons/iconfont.ttf
+++ b/src/assets/icons/iconfont.ttf
--- a/src/assets/icons/iconfont.woff
+++ b/src/assets/icons/iconfont.woff
--- a/src/components/icons/icons.vue
+++ b/src/components/icons/icons.vue
@ -0,0 +1,35 @@
+<template>
+  <i :class="`iconfont icon-${type}`" :style="styles"></i>
+</template>
+
+<script>
+export default {
+  name: 'Icons',
+  props: {
+    type: {
+      type: String,
+      required: true
+    },
+    color: {
+      type: String,
+      default: '#333333'
+    },
+    size: {
+      type: Number,
+      default: 16
+    }
+  },
+  computed: {
+    styles () {
+      return {
+        fontSize: `${this.size}px`,
+        color: this.color
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
--- a/src/components/icons/index.js
+++ b/src/components/icons/index.js
@ -0,0 +1,2 @@
+import Icons from './icons.vue'
+export default Icons
--- a/src/components/split-pane/index.less
+++ b/src/components/split-pane/index.less
@ -1,4 +1,13 @@
@split-prefix-cls: ~"ivu-split";
+@box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.4);
+@trigger-bar-background: rgba(23, 35, 61, 0.25);
+@trigger-background: #F8F8F9;
+@trigger-width: 6px;
+@trigger-bar-width: 4px;
+@trigger-bar-offset: (@trigger-width - @trigger-bar-width) / 2;
+@trigger-bar-interval: 3px;
+@trigger-bar-weight: 1px;
+@trigger-bar-con-height: (@trigger-bar-weight + @trigger-bar-interval) * 8;

 .@{split-prefix-cls}{
  &-wrapper{
@ -35,19 +44,49 @@
      transform: translate(-50%, -50%);
      z-index: 10;
    }
+    &-bar-con{
+      position: absolute;
+      overflow: hidden;
+      &.vertical{
+        left: @trigger-bar-offset;
+        top: 50%;
+        height: @trigger-bar-con-height;
+        transform: translate(0, -50%);
+      }
+      &.horizontal{
+        left: 50%;
+        top: @trigger-bar-offset;
+        width: @trigger-bar-con-height;
+        transform: translate(-50%, 0);
+      }
+    }
    &-vertical{
-      width: 6px;
+      width: @trigger-width;
      height: 100%;
-      background: #F8F8F9;
-      box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.32);
+      background: @trigger-background;
+      box-shadow: @box-shadow;
      cursor: col-resize;
+      .@{split-prefix-cls}-trigger-bar{
+        width: @trigger-bar-width;
+        height: 1px;
+        background: @trigger-bar-background;
+        float: left;
+        margin-top: @trigger-bar-interval;
+      }
    }
    &-horizontal{
-      height: 6px;
+      height: @trigger-width;
      width: 100%;
-      background: #F8F8F9;
-      box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.32);
+      background: @trigger-background;
+      box-shadow: @box-shadow;
      cursor: row-resize;
+      .@{split-prefix-cls}-trigger-bar{
+        height: @trigger-bar-width;
+        width: 1px;
+        background: @trigger-bar-background;
+        float: left;
+        margin-right: @trigger-bar-interval;
+      }
    }
  }
  &-horizontal{
--- a/src/components/split-pane/split.vue
+++ b/src/components/split-pane/split.vue
@ -49,6 +49,12 @@ export default {
      default: '40px'
    }
  },
+  /**
+   * Events
+   * @on-move-start
+   * @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
+   * @on-move-end
+   */
  data () {
    return {
      prefix: 'ivu-split',
--- a/src/components/split-pane/trigger.vue
+++ b/src/components/split-pane/trigger.vue
@ -1,5 +1,9 @@
 <template>
-  <div :class="classes"></div>
+  <div :class="classes">
+    <div :class="barConClasses">
+      <i :class="`${prefix}-bar`" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
+    </div>
+  </div>
 </template>

 <script>
@ -15,10 +19,19 @@ export default {
    }
  },
  computed: {
+    isVertical () {
+      return this.mode === 'vertical'
+    },
    classes () {
      return [
        this.prefix,
-        this.mode === 'vertical' ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
+        this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
+      ]
+    },
+    barConClasses () {
+      return [
+        `${this.prefix}-bar-con`,
+        this.isVertical ? 'vertical' : 'horizontal'
      ]
    }
  }
--- a/src/main.js
+++ b/src/main.js
@ -8,6 +8,7 @@ import iView from 'iview'
 import '@/locale'
 import config from '@/config'
 import 'iview/dist/styles/iview.css'
+import '@/assets/icons/iconfont.css'
 import env from '../config/env'
 if (env === 'development') require('@/mock')

--- a/src/view/components/split-pane/split-pane.vue
+++ b/src/view/components/split-pane/split-pane.vue
@ -5,6 +5,9 @@
        <split-pane v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
          <div slot="top" class="pane top-pane"></div>
          <div slot="bottom" class="pane bottom-pane"></div>
+          <div slot="trigger" class="custom-trigger">
+            <icons class="trigger-icon" :size="22" type="resize-vertical" color="#fff"/>
+          </div>
        </split-pane>
      </div>
      <div slot="right" class="pane right-pane"></div>
@ -14,10 +17,12 @@

 <script>
 import SplitPane from '_c/split-pane'
+import Icons from '_c/icons'
 export default {
  name: 'split_pane_page',
  components: {
-    SplitPane
+    SplitPane,
+    Icons
  },
  data () {
    return {
@ -34,6 +39,12 @@ export default {
 </script>

 <style lang="less">
+.center-middle{
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
 .split-pane-page-wrapper{
  height: 600px;
  .pane{
@ -52,5 +63,17 @@ export default {
      background: palevioletred;
    }
  }
+  .custom-trigger{
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #000000;
+    position: absolute;
+    .center-middle;
+    box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
+    i.trigger-icon{
+      .center-middle;
+    }
+  }
 }
 </style>