File tree Expand file tree Collapse file tree 1 file changed +20
-34
lines changed
Expand file tree Collapse file tree 1 file changed +20
-34
lines changed Original file line number Diff line number Diff line change 11<template >
2- <div
3- class =" preloader"
4- :style =" preloaderStyle"
5- >
6- <div
7- v-if =" showPercent"
8- class =" percent"
9- >
10- {{ width }} %
11- </div >
12- <div
13- v-if =" showBar"
14- class =" bar"
15- >
16- <div
17- class =" barconfirm"
18- ref =" barconfirm"
19- />
2+ <div class =" preloader" :style =" preloaderStyle" >
3+ <div v-if =" showPercent" class =" percent" >{{ width }} %</div >
4+ <div v-if =" showBar" class =" bar" >
5+ <div class =" barconfirm" ref =" barconfirm" />
206 </div >
217 </div >
228</template >
239<script >
2410export default {
25- name: ' VuePreloader' ,
11+ name: " VuePreloader" ,
2612 data () {
2713 return {
2814 showBar: true ,
29- showPercent: true ,
30- width: 0
31- }
15+ showPercent: true ,
16+ width: 0 ,
17+ };
3218 },
3319 computed: {
3420 preloaderStyle () {
35- return this .width >= 100 ? ' width: 0%' : ' '
36- }
21+ return this .width >= 100 ? " width: 0%" : " " ;
22+ },
3723 },
3824 watch: {
3925 width: {
4026 handler (width ) {
4127 if (width < 100 ) {
4228 setTimeout (() => {
43- this .width = width += 1
44- this .$refs .barconfirm .style .width = this .width + ' % '
45- }, 15 )
29+ this .width = width += 1 ;
30+ this .$refs .barconfirm .style .width = this .width + " % " ;
31+ }, 15 );
4632 } else {
47- this .showBar = false
48- this .showPercent = false
33+ this .showBar = false ;
34+ this .showPercent = false ;
4935 }
50- }
51- }
36+ },
37+ },
5238 },
5339 mounted () {
54- this .width = this .width += 1
55- }
56- }
40+ this .width = this .width += 1 ;
41+ },
42+ };
5743 </script >
5844<style lang="css">
5945.preloader {
You can’t perform that action at this time.
0 commit comments