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

clear

Browse Source 
Former-commit-id: e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly 5793d72d458b7eeaf28a097d026168cebc9fc256 [formerly 9c8de3644bd40a55711e618742e29cce390e4c5f]]]]]
Former-commit-id: 05ca3c8da65f8583c142720628aa6ea71d2dbf45
Former-commit-id: 7a4d2fba696e901db86071ea2810e9c932c976ad
Former-commit-id: c18d3689200ca0e528fbf9bf171f6e1b50131bc3 [formerly 455e9952ca890cd8ad882250cfb9eabd944d44ee]
Former-commit-id: 021fa8191681fe4f22e9a9f40389831a847e9066
Former-commit-id: 1022b7792417ce366901b9d5284762a015dd6d26
Former-commit-id: bed799410be508713cac76b7c8cf02d4457fe996
Former-commit-id: f6787cfaac3404132ad1011e2707e08484708ca9
Former-commit-id: 7a8a3baca9ef30393744fd56def6d608b51dcddd
This commit is contained in:
liyang
2018-07-16 10:43:14 +08:00
parent c53973a35f
commit 1d310c9c7d
496 changed files with 3 additions and 23673 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/demo/plugins/better-scroll/base.vue
View File

@@ -1,64 +0,0 @@
<template>
<d2-container>
<template slot="header">基础用法</template>
<div ref="wrapper" class="demo-bs-wrapper">
<div>
<div v-for="n in 30" :key="n" class="demo-bs-item">n : {{n}}</div>
</div>
</div>
</d2-container>
</template>
<script>
import BScroll from 'better-scroll'
export default {
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>
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.demo-bs-wrapper {
height: 200px;
width: 300px;
position: relative;
overflow: hidden;
border: 1px solid $color-border-1;
border-radius: 4px;
.demo-bs-item {
line-height: 40px;
padding-left: 10px;
border-bottom: 1px solid $color-border-4;
&:last-child {
border-bottom: none;
}
}
}
</style>

107
src/pages/demo/plugins/better-scroll/to.vue
View File

@@ -1,107 +0,0 @@
<template>
<d2-container type="full">
<template slot="header">滚动定位</template>
<el-row :gutter="20">
<el-col :span="8">
<div ref="wrapper" class="demo-bs-wrapper">
<div>
<div v-for="n in 100" :key="n" class="demo-bs-item" :id="`demo-bs-item-${n}`">n : {{n}}</div>
</div>
</div>
</el-col>
<el-col :span="16">
<div class="d2-mb">
<p>滚动时间 ms</p>
<el-slider v-model="time" :min="100" :max="3000"></el-slider>
</div>
<div class="d2-mb">
<el-button-group>
<el-button @click="handleScrollTo(100)">滚动到100像素位置</el-button>
<el-button @click="handleScrollTo(300)">滚动到300像素位置</el-button>
</el-button-group>
</div>
<div class="d2-mb">
<el-button-group>
<el-button @click="handleScrollBy(50)">向下滚动50像素</el-button>
<el-button @click="handleScrollBy(-50)">向上滚动50像素</el-button>
</el-button-group>
</div>
<div class="d2-mb">
<el-button-group>
<el-button @click="handleScrollToElement(4)">滚动到第四个</el-button>
<el-button @click="handleScrollToElement(14)">滚动到第十四个</el-button>
<el-button @click="handleScrollToElement(24)">滚动到第二十四个</el-button>
</el-button-group>
</div>
</el-col>
</el-row>
<template slot="footer">
<d2-demo-link-btn title="文档" link="http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/"/>
</template>
</d2-container>
</template>
<script>
// 插件
import BScroll from 'better-scroll'
export default {
data () {
return {
time: 300,
BS: null
}
},
mounted () {
this.scrollInit()
},
beforeDestroy () {
this.scrollDestroy()
},
methods: {
handleScrollTo (y) {
this.BS.scrollTo(0, -y, this.time)
},
handleScrollBy (y) {
this.BS.scrollBy(0, -y, this.time)
},
handleScrollToElement (n) {
this.BS.scrollToElement(`#demo-bs-item-${n}`, this.time)
},
scrollInit () {
this.BS = new BScroll(this.$refs.wrapper, {
mouseWheel: true,
scrollbar: {
fade: true,
interactive: false
}
})
},
scrollDestroy () {
if (this.BS) {
this.BS.destroy()
}
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.demo-bs-wrapper {
height: 400px;
position: relative;
overflow: hidden;
border: 1px solid $color-border-1;
border-radius: 4px;
.demo-bs-item {
line-height: 40px;
padding-left: 10px;
border-bottom: 1px solid $color-border-4;
&:last-child {
border-bottom: none;
}
}
}
</style>