refs #228 Fix loading circle in sidebar
This commit is contained in:
parent
35a16de084
commit
d02b17fe13
|
@ -2,10 +2,13 @@
|
|||
<transition name="slide-detail">
|
||||
<div id="side_bar" v-if="openSideBar">
|
||||
<div class="header">
|
||||
<i class="el-icon-loading" v-show="loading"></i>
|
||||
<i class="el-icon-close" @click="close"></i>
|
||||
</div>
|
||||
<account-profile v-if="component === 1"></account-profile>
|
||||
<toot-detail v-if="component === 2"></toot-detail>
|
||||
<div class="scrollable">
|
||||
<account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
|
||||
<toot-detail v-if="component === 2"></toot-detail>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
@ -21,6 +24,11 @@ export default {
|
|||
TootDetail,
|
||||
AccountProfile
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
|
@ -33,6 +41,9 @@ export default {
|
|||
methods: {
|
||||
close () {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/close')
|
||||
},
|
||||
changeLoading (value) {
|
||||
this.loading = value
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -45,7 +56,6 @@ export default {
|
|||
right: 0;
|
||||
width: 320px;
|
||||
height: calc(100% - 48px);
|
||||
overflow: auto;
|
||||
border-left: solid 1px var(--theme-border-color);
|
||||
|
||||
.header {
|
||||
|
@ -54,11 +64,18 @@ export default {
|
|||
border-top: solid 1px var(--theme-border-color);
|
||||
border-bottom: solid 1px var(--theme-border-color);
|
||||
text-align: right;
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.el-icon-close {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
overflow: auto;
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-detail-enter-active, .slide-detail-leave-active {
|
||||
|
|
|
@ -112,6 +112,9 @@ export default {
|
|||
watch: {
|
||||
account: function () {
|
||||
this.activeTab = 1
|
||||
},
|
||||
loading: function (newState, oldState) {
|
||||
this.$emit('change-loading', newState)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -171,8 +174,6 @@ function findLink (target) {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
#account_profile {
|
||||
height: 100%;
|
||||
|
||||
.header-background {
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
|
|
Loading…
Reference in New Issue