Merge pull request #3369 from lison16/anchor

add anchor component

examples/app.vue

@@ -18,6 +18,7 @@ nav {
             <ul>
                 <li><router-link to="/layout">Layout</router-link></li>
                 <li><router-link to="/affix">Affix</router-link></li>
+                <li><router-link to="/anchor">Anchor</router-link></li>
                 <li><router-link to="/grid">Grid</router-link></li>
                 <li><router-link to="/button">Button</router-link></li>
                 <li><router-link to="/input">Input</router-link></li>

examples/main.js

@@ -27,6 +27,10 @@ const router = new VueRouter({
             path: '/affix',
             component: (resolve) => require(['./routers/affix.vue'], resolve)
         },
+        {
+            path: '/anchor',
+            component: (resolve) => require(['./routers/anchor.vue'], resolve)
+        },
         {
             path: '/grid',
             component: (resolve) => require(['./routers/grid.vue'], resolve)

examples/routers/anchor.vue

@@ -0,0 +1,109 @@
+<template>
+	<div class="anchor-wrapper">
+		<div class="link-wrapper">
+            <Button @click="changeCon">修改为Window</Button>
+            <Button @click="andLink">添加一个连接</Button>
+			<Anchor @on-change="handleChange" @on-select="handleSelect" :style="{right: '100px'}" :affix="true" :offset-top="30" :container="scrollCon" show-ink-in-fixed>
+				<AnchorLink v-if="(link - 1) % 30 === 0" v-for="link in 300" :key="`link${link}`" :href="`#title-${link}`" :title="`title-${link}`">
+                    <AnchorLink v-if="link === 61" href="#title-child-69" title="title-child-69"/>
+                </AnchorLink>
+                <AnchorLink v-if="showNewLink" href="#new-link" title="这是动态添加的连接"/>
+			</Anchor>
+		</div>
+		<div v-if="con === 'div'" ref="listWrapper" id="listWrapper" class="list-wrapper">
+            <div style="height: 100px;"></div>
+            <template v-for="i in 300">
+                <h1 v-if="(i - 1) % 30 === 0" :key="`h1${i}`" :id="`title-${i}`">{{ `title-${i}` }}</h1>
+                <h1 v-if="i === 69" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
+                <h1 v-if="i === 75" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
+                <p v-else :key="`p${i}`">{{ `content-row-index-${i}` }}</p>
+                <Collapse v-if="i === 3" v-model="value1" :key="`collapse-${i}`">
+                    <Panel name="1">
+                        史蒂夫·乔布斯
+                        <p v-for="index in 50" :key="`ppp-${index}`" slot="content">{{ index }}</p>
+                    </Panel>
+                    <Panel name="2">
+                        斯蒂夫·盖瑞·沃兹尼亚克
+                        <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
+                    </Panel>
+                    <Panel name="3">
+                        乔纳森·伊夫
+                        <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
+                    </Panel>
+                </Collapse>
+            </template>
+            <!-- <h1 id="new-link">这是新添加的哦哦哦哦哦 哦 </h1>
+            <p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p> -->
+        </div>
+        <div v-else>
+            <template v-for="i in 300">
+                <h1 v-if="(i - 1) % 30 === 0" :key="`h1${i}`" :id="`title-${i}`">{{ `title-${i}` }}</h1>
+                <h1 v-if="i === 69" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
+                <h1 v-if="i === 75" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
+                <p v-else :key="`p${i}`">{{ `content-row-index-${i}` }}</p>
+                <Collapse v-if="i === 3" v-model="value1" :key="`collapse-${i}`">
+                    <Panel name="1">
+                        史蒂夫·乔布斯
+                        <p v-for="index in 50" :key="`ppp-${index}`" slot="content">{{ index }}</p>
+                    </Panel>
+                    <Panel name="2">
+                        斯蒂夫·盖瑞·沃兹尼亚克
+                        <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
+                    </Panel>
+                    <Panel name="3">
+                        乔纳森·伊夫
+                        <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
+                    </Panel>
+                </Collapse>
+            </template>
+            <h1 id="new-link">这是新添加的哦哦哦哦哦 哦 </h1>
+            <p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p>
+        </div>
+
+	</div>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            container: null,
+            value1: '1',
+            scrollCon: '',
+            con: 'div',
+            showNewLink: false
+        }
+    },
+    methods: {
+        changeCon () {
+            this.con = 'window';
+            this.scrollCon = undefined;
+        },
+        handleChange (newHref, oldHref) {
+            console.log(`${oldHref} => ${newHref}`)
+        },
+        handleSelect (href) {
+            console.log(`select ${href}`)
+        },
+        andLink () {
+            this.showNewLink = true;
+        }
+    },
+    mounted () {
+        this.scrollCon = this.$refs.listWrapper
+    }
+}
+</script>
+<style lang="less">
+.anchor-wrapper{
+	.link-wrapper{
+		position: absolute;
+        top: 200px;
+		right: 100px;
+		width: 200px;
+	}
+    .list-wrapper{
+        height: 600px;
+        overflow: auto;
+    }
+}
+</style>

src/components/anchor-link/index.js

@@ -0,0 +1,2 @@
+import AnchorLink from '../anchor/anchor-link.vue';
+export default AnchorLink;

src/components/anchor/anchor-link.vue

@@ -0,0 +1,50 @@
+<template>
+	<div :class="anchorLinkClasses">
+        <a :class="linkTitleClasses" href="javascript:void(0)" :data-href="href" @click="goAnchor" :title="title">{{ title }}</a>
+        <slot></slot>
+    </div>
+</template>
+<script>
+import { findComponentUpward } from '../../utils/assist';
+export default {
+    name: 'AnchorLink',
+    props: {
+        href: String,
+        title: String
+    },
+    data () {
+        return {
+            prefix: 'ivu-anchor-link'
+        };
+    },
+    computed: {
+        anchorLinkClasses () {
+            return [
+                this.prefix,
+                this.currentLink === this.href ? `${this.prefix}-active` : ''
+            ];
+        },
+        linkTitleClasses () {
+            return [
+                `${this.prefix}-title`
+            ];
+        },
+        parentAnchor () {
+            return findComponentUpward(this, 'Anchor');
+        },
+        currentLink () {
+            return this.parentAnchor.currentLink;
+        }
+    },
+    methods: {
+        goAnchor () {
+            this.parentAnchor.turnTo(this.href);
+        }
+    },
+    mounted () {
+        this.$nextTick(() => {
+            this.parentAnchor.init();
+        });
+    }
+};
+</script>

src/components/anchor/anchor.vue

@@ -0,0 +1,191 @@
+<template>
+    <component :is="wrapperComponent" :offset-top="offsetTop" :offset-bottom="offsetBottom" @on-change="handleAffixStateChange">
+		<div :class="`${prefix}-wrapper`" :style="wrapperStyle">
+            <div :class="`${prefix}`">
+                <div :class="`${prefix}-ink`">
+                    <span v-show="showInkBall" :class="`${prefix}-ink-ball`" :style="{top: `${inkTop}px`}"></span>
+                </div>
+                <slot></slot>
+            </div>
+        </div>
+	</component>
+</template>
+<script>
+import { scrollTop, findComponentDownward, findComponentsDownward, sharpMatcherRegx } from '../../utils/assist';
+import { on, off } from '../../utils/dom';
+export default {
+    name: 'Anchor',
+    data () {
+        return {
+            prefix: 'ivu-anchor',
+            isAffixed: false, // current affixed state
+            inkTop: 0,
+            linkHeight: 0,
+            animating: false, // if is scrolling now
+            currentLink: '', // current show link =>  #href -> currentLink = #href
+            currentId: '', // current show title id =>  #href -> currentId = href
+            scrollContainer: null,
+            scrollElement: null,
+            titlesOffsetArr: [],
+            wrapperTop: 0,
+            upperFirstTitle: true
+        };
+    },
+    props: {
+        affix: {
+            type: Boolean,
+            default: true
+        },
+        offsetTop: {
+            type: Number,
+            default: 0
+        },
+        offsetBottom: Number,
+        bounds: {
+            type: Number,
+            default: 5
+        },
+        container: [String, HTMLElement],
+        showInkInFixed: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        wrapperComponent () {
+            return this.affix ? 'Affix' : 'div';
+        },
+        wrapperStyle () {
+            return {
+                maxHeight: this.offsetTop ? `calc(100vh - ${this.offsetTop}px)` : '100vh'
+            };
+        },
+        containerIsWindow () {
+            return this.scrollContainer === window;
+        },
+        showInkBall () {
+            return this.showInkInFixed && (this.isAffixed || (!this.isAffixed && !this.upperFirstTitle && this.scrollContainer !== window));
+        }
+    },
+    methods: {
+        handleAffixStateChange (state) {
+            this.isAffixed = this.affix && state;
+        },
+        handleScroll (e) {
+            this.upperFirstTitle = e.target.scrollTop < this.titlesOffsetArr[0].offset;
+            if (this.animating) return;
+            this.updateTitleOffset();
+            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || e.target.scrollTop;
+            this.getCurrentScrollAtTitleId(scrollTop);
+        },
+        turnTo (href) {
+            this.currentLink = href;
+            this.$router.push({
+                path: href
+            });
+            this.$emit('on-select', href);
+        },
+        handleHashChange () {
+            const url = window.location.href;
+            const sharpLinkMatch = sharpMatcherRegx.exec(url);
+            this.currentLink = sharpLinkMatch[0];
+            this.currentId = sharpLinkMatch[1];
+        },
+        handleScrollTo () {
+            const anchor = document.getElementById(this.currentId);
+            if (!anchor) return;
+            const offsetTop = anchor.offsetTop - this.wrapperTop;
+            this.animating = true;
+            scrollTop(this.scrollContainer, this.scrollElement.scrollTop, offsetTop, 600, () => {
+                this.animating = false;
+            });
+            this.handleSetInkTop();
+        },
+        handleSetInkTop () {
+            const currentLinkElementA = document.querySelector(`a[data-href="${this.currentLink}"]`);
+            if (!currentLinkElementA) return;
+            const elementATop = currentLinkElementA.offsetTop;
+            const top = (elementATop < 0 ? this.offsetTop : elementATop);
+            this.inkTop = top;
+        },
+        updateTitleOffset () {
+            const links = findComponentsDownward(this, 'AnchorLink').map(link => {
+                return link.href;
+            });
+            const idArr = links.map(link => {
+                return link.split('#')[1];
+            });
+            let offsetArr = [];
+            idArr.forEach(id => {
+                const titleEle = document.getElementById(id);
+                if (titleEle) offsetArr.push({
+                    link: `#${id}`,
+                    offset: titleEle.offsetTop - this.scrollElement.offsetTop
+                });
+            });
+            this.titlesOffsetArr = offsetArr;
+        },
+        getCurrentScrollAtTitleId (scrollTop) {
+            let i = -1;
+            let len = this.titlesOffsetArr.length;
+            let titleItem = {
+                link: '#',
+                offset: 0
+            };
+            scrollTop += this.bounds;
+            while (++i < len) {
+                let currentEle = this.titlesOffsetArr[i];
+                let nextEle = this.titlesOffsetArr[i + 1];
+                if (scrollTop >= currentEle.offset && scrollTop < ((nextEle && nextEle.offset) || Infinity)) {
+                    titleItem = this.titlesOffsetArr[i];
+                    break;
+                }
+            }
+            this.currentLink = titleItem.link;
+            this.handleSetInkTop();
+        },
+        getContainer () {
+            this.scrollContainer = this.container ? (typeof this.container === 'string' ? document.querySelector(this.container) : this.container) : window;
+            this.scrollElement = this.container ? this.scrollContainer : (document.documentElement || document.body);
+        },
+        removeListener () {
+            off(this.scrollContainer, 'scroll', this.handleScroll);
+            off(window, 'hashchange', this.handleHashChange);
+        },
+        init () {
+            const anchorLink = findComponentDownward(this, 'AnchorLink');
+            this.linkHeight = anchorLink ? anchorLink.$el.getBoundingClientRect().height : 0;
+            this.handleHashChange();
+            this.$nextTick(() => {
+                this.removeListener();
+                this.getContainer();
+                this.wrapperTop = this.containerIsWindow ? 0 : this.scrollElement.offsetTop;
+                this.handleScrollTo();
+                this.handleSetInkTop();
+                this.updateTitleOffset();
+                this.upperFirstTitle = this.scrollElement.scrollTop < this.titlesOffsetArr[0].offset;
+                on(this.scrollContainer, 'scroll', this.handleScroll);
+                on(window, 'hashchange', this.handleHashChange);
+            });
+        }
+    },
+    watch: {
+        '$route' () {
+            this.handleHashChange();
+            this.handleScrollTo();
+        },
+        container () {
+            this.init();
+        },
+        currentLink (newHref, oldHref) {
+            this.$emit('on-change', newHref, oldHref);
+        }
+    },
+    mounted () {
+        this.init();
+    },
+    beforeDestroy () {
+        this.removeListener();
+    }
+};
+</script>

src/components/anchor/index.js

@@ -0,0 +1,2 @@
+import Anchor from './anchor.vue';
+export default Anchor;

src/index.js

@@ -1,5 +1,7 @@
 import Affix from './components/affix';
 import Alert from './components/alert';
+import Anchor from './components/anchor';
+import AnchorLink from './components/anchor-link';
 import AutoComplete from './components/auto-complete';
 import Avatar from './components/avatar';
 import BackTop from './components/back-top';
@@ -56,6 +58,8 @@ import locale from './locale/index';
 const components = {
     Affix,
     Alert,
+    Anchor,
+    AnchorLink,
     AutoComplete,
     Avatar,
     BackTop,

src/styles/components/anchor.less

@@ -0,0 +1,75 @@
+@anchor-prefix: ~"@{css-prefix}anchor";
+
+.@{anchor-prefix}{
+    &-wrapper{
+        background-color: @body-background;
+        overflow: auto;
+        padding-left: 4px;
+        margin-left: -4px;
+    }
+
+    &{
+        position: relative;
+        padding-left: @anchor-border-width;
+
+        &-ink {
+            position: absolute;
+            height: 100%;
+            left: 0;
+            top: 0;
+            &:before {
+                content: ' ';
+                position: relative;
+                width: @anchor-border-width;
+                height: 100%;
+                display: block;
+                background-color: @border-color-split;
+                margin: 0 auto;
+            }
+            &-ball {
+                display: inline-block;
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                border-radius: 8px;
+                border: 2px solid @primary-color;
+                background-color: @body-background;
+                left: 50%;
+                transition: top .3s ease-in-out;
+                transform: translate(-50%, 2px);
+            }
+        }
+
+        &.fixed &-ink &-ink-ball {
+            display: none;
+        }
+    }
+
+    &-link {
+        padding: 8px 0 8px 16px;
+        line-height: 1;
+
+        &-title {
+            display: block;
+            position: relative;
+            transition: all .3s;
+            color: @text-color;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-bottom: 8px;
+            &:only-child {
+                margin-bottom: 0;
+            }
+        }
+
+        &-active > &-title {
+            color: @primary-color;
+        }
+    }
+
+    &-link &-link {
+        padding-top: 6px;
+        padding-bottom: 6px;
+    }
+}

src/styles/components/index.less

@@ -44,4 +44,5 @@
 @import "avatar";
 @import "color-picker";
 @import "auto-complete";
-@import "time";
+@import "anchor";
+@import "time";

src/styles/custom.less

@@ -184,4 +184,7 @@
 @avatar-font-size-sm: 14px;
 @avatar-bg: #ccc;
 @avatar-color: #fff;
-@avatar-border-radius: @border-radius-small;
+@avatar-border-radius: @border-radius-small;
+
+// Anchor
+@anchor-border-width: 2px;

src/utils/assist.js

@@ -138,7 +138,7 @@ function deepCopy(data) {
 export {deepCopy};
 
 // scrollTop animation
-export function scrollTop(el, from = 0, to, duration = 500) {
+export function scrollTop(el, from = 0, to, duration = 500, endCallback) {
     if (!window.requestAnimationFrame) {
         window.requestAnimationFrame = (
             window.webkitRequestAnimationFrame ||
@@ -153,7 +153,10 @@ export function scrollTop(el, from = 0, to, duration = 500) {
     const step = Math.ceil(difference / duration * 50);
 
     function scroll(start, end, step) {
-        if (start === end) return;
+        if (start === end) {
+            endCallback && endCallback();
+            return;
+        }
 
         let d = (start + step > end) ? end : start + step;
         if (start > end) {
@@ -322,3 +325,5 @@ export function setMatchMedia () {
         window.matchMedia = window.matchMedia || matchMediaPolyfill;
     }
 }
+
+export const sharpMatcherRegx = /#([^#]+)$/;

src/utils/dom.js

@@ -33,4 +33,4 @@ export const off = (function() {
             }
         };
     }
-})();
+})();