517f0e5f8a
Former-commit-id: bd356fb67ff4b7138cb245203c01aaec7374b8b8 [formerly bd356fb67ff4b7138cb245203c01aaec7374b8b8 [formerly bd356fb67ff4b7138cb245203c01aaec7374b8b8 [formerly bd356fb67ff4b7138cb245203c01aaec7374b8b8 [formerly 53a7f073009a8066a7c5673a6c27eb70dcd201e0 [formerly b5943262046e85618f24f20ff5a18c22c9660d57]]]]] Former-commit-id: 14b0b52a698ed902aa8ca6008c7c9cc9f4a922c1 Former-commit-id: 1547cce2ef1de0acc5078b033f499ab8b74ac7f5 Former-commit-id: 64145c3fb940834f88877fa9ab4d44b0c2bf53ad [formerly e985341b7fcb491ee0f9a8e61f878f261fb7a712] Former-commit-id: 5cedd4c754eba078ab88d27280183774c56bd053 Former-commit-id: 72ff1602a26b2ba61f997fe2177f0c885f02a5a8 Former-commit-id: e5a0d1b18b63e498d98dec392459bb05acb7035a Former-commit-id: f024b9a51a480258ae18114b092bf22d8e1708ec Former-commit-id: 33152b0004e8abe0036cf459d47e1155cfc67324
109 lines
2.9 KiB
Vue
109 lines
2.9 KiB
Vue
<template>
|
|
<d2-container
|
|
ref="container"
|
|
:type="containerType"
|
|
:scroll-delay="scrollDelay"
|
|
@scroll="e => { scrollTop = e.target.scrollTop }">
|
|
<template slot="header">
|
|
<el-form
|
|
:inline="true"
|
|
size="mini">
|
|
<el-form-item
|
|
label="布局类型"
|
|
class="d2-mb-0">
|
|
<el-radio-group v-model="containerType">
|
|
<el-radio-button label="full"></el-radio-button>
|
|
<el-radio-button label="card"></el-radio-button>
|
|
<el-radio-button label="ghost"></el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="滚动距离"
|
|
class="d2-mb-0">
|
|
<el-input
|
|
:value="scrollTop"
|
|
style="width: 130px;">
|
|
<template slot="append">px</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="事件延迟(ms)"
|
|
class="d2-mb-0">
|
|
<el-input-number
|
|
v-model="scrollDelay"
|
|
:min="100"
|
|
:max="2000"
|
|
:step="100"
|
|
style="width: 110px;"/>
|
|
</el-form-item>
|
|
<el-form-item class="d2-mb-0">
|
|
<el-button
|
|
v-if="scrollTop >= 55"
|
|
type="primary"
|
|
@click="$refs.container.scrollToTop">
|
|
回到顶部
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
<el-alert
|
|
type="success"
|
|
title="请向下滚动"
|
|
class="d2-mb-10"
|
|
center/>
|
|
<d2-demo-article
|
|
v-for="i in 10"
|
|
:key="i"
|
|
:style="articleStyle"
|
|
long/>
|
|
<template slot="footer">
|
|
<el-form
|
|
:inline="true"
|
|
size="mini">
|
|
<el-form-item class="d2-mb-0">
|
|
<el-button @click="$refs.container.scrollBy(0, 30)">相对滚动 (0, 30) 像素</el-button>
|
|
</el-form-item>
|
|
<el-form-item class="d2-mb-0">
|
|
<el-button @click="$refs.container.scrollTo(0, 100)">滚动到 (0, 100) 像素位置</el-button>
|
|
</el-form-item>
|
|
<el-form-item class="d2-mb-0">
|
|
<el-button @click="$refs.container.scrollTop(100)">滚动到垂直位置 100</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
</d2-container>
|
|
</template>
|
|
|
|
<script>
|
|
import d2DemoArticle from './components/d2-demo-article'
|
|
export default {
|
|
components: {
|
|
'd2-demo-article': d2DemoArticle
|
|
},
|
|
data () {
|
|
return {
|
|
containerType: 'full',
|
|
scrollDelay: 100,
|
|
scrollTop: 0
|
|
}
|
|
},
|
|
computed: {
|
|
articleStyle () {
|
|
return {
|
|
opacity: this.scrollTop > 55 ? '1' : '.1'
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
containerType (val, oldVal) {
|
|
let top = this.scrollTop
|
|
// 因为 ghost 模式下的容器没有 20px 的 padding
|
|
// 为了保持垂直位置 需要重新计算定位高度
|
|
if (oldVal === 'ghost') top += 20
|
|
if (val === 'ghost') top -= 20
|
|
this.$nextTick(() => this.$refs.container.scrollTo(0, top))
|
|
}
|
|
}
|
|
}
|
|
</script>
|