Example Homepage

* [update] using cube-indexlist update homepage

* [fix] add getMatchedTarget to fix problem getting target error

example/App.vue

@@ -4,13 +4,18 @@
       <h1>cube-ui</h1>
     </header>
     <section class="cube-content" ref="mfct">
-      <ul class="cube-list">
-        <li class="cube-item border-bottom-1px" v-for="(component, index) in components" :key="index">
-          <router-link class="link" :to="component.path">{{component.text}}<i
-              class="cubeic-arrow"></i>
-          </router-link>
-        </li>
-      </ul>
+      <cube-index-list :data="components" class="cube-list">
+        <cube-index-list-group v-for="(group, index) in components" :key="index" :group="group">
+          <cube-index-list-item v-for="(component, index) in group.items" :key="index" :item="component">
+            <div class="cube-item border-bottom-1px" >
+              <router-link class="link" :to="component.path">{{component.text}}<i
+                class="cubeic-arrow"></i>
+              </router-link>
+            </div>
+          </cube-index-list-item>
+        </cube-index-list-group>
+        <span class="custom-nav-item" slot="nav-item" slot-scope="props">{{props.item}}</span>
+      </cube-index-list>
     </section>
     <cube-view></cube-view>
   </div>
@@ -24,117 +29,141 @@
       return {
         components: [
           {
-            path: '/button',
-            text: 'Button'
-          },
-          {
-            path: '/checkbox',
-            text: 'Checkbox'
-          },
-          {
-            path: '/checkbox-group',
-            text: 'CheckboxGroup'
-          },
-          {
-            path: '/radio',
-            text: 'Radio'
-          },
-          {
-            path: '/input',
-            text: 'Input'
-          },
-          {
-            path: '/textarea',
-            text: 'Textarea'
-          },
-          {
-            path: '/select',
-            text: 'Select'
-          },
-          {
-            path: '/switch',
-            text: 'Switch'
-          },
-          {
-            path: '/rate',
-            text: 'Rate'
-          },
-          {
-            path: '/validator',
-            text: 'Validator'
-          },
-          {
-            path: '/form',
-            text: 'Form'
-          },
-          {
-            path: '/loading',
-            text: 'Loading'
-          },
-          {
-            path: '/tip',
-            text: 'Tip'
-          },
-          {
-            path: '/popup',
-            text: 'Popup'
-          },
-          {
-            path: '/toast',
-            text: 'Toast'
-          },
+            'name': 'Basic 基础组件',
+            'shortcut': 'Basic',
+            'items': [
+              {
+                path: '/button',
+                text: 'Button'
+              },
+              {
+                path: '/loading',
+                text: 'Loading'
+              },
+              {
+                path: '/tip',
+                text: 'Tip'
+              }
+            ]
+          },
+          {
+            'name': 'Form 表单组件',
+            'shortcut': 'Form',
+            'items': [
+              {
+                path: '/checkbox',
+                text: 'Checkbox'
+              },
+              {
+                path: '/checkbox-group',
+                text: 'CheckboxGroup'
+              },
+              {
+                path: '/radio',
+                text: 'Radio'
+              },
+              {
+                path: '/input',
+                text: 'Input'
+              },
+              {
+                path: '/textarea',
+                text: 'Textarea'
+              },
+              {
+                path: '/select',
+                text: 'Select'
+              },
+              {
+                path: '/switch',
+                text: 'Switch'
+              },
+              {
+                path: '/rate',
+                text: 'Rate'
+              },
+              {
+                path: '/validator',
+                text: 'Validator'
+              },
+              {
+                path: '/upload',
+                text: 'Upload'
+              },
+              {
+                path: '/form',
+                text: 'Form'
+              }
+            ]
+          },
+          {
+            'name': 'Popup 弹窗组件',
+            'shortcut': 'Popup',
+            'items': [
+              {
+                path: '/popup',
+                text: 'Popup'
+              },
+              {
+                path: '/toast',
+                text: 'Toast'
+              },
 
-          {
-            path: '/picker',
-            text: 'Picker'
-          },
-          {
-            path: '/cascade-picker',
-            text: 'CascadePicker'
-          },
-          {
-            path: '/segment-picker',
-            text: 'SegmentPicker'
-          },
-          {
-            path: '/date-picker',
-            text: 'DatePicker'
-          },
-          {
-            path: '/time-picker',
-            text: 'TimePicker'
-          },
-          {
-            path: '/dialog',
-            text: 'Dialog'
-          },
-          {
-            path: '/action-sheet',
-            text: 'ActionSheet'
-          },
-          {
-            path: '/scroll',
-            text: 'Scroll'
-          },
-          {
-            path: '/slide',
-            text: 'Slide'
-          },
-          {
-            path: '/index-list',
-            text: 'IndexList'
-          },
-          {
-            path: '/upload',
-            text: 'Upload'
-          },
-          {
-            path: '/swipe',
-            text: 'Swipe'
-          },
-          {
-            path: '/drawer',
-            text: 'Drawer'
+              {
+                path: '/picker',
+                text: 'Picker'
+              },
+              {
+                path: '/cascade-picker',
+                text: 'CascadePicker'
+              },
+              {
+                path: '/segment-picker',
+                text: 'SegmentPicker'
+              },
+              {
+                path: '/date-picker',
+                text: 'DatePicker'
+              },
+              {
+                path: '/time-picker',
+                text: 'TimePicker'
+              },
+              {
+                path: '/dialog',
+                text: 'Dialog'
+              },
+              {
+                path: '/action-sheet',
+                text: 'ActionSheet'
+              },
+              {
+                path: '/drawer',
+                text: 'Drawer'
+              }
+            ]
+          },
+          {
+            'name': 'Scroll 滚动组件',
+            'shortcut': 'Scroll',
+            'items': [
+              {
+                path: '/scroll',
+                text: 'Scroll'
+              },
+              {
+                path: '/slide',
+                text: 'Slide'
+              },
+              {
+                path: '/index-list',
+                text: 'IndexList'
+              },
+              {
+                path: '/swipe',
+                text: 'Swipe'
+              }
+            ]
           }
         ]
       }
@@ -179,19 +208,35 @@
     -webkit-overflow-scrolling: touch
     .cube-list
       padding-left: 10px
-      .cube-item
-        height: 40px
-        line-height: 40px
-        .link
-          display: block
-          position: relative
-          width: 100%
-          color: #333
-          text-decoration: none
-          outline: 0
-          .cubeic-arrow
-            position: absolute
-            right: 0
-            padding: 0 5px
-            color: #ccc
+      .cube-index-list-group
+        .cube-index-list-anchor
+          font-size: 16px
+        ul
+          .cube-item
+            height: 40px
+            line-height: 40px
+            padding-left: 16px
+            .link
+              display: block
+              position: relative
+              width: 100%
+              color: #333
+              text-decoration: none
+              outline: 0
+              .cubeic-arrow
+                position: absolute
+                right: 0
+                padding: 0 5px
+                color: #ccc
+      .cube-index-list-nav
+          margin-right: 0px
+          padding: 8px 5px
+          border-radius: 3px 0 0 3px
+          background: #f7f7f7
+          box-shadow: 0 0 5px #80808047
+          >ul
+            >li
+              padding: 8px 0
+      .cube-index-list-fixed
+        font-size: 16px
 </style>

src/common/helpers/dom.js

@@ -78,3 +78,14 @@ export function prefixStyle(style) {
 
   return vendor + style.charAt(0).toUpperCase() + style.substr(1)
 }
+
+export function getMatchedTarget(e, targetClassName) {
+  let el = e.target
+
+  while (el && !hasClass(el, targetClassName)) {
+    if (el === e.currentTarget) return null
+    el = el.parentNode
+  }
+
+  return el
+}

src/components/index-list/index-list.vue

@@ -41,7 +41,8 @@
   import {
     getData,
     getRect,
-    prefixStyle
+    prefixStyle,
+    getMatchedTarget
   } from '../../common/helpers/dom'
   import { inBrowser } from '../../common/helpers/env'
 
@@ -129,7 +130,9 @@
         this.$emit(EVENT_TITLE_CLICK, this.title)
       },
       onShortcutTouchStart(e) {
-        let anchorIndex = getData(e.target, 'index')
+        const target = getMatchedTarget(e, 'cube-index-list-nav-item')
+        if (!target) return
+        let anchorIndex = getData(target, 'index')
         let firstTouch = e.touches[0]
         this.touch.y1 = firstTouch.pageY
         this.touch.anchorIndex = anchorIndex