fix chrome scroll _debounceScrollEnded

2024-12-16 01:41:15 +08:00 · 2018-02-04 11:08:04 +08:00 · 2018-02-04 11:08:04 +08:00 · cdd7ce178d
commit cdd7ce178d
parent 747cd9dba1
7 changed files with 454 additions and 267 deletions
--- a/components/_util/css-animation/Event.js
+++ b/components/_util/css-animation/Event.js
@ -0,0 +1,82 @@
+const EVENT_NAME_MAP = {
+  transitionend: {
+    transition: 'transitionend',
+    WebkitTransition: 'webkitTransitionEnd',
+    MozTransition: 'mozTransitionEnd',
+    OTransition: 'oTransitionEnd',
+    msTransition: 'MSTransitionEnd',
+  },
+
+  animationend: {
+    animation: 'animationend',
+    WebkitAnimation: 'webkitAnimationEnd',
+    MozAnimation: 'mozAnimationEnd',
+    OAnimation: 'oAnimationEnd',
+    msAnimation: 'MSAnimationEnd',
+  },
+}
+
+const endEvents = []
+
+function detectEvents () {
+  const testEl = document.createElement('div')
+  const style = testEl.style
+
+  if (!('AnimationEvent' in window)) {
+    delete EVENT_NAME_MAP.animationend.animation
+  }
+
+  if (!('TransitionEvent' in window)) {
+    delete EVENT_NAME_MAP.transitionend.transition
+  }
+
+  for (const baseEventName in EVENT_NAME_MAP) {
+    if (EVENT_NAME_MAP.hasOwnProperty(baseEventName)) {
+      const baseEvents = EVENT_NAME_MAP[baseEventName]
+      for (const styleName in baseEvents) {
+        if (styleName in style) {
+          endEvents.push(baseEvents[styleName])
+          break
+        }
+      }
+    }
+  }
+}
+
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  detectEvents()
+}
+
+function addEventListener (node, eventName, eventListener) {
+  node.addEventListener(eventName, eventListener, false)
+}
+
+function removeEventListener (node, eventName, eventListener) {
+  node.removeEventListener(eventName, eventListener, false)
+}
+
+const TransitionEvents = {
+  addEndEventListener (node, eventListener) {
+    if (endEvents.length === 0) {
+      window.setTimeout(eventListener, 0)
+      return
+    }
+    endEvents.forEach((endEvent) => {
+      addEventListener(node, endEvent, eventListener)
+    })
+  },
+
+  endEvents,
+
+  removeEndEventListener (node, eventListener) {
+    if (endEvents.length === 0) {
+      return
+    }
+    endEvents.forEach((endEvent) => {
+      removeEventListener(node, endEvent, eventListener)
+    })
+  },
+}
+
+export default TransitionEvents
+
--- a/components/_util/css-animation/index.js
+++ b/components/_util/css-animation/index.js
@ -0,0 +1,179 @@
+import Event from './Event'
+import classes from 'component-classes'
+import { requestAnimationTimeout, cancelAnimationTimeout } from '../requestAnimationTimeout'
+
+const isCssAnimationSupported = Event.endEvents.length !== 0
+const capitalPrefixes = ['Webkit',
+  'Moz',
+  'O',
+  // ms is special .... !
+  'ms']
+const prefixes = ['-webkit-', '-moz-', '-o-', 'ms-', '']
+
+function getStyleProperty (node, name) {
+  // old ff need null, https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
+  const style = window.getComputedStyle(node, null)
+  let ret = ''
+  for (let i = 0; i < prefixes.length; i++) {
+    ret = style.getPropertyValue(prefixes[i] + name)
+    if (ret) {
+      break
+    }
+  }
+  return (ret)
+}
+
+function fixBrowserByTimeout (node) {
+  if (isCssAnimationSupported) {
+    const transitionDelay = parseFloat(getStyleProperty(node, 'transition-delay')) || 0
+    const transitionDuration = parseFloat(getStyleProperty(node, 'transition-duration')) || 0
+    const animationDelay = parseFloat(getStyleProperty(node, 'animation-delay')) || 0
+    const animationDuration = parseFloat(getStyleProperty(node, 'animation-duration')) || 0
+    const time = Math.max(transitionDuration + transitionDelay, animationDuration + animationDelay)
+    // sometimes, browser bug
+    node.rcEndAnimTimeout = setTimeout(() => {
+      node.rcEndAnimTimeout = null
+      if (node.rcEndListener) {
+        node.rcEndListener()
+      }
+    }, (time) * 1000 + 200)
+  }
+}
+
+function clearBrowserBugTimeout (node) {
+  if (node.rcEndAnimTimeout) {
+    clearTimeout(node.rcEndAnimTimeout)
+    node.rcEndAnimTimeout = null
+  }
+}
+
+const cssAnimation = (node, transitionName, endCallback) => {
+  const nameIsObj = typeof transitionName === 'object'
+  const className = nameIsObj ? transitionName.name : transitionName
+  const activeClassName = nameIsObj ? transitionName.active : `${transitionName}-active`
+  let end = endCallback
+  let start
+  let active
+  const nodeClasses = classes(node)
+
+  if (endCallback && Object.prototype.toString.call(endCallback) === '[object Object]') {
+    end = endCallback.end
+    start = endCallback.start
+    active = endCallback.active
+  }
+
+  if (node.rcEndListener) {
+    node.rcEndListener()
+  }
+
+  node.rcEndListener = (e) => {
+    if (e && e.target !== node) {
+      return
+    }
+
+    if (node.rcAnimTimeout) {
+      cancelAnimationTimeout(node.rcAnimTimeout)
+      node.rcAnimTimeout = null
+    }
+
+    clearBrowserBugTimeout(node)
+
+    nodeClasses.remove(className)
+    nodeClasses.remove(activeClassName)
+
+    Event.removeEndEventListener(node, node.rcEndListener)
+    node.rcEndListener = null
+
+    // Usually this optional end is used for informing an owner of
+    // a leave animation and telling it to remove the child.
+    if (end) {
+      end()
+    }
+  }
+
+  Event.addEndEventListener(node, node.rcEndListener)
+
+  if (start) {
+    start()
+  }
+  nodeClasses.add(className)
+
+  node.rcAnimTimeout = requestAnimationTimeout(() => {
+    node.rcAnimTimeout = null
+    nodeClasses.add(activeClassName)
+    if (active) {
+      requestAnimationTimeout(active, 0)
+    }
+    fixBrowserByTimeout(node)
+    // 30ms for firefox
+  }, 30)
+
+  return {
+    stop () {
+      if (node.rcEndListener) {
+        node.rcEndListener()
+      }
+    },
+  }
+}
+
+cssAnimation.style = (node, style, callback) => {
+  if (node.rcEndListener) {
+    node.rcEndListener()
+  }
+
+  node.rcEndListener = (e) => {
+    if (e && e.target !== node) {
+      return
+    }
+
+    if (node.rcAnimTimeout) {
+      cancelAnimationTimeout(node.rcAnimTimeout)
+      node.rcAnimTimeout = null
+    }
+
+    clearBrowserBugTimeout(node)
+
+    Event.removeEndEventListener(node, node.rcEndListener)
+    node.rcEndListener = null
+
+    // Usually this optional callback is used for informing an owner of
+    // a leave animation and telling it to remove the child.
+    if (callback) {
+      callback()
+    }
+  }
+
+  Event.addEndEventListener(node, node.rcEndListener)
+
+  node.rcAnimTimeout = requestAnimationTimeout(() => {
+    for (const s in style) {
+      if (style.hasOwnProperty(s)) {
+        node.style[s] = style[s]
+      }
+    }
+    node.rcAnimTimeout = null
+    fixBrowserByTimeout(node)
+  }, 0)
+}
+
+cssAnimation.setTransition = (node, p, value) => {
+  let property = p
+  let v = value
+  if (value === undefined) {
+    v = property
+    property = ''
+  }
+  property = property || ''
+  capitalPrefixes.forEach((prefix) => {
+    node.style[`${prefix}Transition${property}`] = v
+  })
+}
+
+cssAnimation.isCssAnimationSupported = isCssAnimationSupported
+
+export {
+  isCssAnimationSupported,
+}
+
+export default cssAnimation
--- a/components/_util/requestAnimationTimeout.js
+++ b/components/_util/requestAnimationTimeout.js
@ -0,0 +1,22 @@
+
+import getRequestAnimationFrame, { cancelRequestAnimationFrame as caf } from './getRequestAnimationFrame'
+const raf = getRequestAnimationFrame()
+
+export const cancelAnimationTimeout = (frame) => caf(frame.id)
+
+export const requestAnimationTimeout = (callback, delay) => {
+  const start = Date.now()
+  function timeout () {
+    if (Date.now() - start >= delay) {
+      callback.call()
+    } else {
+      frame.id = raf(timeout)
+    }
+  }
+
+  const frame = {
+    id: raf(timeout),
+  }
+
+  return frame
+}
--- a/components/trigger/Popup.vue
+++ b/components/trigger/Popup.vue
@ -4,7 +4,7 @@ import Align from '../align'
 import PopupInner from './PopupInner'
 import LazyRenderBox from './LazyRenderBox'
 import { noop } from './utils'
-import animate from 'css-animation'
+import animate from '../_util/css-animation'

 export default {
  props: {
--- a/components/trigger/index.vue
+++ b/components/trigger/index.vue
@ -3,6 +3,7 @@ import Vue from 'vue'
 import PropTypes from '../_util/vue-types'
 import contains from '../_util/Dom/contains'
 import { hasProp, getComponentFromProp } from '../_util/props-util'
+import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout'
 import addEventListener from '../_util/Dom/addEventListener'
 import warning from '../_util/warning'
 import Popup from './Popup'
@ -392,7 +393,7 @@ export default {
      const delay = delayS * 1000
      this.clearDelayTimer()
      if (delay) {
-        this.delayTimer = setTimeout(() => {
+        this.delayTimer = requestAnimationTimeout(() => {
          this.setPopupVisible(visible)
          this.clearDelayTimer()
        }, delay)
@ -403,7 +404,7 @@ export default {

    clearDelayTimer () {
      if (this.delayTimer) {
-        clearTimeout(this.delayTimer)
+        cancelAnimationTimeout(this.delayTimer)
        this.delayTimer = null
      }
    },
--- a/package-lock.json
+++ b/package-lock.json
@ -2075,6 +2075,16 @@
            "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
            "dev": true
        },
+        "clipboard": {
+            "version": "1.7.1",
+            "resolved": "http://registry.npm.taobao.org/clipboard/download/clipboard-1.7.1.tgz",
+            "integrity": "sha1-Ng1taUbpmnof7zleQrqStem1oWs=",
+            "requires": {
+                "good-listener": "1.2.2",
+                "select": "1.1.2",
+                "tiny-emitter": "2.0.2"
+            }
+        },
        "cliui": {
            "version": "2.1.0",
            "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
@ -2237,7 +2247,7 @@
        },
        "component-classes": {
            "version": "1.2.6",
-            "resolved": "http://r.cnpmjs.org/component-classes/download/component-classes-1.2.6.tgz",
+            "resolved": "http://registry.npm.taobao.org/component-classes/download/component-classes-1.2.6.tgz",
            "integrity": "sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=",
            "requires": {
                "component-indexof": "0.0.3"
@ -2251,7 +2261,7 @@
        },
        "component-indexof": {
            "version": "0.0.3",
-            "resolved": "http://r.cnpmjs.org/component-indexof/download/component-indexof-0.0.3.tgz",
+            "resolved": "http://registry.npm.taobao.org/component-indexof/download/component-indexof-0.0.3.tgz",
            "integrity": "sha1-EdCRMSI5648yyPJa6csAL/6NPCQ="
        },
        "component-inherit": {
@ -2879,6 +2889,11 @@
            "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
            "dev": true
        },
+        "delegate": {
+            "version": "3.2.0",
+            "resolved": "http://registry.npm.taobao.org/delegate/download/delegate-3.2.0.tgz",
+            "integrity": "sha1-tmtxwxWFIuirV0T3INjKDCr1kWY="
+        },
        "depd": {
            "version": "1.1.2",
            "resolved": "https://registry.npm.taobao.org/depd/download/depd-1.1.2.tgz",
@ -5084,15 +5099,6 @@
                        }
                    }
                },
-                "string_decoder": {
-                    "version": "1.0.1",
-                    "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz",
-                    "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=",
-                    "dev": true,
-                    "requires": {
-                        "safe-buffer": "5.0.1"
-                    }
-                },
                "string-width": {
                    "version": "1.0.2",
                    "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@ -5104,6 +5110,15 @@
                        "strip-ansi": "3.0.1"
                    }
                },
+                "string_decoder": {
+                    "version": "1.0.1",
+                    "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz",
+                    "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=",
+                    "dev": true,
+                    "requires": {
+                        "safe-buffer": "5.0.1"
+                    }
+                },
                "stringstream": {
                    "version": "0.0.5",
                    "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
@ -5365,6 +5380,14 @@
                }
            }
        },
+        "good-listener": {
+            "version": "1.2.2",
+            "resolved": "http://registry.npm.taobao.org/good-listener/download/good-listener-1.2.2.tgz",
+            "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+            "requires": {
+                "delegate": "3.2.0"
+            }
+        },
        "graceful-fs": {
            "version": "4.1.11",
            "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.1.11.tgz",
@ -7653,15 +7676,6 @@
                "uc.micro": "1.0.3"
            }
        },
-        "markdown-it-anchor": {
-            "version": "4.0.0",
-            "resolved": "http://registry.npm.taobao.org/markdown-it-anchor/download/markdown-it-anchor-4.0.0.tgz",
-            "integrity": "sha1-6H+1VD4BllrfcVBsa/ewSRhBt+M=",
-            "dev": true,
-            "requires": {
-                "string": "3.3.3"
-            }
-        },
        "markdown-table": {
            "version": "1.1.1",
            "resolved": "https://registry.npm.taobao.org/markdown-table/download/markdown-table-1.1.1.tgz",
@ -10706,6 +10720,11 @@
                "ajv": "5.5.2"
            }
        },
+        "select": {
+            "version": "1.1.2",
+            "resolved": "http://registry.npm.taobao.org/select/download/select-1.1.2.tgz",
+            "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+        },
        "select-hose": {
            "version": "2.0.0",
            "resolved": "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
@ -11578,21 +11597,6 @@
            "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
            "dev": true
        },
-        "string": {
-            "version": "3.3.3",
-            "resolved": "http://registry.npm.taobao.org/string/download/string-3.3.3.tgz",
-            "integrity": "sha1-XqIRzZLSKOGEKUmQpsyXs2anfLA=",
-            "dev": true
-        },
-        "string_decoder": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-            "integrity": "sha1-D8Z9fBQYJd6UKC3VNr7GubzoYKs=",
-            "dev": true,
-            "requires": {
-                "safe-buffer": "5.1.1"
-            }
-        },
        "string-width": {
            "version": "2.1.1",
            "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@ -11620,6 +11624,15 @@
                }
            }
        },
+        "string_decoder": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+            "integrity": "sha1-D8Z9fBQYJd6UKC3VNr7GubzoYKs=",
+            "dev": true,
+            "requires": {
+                "safe-buffer": "5.1.1"
+            }
+        },
        "stringify-entities": {
            "version": "1.3.1",
            "resolved": "https://registry.npm.taobao.org/stringify-entities/download/stringify-entities-1.3.1.tgz",
@ -12208,6 +12221,11 @@
                "setimmediate": "1.0.5"
            }
        },
+        "tiny-emitter": {
+            "version": "2.0.2",
+            "resolved": "http://registry.npm.taobao.org/tiny-emitter/download/tiny-emitter-2.0.2.tgz",
+            "integrity": "sha1-gtJ0aKylrejl/R5tIrV91D69+3w="
+        },
        "tmp": {
            "version": "0.0.33",
            "resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz",
@ -12366,131 +12384,6 @@
            "dev": true,
            "optional": true
        },
-        "transliteration": {
-            "version": "1.6.2",
-            "resolved": "http://registry.npm.taobao.org/transliteration/download/transliteration-1.6.2.tgz",
-            "integrity": "sha1-M1yRv3DzshG7gejQOZKyB4wNrJY=",
-            "dev": true,
-            "requires": {
-                "yargs": "8.0.2"
-            },
-            "dependencies": {
-                "camelcase": {
-                    "version": "4.1.0",
-                    "resolved": "http://registry.npm.taobao.org/camelcase/download/camelcase-4.1.0.tgz",
-                    "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
-                    "dev": true
-                },
-                "cliui": {
-                    "version": "3.2.0",
-                    "resolved": "http://registry.npm.taobao.org/cliui/download/cliui-3.2.0.tgz",
-                    "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
-                    "dev": true,
-                    "requires": {
-                        "string-width": "1.0.2",
-                        "strip-ansi": "3.0.1",
-                        "wrap-ansi": "2.1.0"
-                    },
-                    "dependencies": {
-                        "string-width": {
-                            "version": "1.0.2",
-                            "resolved": "http://registry.npm.taobao.org/string-width/download/string-width-1.0.2.tgz",
-                            "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-                            "dev": true,
-                            "requires": {
-                                "code-point-at": "1.1.0",
-                                "is-fullwidth-code-point": "1.0.0",
-                                "strip-ansi": "3.0.1"
-                            }
-                        }
-                    }
-                },
-                "is-fullwidth-code-point": {
-                    "version": "1.0.0",
-                    "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
-                    "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-                    "dev": true,
-                    "requires": {
-                        "number-is-nan": "1.0.1"
-                    }
-                },
-                "load-json-file": {
-                    "version": "2.0.0",
-                    "resolved": "http://registry.npm.taobao.org/load-json-file/download/load-json-file-2.0.0.tgz",
-                    "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
-                    "dev": true,
-                    "requires": {
-                        "graceful-fs": "4.1.11",
-                        "parse-json": "2.2.0",
-                        "pify": "2.3.0",
-                        "strip-bom": "3.0.0"
-                    }
-                },
-                "path-type": {
-                    "version": "2.0.0",
-                    "resolved": "http://registry.npm.taobao.org/path-type/download/path-type-2.0.0.tgz",
-                    "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
-                    "dev": true,
-                    "requires": {
-                        "pify": "2.3.0"
-                    }
-                },
-                "pify": {
-                    "version": "2.3.0",
-                    "resolved": "http://registry.npm.taobao.org/pify/download/pify-2.3.0.tgz",
-                    "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-                    "dev": true
-                },
-                "read-pkg": {
-                    "version": "2.0.0",
-                    "resolved": "http://registry.npm.taobao.org/read-pkg/download/read-pkg-2.0.0.tgz",
-                    "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
-                    "dev": true,
-                    "requires": {
-                        "load-json-file": "2.0.0",
-                        "normalize-package-data": "2.4.0",
-                        "path-type": "2.0.0"
-                    }
-                },
-                "read-pkg-up": {
-                    "version": "2.0.0",
-                    "resolved": "http://registry.npm.taobao.org/read-pkg-up/download/read-pkg-up-2.0.0.tgz",
-                    "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
-                    "dev": true,
-                    "requires": {
-                        "find-up": "2.1.0",
-                        "read-pkg": "2.0.0"
-                    }
-                },
-                "strip-bom": {
-                    "version": "3.0.0",
-                    "resolved": "http://registry.npm.taobao.org/strip-bom/download/strip-bom-3.0.0.tgz",
-                    "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
-                    "dev": true
-                },
-                "yargs": {
-                    "version": "8.0.2",
-                    "resolved": "http://registry.npm.taobao.org/yargs/download/yargs-8.0.2.tgz",
-                    "integrity": "sha1-YpmpBVsc78lp/355wdkY3Osiw2A=",
-                    "dev": true,
-                    "requires": {
-                        "camelcase": "4.1.0",
-                        "cliui": "3.2.0",
-                        "decamelize": "1.2.0",
-                        "get-caller-file": "1.0.2",
-                        "os-locale": "2.1.0",
-                        "read-pkg-up": "2.0.0",
-                        "require-directory": "2.1.1",
-                        "require-main-filename": "1.0.1",
-                        "set-blocking": "2.0.0",
-                        "string-width": "2.1.1",
-                        "which-module": "2.0.0",
-                        "y18n": "3.2.1",
-                        "yargs-parser": "7.0.0"
-                    }
-                }
-            }
-        },
        "trim": {
            "version": "0.0.1",
            "resolved": "http://r.cnpmjs.org/trim/download/trim-0.0.1.tgz",
@ -13103,6 +12996,119 @@
            "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.5.13.tgz",
            "integrity": "sha1-lb0x4g7896fzkjnJqmeHzoz1eOE="
        },
+        "vue-antd-md-loader": {
+            "version": "1.0.2",
+            "resolved": "http://registry.npm.taobao.org/vue-antd-md-loader/download/vue-antd-md-loader-1.0.2.tgz",
+            "integrity": "sha1-mFt8I4sS5awriR/OEcFalTNgHpg=",
+            "dev": true,
+            "requires": {
+                "cheerio": "0.20.0",
+                "highlight.js": "9.12.0",
+                "loader-utils": "0.2.17",
+                "markdown-it": "8.4.0"
+            },
+            "dependencies": {
+                "cheerio": {
+                    "version": "0.20.0",
+                    "resolved": "http://registry.npm.taobao.org/cheerio/download/cheerio-0.20.0.tgz",
+                    "integrity": "sha1-XHEPK6uVZTJyhCugHG6mGzVF7DU=",
+                    "dev": true,
+                    "requires": {
+                        "css-select": "1.2.0",
+                        "dom-serializer": "0.1.0",
+                        "entities": "1.1.1",
+                        "htmlparser2": "3.8.3",
+                        "jsdom": "7.2.2",
+                        "lodash": "4.17.4"
+                    }
+                },
+                "domhandler": {
+                    "version": "2.3.0",
+                    "resolved": "http://registry.npm.taobao.org/domhandler/download/domhandler-2.3.0.tgz",
+                    "integrity": "sha1-LeWaCCLVAn+r/28DLCsloqir5zg=",
+                    "dev": true,
+                    "requires": {
+                        "domelementtype": "1.3.0"
+                    }
+                },
+                "domutils": {
+                    "version": "1.5.1",
+                    "resolved": "http://registry.npm.taobao.org/domutils/download/domutils-1.5.1.tgz",
+                    "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+                    "dev": true,
+                    "requires": {
+                        "dom-serializer": "0.1.0",
+                        "domelementtype": "1.3.0"
+                    }
+                },
+                "htmlparser2": {
+                    "version": "3.8.3",
+                    "resolved": "http://registry.npm.taobao.org/htmlparser2/download/htmlparser2-3.8.3.tgz",
+                    "integrity": "sha1-mWwosZFRaovoZQGn15dX5ccMEGg=",
+                    "dev": true,
+                    "requires": {
+                        "domelementtype": "1.3.0",
+                        "domhandler": "2.3.0",
+                        "domutils": "1.5.1",
+                        "entities": "1.0.0",
+                        "readable-stream": "1.1.14"
+                    },
+                    "dependencies": {
+                        "entities": {
+                            "version": "1.0.0",
+                            "resolved": "http://registry.npm.taobao.org/entities/download/entities-1.0.0.tgz",
+                            "integrity": "sha1-sph6o4ITR/zeZCsk/fyeT7cSvyY=",
+                            "dev": true
+                        }
+                    }
+                },
+                "isarray": {
+                    "version": "0.0.1",
+                    "resolved": "http://registry.npm.taobao.org/isarray/download/isarray-0.0.1.tgz",
+                    "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+                    "dev": true
+                },
+                "loader-utils": {
+                    "version": "0.2.17",
+                    "resolved": "http://registry.npm.taobao.org/loader-utils/download/loader-utils-0.2.17.tgz",
+                    "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+                    "dev": true,
+                    "requires": {
+                        "big.js": "3.2.0",
+                        "emojis-list": "2.1.0",
+                        "json5": "0.5.1",
+                        "object-assign": "4.1.1"
+                    }
+                },
+                "readable-stream": {
+                    "version": "1.1.14",
+                    "resolved": "http://registry.npm.taobao.org/readable-stream/download/readable-stream-1.1.14.tgz",
+                    "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+                    "dev": true,
+                    "requires": {
+                        "core-util-is": "1.0.2",
+                        "inherits": "2.0.3",
+                        "isarray": "0.0.1",
+                        "string_decoder": "0.10.31"
+                    }
+                },
+                "string_decoder": {
+                    "version": "0.10.31",
+                    "resolved": "http://registry.npm.taobao.org/string_decoder/download/string_decoder-0.10.31.tgz",
+                    "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+                    "dev": true
+                }
+            }
+        },
+        "vue-clipboard2": {
+            "version": "0.0.8",
+            "resolved": "http://registry.npm.taobao.org/vue-clipboard2/download/vue-clipboard2-0.0.8.tgz",
+            "integrity": "sha1-ohzpByN5/F+yjh8bRgyCWVswZvQ=",
+            "requires": {
+                "clipboard": "1.7.1",
+                "vue": "2.5.13"
+            }
+        },
        "vue-eslint-parser": {
            "version": "2.0.2",
            "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.2.tgz",
@ -13211,110 +13217,6 @@
                }
            }
        },
-        "vue-markdown-loader": {
-            "version": "2.3.0",
-            "resolved": "http://registry.npm.taobao.org/vue-markdown-loader/download/vue-markdown-loader-2.3.0.tgz",
-            "integrity": "sha1-MWmEvHqEQZ7zCyu510kZxF9GBZE=",
-            "dev": true,
-            "requires": {
-                "cheerio": "0.20.0",
-                "highlight.js": "9.12.0",
-                "loader-utils": "0.2.17",
-                "markdown-it": "8.4.0"
-            },
-            "dependencies": {
-                "cheerio": {
-                    "version": "0.20.0",
-                    "resolved": "http://registry.npm.taobao.org/cheerio/download/cheerio-0.20.0.tgz",
-                    "integrity": "sha1-XHEPK6uVZTJyhCugHG6mGzVF7DU=",
-                    "dev": true,
-                    "requires": {
-                        "css-select": "1.2.0",
-                        "dom-serializer": "0.1.0",
-                        "entities": "1.1.1",
-                        "htmlparser2": "3.8.3",
-                        "jsdom": "7.2.2",
-                        "lodash": "4.17.4"
-                    }
-                },
-                "domhandler": {
-                    "version": "2.3.0",
-                    "resolved": "http://registry.npm.taobao.org/domhandler/download/domhandler-2.3.0.tgz",
-                    "integrity": "sha1-LeWaCCLVAn+r/28DLCsloqir5zg=",
-                    "dev": true,
-                    "requires": {
-                        "domelementtype": "1.3.0"
-                    }
-                },
-                "domutils": {
-                    "version": "1.5.1",
-                    "resolved": "http://registry.npm.taobao.org/domutils/download/domutils-1.5.1.tgz",
-                    "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
-                    "dev": true,
-                    "requires": {
-                        "dom-serializer": "0.1.0",
-                        "domelementtype": "1.3.0"
-                    }
-                },
-                "htmlparser2": {
-                    "version": "3.8.3",
-                    "resolved": "http://registry.npm.taobao.org/htmlparser2/download/htmlparser2-3.8.3.tgz",
-                    "integrity": "sha1-mWwosZFRaovoZQGn15dX5ccMEGg=",
-                    "dev": true,
-                    "requires": {
-                        "domelementtype": "1.3.0",
-                        "domhandler": "2.3.0",
-                        "domutils": "1.5.1",
-                        "entities": "1.0.0",
-                        "readable-stream": "1.1.14"
-                    },
-                    "dependencies": {
-                        "entities": {
-                            "version": "1.0.0",
-                            "resolved": "http://registry.npm.taobao.org/entities/download/entities-1.0.0.tgz",
-                            "integrity": "sha1-sph6o4ITR/zeZCsk/fyeT7cSvyY=",
-                            "dev": true
-                        }
-                    }
-                },
-                "isarray": {
-                    "version": "0.0.1",
-                    "resolved": "http://registry.npm.taobao.org/isarray/download/isarray-0.0.1.tgz",
-                    "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
-                    "dev": true
-                },
-                "loader-utils": {
-                    "version": "0.2.17",
-                    "resolved": "http://registry.npm.taobao.org/loader-utils/download/loader-utils-0.2.17.tgz",
-                    "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
-                    "dev": true,
-                    "requires": {
-                        "big.js": "3.2.0",
-                        "emojis-list": "2.1.0",
-                        "json5": "0.5.1",
-                        "object-assign": "4.1.1"
-                    }
-                },
-                "readable-stream": {
-                    "version": "1.1.14",
-                    "resolved": "http://registry.npm.taobao.org/readable-stream/download/readable-stream-1.1.14.tgz",
-                    "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
-                    "dev": true,
-                    "requires": {
-                        "core-util-is": "1.0.2",
-                        "inherits": "2.0.3",
-                        "isarray": "0.0.1",
-                        "string_decoder": "0.10.31"
-                    }
-                },
-                "string_decoder": {
-                    "version": "0.10.31",
-                    "resolved": "http://registry.npm.taobao.org/string_decoder/download/string_decoder-0.10.31.tgz",
-                    "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
-                    "dev": true
-                }
-            }
-        },
        "vue-router": {
            "version": "3.0.1",
            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
--- a/package.json
+++ b/package.json
@ -85,6 +85,7 @@
  },
  "dependencies": {
    "add-dom-event-listener": "^1.0.2",
+    "component-classes": "^1.2.6",
    "css-animation": "^1.4.1",
    "dom-align": "^1.6.7",
    "dom-scroll-into-view": "^1.2.1",