a73a33b06a
Former-commit-id: f40914e76c91b828299b7aeb5b56337d641d0d74 [formerly f40914e76c91b828299b7aeb5b56337d641d0d74 [formerly f40914e76c91b828299b7aeb5b56337d641d0d74 [formerly f40914e76c91b828299b7aeb5b56337d641d0d74 [formerly f59ab0339a7fad79340308948667b1254e7de250 [formerly d7e13b40b46a808a25524433cae68e95db6a98b1]]]]] Former-commit-id: 9a2c521f0be4ffbbc715f337880168b40a352488 Former-commit-id: f0526a5e139ac2523e5cf1a9eccb83b121065d05 Former-commit-id: e80ccfb84a5cd9dd64d844999afa7ee1e0e1985b [formerly f77fec8cc261483da122e06c4d6454007eb3877a] Former-commit-id: 98cf5fd060753ccd960d7fdb9ac8246393da3890 Former-commit-id: 57ef44f6a5bb191f3f2584849f6c4fac835e409a Former-commit-id: 52173964469c5e6c308ac7d9a91990dab580b2c7 Former-commit-id: 9211b978a4bf1493974cbe59befd946f7c516b66 Former-commit-id: 30ac26684644764d096e4664e15d67c15c184ac5
112 lines
3.4 KiB
JavaScript
112 lines
3.4 KiB
JavaScript
// 组件
|
|
import d2ContainerFull from './components/d2-container-full.vue'
|
|
import d2ContainerFullBs from './components/d2-container-full-bs.vue'
|
|
import d2ContainerGhost from './components/d2-container-ghost.vue'
|
|
import d2ContainerGhostBs from './components/d2-container-ghost-bs.vue'
|
|
import d2ContainerCard from './components/d2-container-card.vue'
|
|
import d2ContainerCardBs from './components/d2-container-card-bs.vue'
|
|
import d2Source from './components/d2-source.vue'
|
|
|
|
export default {
|
|
name: 'd2-container',
|
|
props: {
|
|
// 容器样式
|
|
type: {
|
|
type: String,
|
|
required: false,
|
|
default: 'full'
|
|
},
|
|
// 滚动优化
|
|
betterScroll: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
computed: {
|
|
// 始终返回渲染组件
|
|
component () {
|
|
if (this.type === 'card' && !this.betterScroll) return d2ContainerCard
|
|
if (this.type === 'card' && this.betterScroll) return d2ContainerCardBs
|
|
if (this.type === 'ghost' && !this.betterScroll) return d2ContainerGhost
|
|
if (this.type === 'ghost' && this.betterScroll) return d2ContainerGhostBs
|
|
if (this.type === 'full' && !this.betterScroll) return d2ContainerFull
|
|
if (this.type === 'full' && this.betterScroll) return d2ContainerFullBs
|
|
else {
|
|
return 'div'
|
|
}
|
|
}
|
|
},
|
|
render (h) {
|
|
const slots = [
|
|
h('div', this.$slots.default)
|
|
]
|
|
if (this.$slots.header) slots.push(h('div', { slot: 'header' }, [ this.$slots.header ]))
|
|
if (this.$slots.footer) slots.push(h('div', { slot: 'footer' }, [ this.$slots.footer ]))
|
|
return h('div', {
|
|
ref: 'container',
|
|
class: 'container-component'
|
|
}, [
|
|
h(this.component, {
|
|
ref: 'component',
|
|
props: this.$attrs,
|
|
on: {
|
|
scroll: e => this.$emit('scroll', e)
|
|
}
|
|
}, slots),
|
|
// 只在预览和开发模式下显示源码按钮
|
|
process.env.VUE_APP_BUILD_MODE === 'TRAVIS' || process.env.NODE_ENV === 'development' ? h(d2Source, {
|
|
props: this.$attrs
|
|
}) : undefined
|
|
])
|
|
},
|
|
methods: {
|
|
// 返回顶部
|
|
scrollToTop () {
|
|
this.$refs.component.scrollToTop()
|
|
// 如果开启了 better scroll 还需要手动触发一遍 scroll 事件
|
|
const bs = this.$refs.component.BS
|
|
if (bs) this.$refs.component.scroll()
|
|
},
|
|
// 用法同原生方法 scrollBy
|
|
scrollBy (x = 0, y = 0, time = 300) {
|
|
if (this.betterScroll) {
|
|
const bs = this.$refs.component.BS
|
|
if (bs) {
|
|
bs.scrollBy(-x, -y, time)
|
|
// 手动触发一遍 scroll 事件
|
|
this.$refs.component.scroll()
|
|
}
|
|
} else {
|
|
this.$refs.component.$refs.body.scrollBy(x, y)
|
|
}
|
|
},
|
|
// 用法同原生方法 scrollTo
|
|
scrollTo (x = 0, y = 0, time = 300) {
|
|
if (this.betterScroll) {
|
|
const bs = this.$refs.component.BS
|
|
if (bs) {
|
|
bs.scrollTo(-x, -y, time)
|
|
// 手动触发一遍 scroll 事件
|
|
this.$refs.component.scroll()
|
|
}
|
|
} else {
|
|
this.$refs.component.$refs.body.scrollTo(x, y)
|
|
}
|
|
},
|
|
// 用法同原生方法 scrollTop
|
|
scrollTop (top = 0, time = 300) {
|
|
if (this.betterScroll) {
|
|
const bs = this.$refs.component.BS
|
|
if (bs) {
|
|
bs.scrollTo(bs.x, -top, time)
|
|
// 手动触发一遍 scroll 事件
|
|
this.$refs.component.scroll()
|
|
}
|
|
} else {
|
|
this.$refs.component.$refs.body.scrollTop = top
|
|
}
|
|
}
|
|
}
|
|
}
|