sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

ghost-bs

Browse Source 
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
This commit is contained in:
liyang
2018-07-21 13:27:35 +08:00
parent 4ba23d7b94
commit 852b39b28c
11 changed files with 119 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/assets/style/theme/theme-base.scss
View File

@@ -321,6 +321,28 @@
padding: 20px;
}
}
// 隐形布局组件 - 滚动优化
.d2-container-ghost-bs {
position: absolute;
top: 0px;
right: 20px;
bottom: 0px;
left: 0px;
display: flex;
flex-direction: column;
overflow: hidden;
.d2-container-ghost-bs__header {
padding: 20px;
}
.d2-container-ghost-bs__body {
flex-grow: 1;
overflow: hidden;
position: relative;
}
.d2-container-ghost-bs__footer {
padding: 20px;
}
}
}
}
}

2
src/assets/style/theme/theme.scss.REMOVED.git-id
View File

@@ -1 +1 @@
9007ccbb78f811d506e941aa3ac902e2aca4b106
865c9e62f0aee9a80f8771622b383a3273c790f3

2
src/components/core/d2-container/components/d2-container-full-bs.vue
View File

@@ -15,9 +15,7 @@
</template>
<script>
// 插件
import BScroll from 'better-scroll'
export default {
name: 'd2-container-full-bs',
data () {

47
src/components/core/d2-container/components/d2-container-ghost-bs.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<div class="d2-container-ghost-bs">
<div v-if="$slots.header" class="d2-container-ghost-bs__header" ref="header">
<slot name="header"/>
</div>
<div class="d2-container-ghost-bs__body" ref="wrapper">
<slot/>
</div>
<div v-if="$slots.footer" class="d2-container-ghost-bs__footer" ref="footer">
<slot name="footer"/>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'd2-container-ghost-bs',
data () {
return {
BS: null
}
},
mounted () {
this.scrollInit()
},
beforeDestroy () {
this.scrollDestroy()
},
methods: {
scrollInit () {
this.BS = new BScroll(this.$refs.wrapper, {
mouseWheel: true,
scrollbar: {
fade: true,
interactive: false
}
})
},
scrollDestroy () {
if (this.BS) {
this.BS.destroy()
}
}
}
}
</script>

14
src/components/core/d2-container/index.vue
View File

@@ -5,12 +5,18 @@
<slot v-if="$slots.header" name="header" slot="header"/>
<slot/>
</el-card>
<!-- [ghost] 隐形的容器 -->
<d2-container-ghost v-if="type === 'ghost'">
<!-- [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"/>
@@ -33,6 +39,7 @@ 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: {
@@ -52,7 +59,8 @@ export default {
components: {
'd2-container-full': d2ContainerFull,
'd2-container-full-bs': d2ContainerFullBs,
'd2-container-ghost': d2ContainerGhost
'd2-container-ghost': d2ContainerGhost,
'd2-container-ghost-bs': d2ContainerGhostBs
},
data () {
return {

1
src/menu/modules/demo-components.js
View File

@@ -14,6 +14,7 @@ export default {
{ path: `${pre}container/full-bs`, title: '填充 滚动优化' },
{ path: `${pre}container/ghost`, title: '隐形' },
{ path: `${pre}container/ghost-slot`, title: '隐形 插槽' },
{ path: `${pre}container/ghost-bs`, title: '隐形 滚动优化' },
{ path: `${pre}container/card`, title: '卡片' }
]
},

8
src/pages/demo/components/container/full-bs.vue
View File

@@ -1,12 +1,8 @@
<template>
<d2-container scroll>
<template slot="header">
我是插入到 header 中的内容
</template>
<template slot="header">header</template>
<d2-markdown :source="doc"/>
<template slot="footer">
<d2-link-btn title="D2Admin" link="https://github.com/d2-projects/d2-admin"/>
</template>
<template slot="footer">header</template>
</d2-container>
</template>

22
src/pages/demo/components/container/ghost-bs.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<d2-container type="ghost" scroll>
<template slot="header">header</template>
<div class="d2-pt d2-pb">
<el-card shadow="never" style="width: 600px;">
<d2-markdown :source="doc"/>
</el-card>
</div>
<template slot="footer">footer</template>
</d2-container>
</template>
<script>
import doc from './md/doc.md'
export default {
data () {
return {
doc
}
}
}
</script>

12
src/pages/demo/components/container/ghost-slot.vue
View File

@@ -1,10 +1,12 @@
<template>
<d2-container type="ghost">
<template slot="header">隐形页面容器 header</template>
<el-card shadow="never" class="d2-mt d2-mb" style="width: 400px;">
<d2-markdown :source="doc"/>
</el-card>
<template slot="footer">隐形页面容器 footer</template>
<template slot="header">header</template>
<div class="d2-pt d2-pb">
<el-card shadow="never" style="width: 600px;">
<d2-markdown :source="doc"/>
</el-card>
</div>
<template slot="footer">footer</template>
</d2-container>
</template>

8
src/pages/demo/components/container/ghost.vue
View File

@@ -1,8 +1,10 @@
<template>
<d2-container type="ghost">
<el-card shadow="never" class="d2-mt d2-mb" style="width: 400px;">
<d2-markdown :source="doc"/>
</el-card>
<div class="d2-pt d2-pb">
<el-card shadow="never" style="width: 600px;">
<d2-markdown :source="doc"/>
</el-card>
</div>
</d2-container>
</template>

2
src/router/routes.js.REMOVED.git-id
View File

@@ -1 +1 @@
81f6e5ee660a2f3bb538685b20c34e46f1bd5690
e4b510400fdb77d9d6d4489f26a59c847644472a