Skip to content

Commit 600597b

Browse files
author
黄书伟
committed
实例添加锚点
1 parent 172affd commit 600597b

File tree

4 files changed

+94
-30
lines changed

4 files changed

+94
-30
lines changed

‎examples/comp/App.vue‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -66,19 +66,7 @@
6666
methods: {
6767
goBackTop(){
6868
69-
this.scrollTo(document.body, 0, 200);
70-
},
71-
72-
scrollTo(element, to, duration) {
73-
if (duration <= 0) return;
74-
var difference = to - element.scrollTop;
75-
var perTick = difference / duration * 10;
76-
77-
setTimeout(x => {
78-
element.scrollTop = element.scrollTop + perTick;
79-
if (element.scrollTop === to) return;
80-
this.scrollTo(element, to, duration - 10);
81-
}, 10)
69+
window.scroll(0,0);
8270
},
8371
8472
handleScroll(){
@@ -94,6 +82,24 @@
9482
},
9583
beforeDestroy() {
9684
document.removeEventListener('scroll', this.handleScroll);
85+
},
86+
watch:{
87+
88+
$route(to,from){
89+
90+
let query = to.query;
91+
if (query && query.anchor){
92+
93+
this.$nextTick(x=>{
94+
let anchor = this.$el.querySelector('#'+query.anchor);
95+
96+
if (anchor && anchor.offsetTop){
97+
98+
window.scroll(0,anchor.offsetTop)
99+
}
100+
})
101+
}
102+
}
97103
}
98104
}
99105

‎examples/css/index.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -698,3 +698,7 @@ code {
698698
opacity:0.8;
699699
}
700700
/*回到顶部 end*/
701+
702+
.anchor{
703+
cursor: pointer;
704+
}

‎examples/doc/table/main.md‎

Lines changed: 55 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,29 @@
1919
<h3>基础用法</h3>
2020

2121
<div class="mt30">
22-
<div class="bold">设置表格宽度，最后一列不设置</div>
22+
<div class="bold">
23+
<a class="anchor" id="table-basic-set-table-width" @click.stop="goAnchor('table-basic-set-table-width')">#</a>
24+
设置表格宽度，最后一列不设置</div>
2325
<basic-set-table-width></basic-set-table-width>
2426
</div>
2527
<div class="mt30">
26-
<div class="bold">不设置表格总体宽度，只设置每列的宽度</div>
28+
<div class="bold">
29+
<a class="anchor" id="table-basic-no-table-width" @click.stop="goAnchor('table-basic-no-table-width')">#</a>
30+
不设置表格总体宽度，只设置每列的宽度</div>
2731
<basic-no-table-width></basic-no-table-width>
2832
</div>
2933

3034
<div class="mt30">
31-
<div class="bold">给单元格设置样式</div>
35+
<div class="bold">
36+
<a class="anchor" id="table-set-cell-class-name" @click.stop="goAnchor('table-set-cell-class-name')">#</a>
37+
给单元格设置样式</div>
3238
<set-cell-class-name></set-cell-class-name>
3339
</div>
3440

3541
<div class="mt30">
36-
<div class="bold">自定义列</div>
42+
<div class="bold">
43+
<a class="anchor" id="table-custom-columns" @click.stop="goAnchor('table-custom-columns')">#</a>
44+
自定义列</div>
3745
<custom-columns></custom-columns>
3846
</div>
3947

@@ -43,22 +51,27 @@
4351
<h3>单元格编辑</h3>
4452

4553
<div class="mt30">
46-
<div class="bold">支持单元格编辑</div>
54+
<div class="bold">
55+
<a class="anchor" id="table-cell-edit" @click.stop="goAnchor('table-cell-edit')">#</a>
56+
支持单元格编辑</div>
4757
<cell-edit></cell-edit>
4858
</div>
4959
</div>
5060

5161
<div class="mt30">
5262
<h3>表格排序</h3>
5363

54-
5564
<div class="mt30">
56-
<div class="bold">根据一个字段排序</div>
65+
<div class="bold">
66+
<a class="anchor" id="table-sort-by-single-columns" @click.stop="goAnchor('table-sort-by-single-columns')">#</a>
67+
根据一个字段排序</div>
5768
<sort-by-single-columns></sort-by-single-columns>
5869
</div>
5970

6071
<div class="mt30">
61-
<div class="bold">根据多个字段排序</div>
72+
<div class="bold">
73+
<a class="anchor" id="table-sort-by-multiple-columns" @click.stop="goAnchor('table-sort-by-multiple-columns')">#</a>
74+
根据多个字段排序</div>
6275
<sort-by-multiple-columns></sort-by-multiple-columns>
6376
</div>
6477
</div>
@@ -68,12 +81,16 @@
6881

6982

7083
<div class="mt30">
71-
<div class="bold">固定表头+固定列</div>
84+
<div class="bold">
85+
<a class="anchor" id="table-frozen-title-columns" @click.stop="goAnchor('table-frozen-title-columns')">#</a>
86+
固定表头+固定列</div>
7287
<frozen-title-columns></frozen-title-columns>
7388
</div>
7489

7590
<div class="mt30">
76-
<div class="bold">固定复杂表头+固定列</div>
91+
<div class="bold">
92+
<a class="anchor" id="table-complex-header-fixed-column" @click.stop="goAnchor('table-complex-header-fixed-column')">#</a>
93+
固定复杂表头+固定列</div>
7794
<complex-header-fixed-column></complex-header-fixed-column>
7895
</div>
7996
</div>
@@ -82,24 +99,32 @@
8299
<h3>表格自适应（改变浏览器窗口大小试试看）</h3>
83100

84101
<div class="mt30">
85-
<div class="bold">简单表格自适应</div>
102+
<div class="bold">
103+
<a class="anchor" id="table-simple-table-resize" @click.stop="goAnchor('table-simple-table-resize')">#</a>
104+
简单表格自适应</div>
86105
<simple-table-resize></simple-table-resize>
87106
</div>
88107

89108
<div class="mt30">
90-
<div class="bold">复杂表格自适应，设置方式同上</div>
109+
<div class="bold">
110+
<a class="anchor" id="table-complex-table-resize" @click.stop="goAnchor('table-complex-table-resize')">#</a>
111+
复杂表格自适应，设置方式同上</div>
91112
<complex-table-resize></complex-table-resize>
92113

93114
</div>
94115

95116
<div class="mt30">
96-
<div class="bold">自适应的显示隐藏切换</div>
117+
<div class="bold">
118+
<a class="anchor" id="table-hide-table-resize" @click.stop="goAnchor('table-hide-table-resize')">#</a>
119+
自适应的显示隐藏切换</div>
97120
<hide-table-resize></hide-table-resize>
98121
</div>
99122

100123

101124
<div class="mt30">
102-
<div class="bold">容器中自适应</div>
125+
<div class="bold">
126+
<a class="anchor" id="table-container-resize" @click.stop="goAnchor('table-container-resize')">#</a>
127+
容器中自适应</div>
103128
<container-resize></container-resize>
104129

105130
</div>
@@ -109,29 +134,41 @@
109134
<h3>设置loading 和 暂无数据</h3>
110135

111136
<div class="mt30">
112-
<div class="bold">开启loading效果</div>
137+
<div class="bold">
138+
<a class="anchor" id="table-loading-and-error-content" @click.stop="goAnchor('table-loading-and-error-content')">#</a>
139+
开启loading效果</div>
113140
<set-loading-and-error-content></set-loading-and-error-content>
114141
</div>
115142

116143
<div class="mt30">
117-
<div class="bold">自定义loading 以及 错误信息</div>
144+
<div class="bold">
145+
<a class="anchor" id="table-custom-set-loading-and-error-content" @click.stop="goAnchor('table-custom-set-loading-and-error-content')">#</a>
146+
自定义loading 以及 错误信息</div>
118147
<custom-set-loading-and-error-content></custom-set-loading-and-error-content>
119148
</div>
120149

121150
</div>
122151

123152
<div class="mt30 mb30">
124-
<h3>结合分页的完整实例</h3>
153+
<h3>
154+
<a class="anchor" id="table-combined-paging" @click.stop="goAnchor('table-combined-paging')">#</a>
155+
结合分页的完整实例</h3>
125156
<combined-paging></combined-paging>
126157
</div>
127158

128159
<!--api-->
160+
<h3>
161+
<a class="anchor" id="table-api" @click.stop="goAnchor('table-api')">#</a>
162+
API
163+
</h3>
164+
129165
<api></api>
130166
</div>
131167
</template>
132168

133169
<script>
134170
171+
import anchorMixin from '../../mixin/anchor-mixin.js'
135172
136173
import basicSetTableWidth from './basic-set-table-width.md'
137174
import basicNoTableWidth from './basic-no-table-width.md'
@@ -163,6 +200,7 @@
163200
164201
export default{
165202
name: "Table",
203+
mixins:[anchorMixin],
166204
components: {
167205
basicSetTableWidth,
168206
basicNoTableWidth,

‎examples/mixin/anchor-mixin.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export default {
2+
3+
methods:{
4+
5+
goAnchor(selector) {
6+
7+
let anchor = this.$el.querySelector('#'+selector);
8+
9+
window.scroll(0,anchor.offsetTop)
10+
11+
this.$router.replace({path:this.$route.path, query: {anchor:selector}});
12+
13+
}
14+
}
15+
16+
}

0 commit comments

Comments
 (0)