ykxiao
/
DemuMesDataV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optmization

This commit is contained in:
jiaming743 2019-01-10 17:31:23 +08:00
parent 6b0268cc30
commit 41c2d0e860
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/scrollBoard/index.vue
View File

@ -22,14 +22,14 @@
<div :class="`row-item-info ${textTrueAlign[ii]}`" <div :class="`row-item-info ${textTrueAlign[ii]}`"
v-for="(info, ii) in row.data" v-for="(info, ii) in row.data"
:key="info"> :key="info + Math.random()">
<div :class="`rii-width ${ii === 0 && index && 'index-container'}`" :style="`width: ${columnTrueWidth[ii]};`"> <div :class="`rii-width ${ii === 0 && index && 'index-container'}`" :style="`width: ${columnTrueWidth[ii]};`">
<template v-if="ii === 0 && index"> <template v-if="ii === 0 && index">
<div class="index" :style="`background-color:${titleTrueBG};`">{{ info }}</div> <div class="index" :style="`background-color:${titleTrueBG};`">{{ info }}</div>
</template> </template>
<span v-else v-html="info" /> <span @click="emitClickEvent(row.data, ii)" v-else v-html="info" />
</div> </div>
</div> </div>
@ -42,7 +42,7 @@
<script> <script>
export default { export default {
name: 'scroll-board', name: 'scroll-board',
props: ['data', 'index', 'html', 'rowNum', 'titleBG', 'oddBG', 'evenBG', 'columnWidth', 'textAlign', 'carousel'], props: ['data', 'index', 'html', 'rowNum', 'titleBG', 'waitTime', 'oddBG', 'evenBG', 'columnWidth', 'textAlign', 'carousel'],
data () { data () {
return { return {
ref: `scroll-board-${(new Date()).getTime()}`, ref: `scroll-board-${(new Date()).getTime()}`,
@ -56,7 +56,7 @@ export default {
defaultOddBG: '#003B51', defaultOddBG: '#003B51',
defaultEvenBG: '#0A2732', defaultEvenBG: '#0A2732',
waitTime: 2000, defaultWaitTime: 2000,
rowTrueNum: '', rowTrueNum: '',
rowHeight: '', rowHeight: '',
@ -218,9 +218,9 @@ export default {
this.scrollData = tempScrollData this.scrollData = tempScrollData
const { doFade, waitTime } = this const { doFade, waitTime, defaultWaitTime } = this
setTimeout(doFade, waitTime) setTimeout(doFade, waitTime || defaultWaitTime)
}, },
doFade () { doFade () {
const { rowTrueNum, carousel, scrollData, allRowNum, currentIndex } = this const { rowTrueNum, carousel, scrollData, allRowNum, currentIndex } = this
@ -243,6 +243,9 @@ export default {
this.animationHandler = setTimeout(getCurrentScrollData, 1000) this.animationHandler = setTimeout(getCurrentScrollData, 1000)
}, },
emitClickEvent (rowData, columnIndex) {
this.$emit('click', { rowData, columnIndex })
},
stopAnimation () { stopAnimation () {
const { animationHandler } = this const { animationHandler } = this
@ -310,6 +313,7 @@ export default {
flex-direction: row; flex-direction: row;
flex-shrink: 0; flex-shrink: 0;
transition: all 0.5s; transition: all 0.5s;
overflow: hidden;
&.fade { &.fade {
height: 0% !important; height: 0% !important;
@ -319,6 +323,7 @@ export default {
} }
.row-item-info { .row-item-info {
position: relative;
display: flex; display: flex;
vertical-align: middle; vertical-align: middle;
align-items: center; align-items: center;