drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add anchor component

Browse source
This commit is contained in:
zhigang.li 2018-04-12 17:49:55 +08:00
parent eeeceb5446
commit 43513f702c
13 changed files with 434 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

1
examples/app.vue
View file

@ -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>

4
examples/main.js
View file

@ -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)

99
examples/routers/anchor.vue Normal file
View file

@ -0,0 +1,99 @@
<template>
<div class="anchor-wrapper">
<div class="link-wrapper">
<Button @click="changeCon">修改为Window</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>
</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>
</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>
</div>
</div>
</template>
<script>
export default {
data () {
return {
container: null,
value1: '1',
scrollCon: '',
con: 'div'
}
},
methods: {
changeCon () {
this.con = 'window';
this.scrollCon = undefined;
},
handleChange (newHref, oldHref) {
console.log(`${oldHref} => ${newHref}`)
},
handleSelect (href) {
console.log(`select ${href}`)
}
},
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>