浏览代码

Add loading overlay

sbkwgh 8 年之前
父节点
当前提交
f29c54a7ed
共有 1 个文件被更改,包括 30 次插入2 次删除
  1. 30 2
      src/components/ThreadPoll.vue

+ 30 - 2
src/components/ThreadPoll.vue

@@ -1,6 +1,13 @@
 <template>
 	<div class='poll'>
-	
+		<transition name='fade' mode='out-in'>
+			<div class='poll__loading' key='loading' v-if='!poll'>
+				<loading-icon :dark='true'></loading-icon>
+			</div>
+			<div key='poll' v-else>
+				
+			</div>
+		</transition>
 	</div>
 </template>
 
@@ -12,7 +19,18 @@
 	export default {
 		name: 'ThreadPoll',
 		props: ['id'],
-		components: { LoadingIcon }
+		components: { LoadingIcon },
+		data () {
+			return {
+				poll: null
+			}
+		},
+		mounted () {
+			this.axios
+				.get('/api/v1/poll/' + this.id)
+				.then(res => this.poll = res.data)
+				.catch(AjaxErrorHandler(this.$store))
+		}
 	}
 </script>
 
@@ -20,6 +38,16 @@
 	@import '../assets/scss/variables.scss';
 
 	.poll {
+		padding: 1rem;
+		width: 80%;
+		background-color: #fff;
+		position: relative;
+		margin-bottom: 2rem;
+		border-radius: 0.25rem;
 
+		@at-root #{&}__loading {
+			@include loading-overlay();
+			opacity: 1;
+		}
 	}
 </style>