852b39b28c
Former-commit-id: a45138a84dbe63cbe9886eb0c02dcd40dca6905c [formerly a45138a84dbe63cbe9886eb0c02dcd40dca6905c [formerly a45138a84dbe63cbe9886eb0c02dcd40dca6905c [formerly a45138a84dbe63cbe9886eb0c02dcd40dca6905c [formerly 94b9665f7a53c7c65e15b070df56c618f7c8002c [formerly 09fa2a15ac336655d07124a98c2add929966564e]]]]] Former-commit-id: 1708b36d8de5f8e2200a0bf0971cc21fcfb2f3d2 Former-commit-id: 15b72d5ea159c15423bf1c268d757944ccfa5429 Former-commit-id: 110be7d5ae87932f25a2c700f53541fd61c98369 [formerly 546751449db305a212a6eab1ef01f96b1567302b] Former-commit-id: 9da97a890e329f4ec7bd090c10a5948a1fca8ab1 Former-commit-id: 29baecd27f00e8a185cc243ef6f5e2ad60f7a061 Former-commit-id: d70d32aea25f1638064da3408cb36439ff8bb0dd Former-commit-id: 5f059cb4e29645422f392bec07d5bd5ee45c8a3b Former-commit-id: 8b8ad9fcd0e50aacfae11c03eddd8f2fc1076105
98 lines
2.6 KiB
Vue
98 lines
2.6 KiB
Vue
<template>
|
|
<div class="container-component" ref="container">
|
|
<!-- [card] 卡片容器 -->
|
|
<el-card v-if="type === 'card'" shadow="never" class="d2-container-card d2-mr">
|
|
<slot v-if="$slots.header" name="header" slot="header"/>
|
|
<slot/>
|
|
</el-card>
|
|
<!-- [ghost] 隐形容器 -->
|
|
<d2-container-ghost v-if="type === 'ghost' && !scroll">
|
|
<slot v-if="$slots.header" name="header" slot="header"/>
|
|
<slot/>
|
|
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
|
</d2-container-ghost>
|
|
<!-- [ghost] 隐形容器 滚动优化 -->
|
|
<d2-container-ghost-bs v-if="type === 'ghost' && scroll">
|
|
<slot v-if="$slots.header" name="header" slot="header"/>
|
|
<slot/>
|
|
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
|
</d2-container-ghost-bs>
|
|
<!-- [container-full] 填充 -->
|
|
<d2-container-full v-if="type === 'full' && !scroll">
|
|
<slot v-if="$slots.header" name="header" slot="header"/>
|
|
<slot/>
|
|
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
|
</d2-container-full>
|
|
<!-- [container-full-bs] 填充 滚动优化 -->
|
|
<d2-container-full-bs v-if="type === 'full' && scroll">
|
|
<slot v-if="$slots.header" name="header" slot="header"/>
|
|
<slot/>
|
|
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
|
</d2-container-full-bs>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// 插件
|
|
import BScroll from 'better-scroll'
|
|
// 组件
|
|
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'
|
|
export default {
|
|
name: 'd2-container',
|
|
props: {
|
|
// 容器样式
|
|
type: {
|
|
type: String,
|
|
required: false,
|
|
default: 'full'
|
|
},
|
|
// 滚动优化
|
|
scroll: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
components: {
|
|
'd2-container-full': d2ContainerFull,
|
|
'd2-container-full-bs': d2ContainerFullBs,
|
|
'd2-container-ghost': d2ContainerGhost,
|
|
'd2-container-ghost-bs': d2ContainerGhostBs
|
|
},
|
|
data () {
|
|
return {
|
|
BS: null
|
|
}
|
|
},
|
|
mounted () {
|
|
if (this.type === 'card') {
|
|
this.scrollInit()
|
|
}
|
|
},
|
|
beforeDestroy () {
|
|
if (this.type === 'card') {
|
|
this.scrollDestroy()
|
|
}
|
|
},
|
|
methods: {
|
|
scrollInit () {
|
|
this.BS = new BScroll(this.$refs.container, {
|
|
mouseWheel: true,
|
|
scrollbar: {
|
|
fade: true,
|
|
interactive: false
|
|
}
|
|
})
|
|
},
|
|
scrollDestroy () {
|
|
if (this.BS) {
|
|
this.BS.destroy()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|