Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x | <template> <div :class="$style.root"> <div :class="$style.track" v-bind="$attrs"> <div :class="$style.trail" :style="trailStyle"></div> </div> <div vusion-slot-name="default"> <slot></slot> <s-empty v-if="!$slots.default && $env.VUE_APP_DESIGNER && !!$attrs['vusion-node-path']"></s-empty> </div> </div> </template> <script> import SEmpty from '../s-empty.vue'; export default { name: 'u-linear-progress', components: { SEmpty, }, props: { percent: { type: Number, default: 0 }, range: { type: Array, default() { return [0, 100]; }, }, }, computed: { maxLength() { return (this.range[1] || 100) - (this.range[0] || 0) + '%'; }, trailStyle() { if (this.$attrs.direction === 'vertical') { return { maxHeight: this.maxLength, height: (Number(this.percent) || 0) + '%', top: this.range[0] + '%', }; } else { return { maxWidth: this.maxLength, width: (Number(this.percent) || 0) + '%', left: this.range[0] + '%', }; } }, }, }; </script> <style module> .root { } .root[direction="vertical"] { display: inline-block; vertical-align: top; height: var(--linear-progress-vertical-height); } .track { overflow: hidden; height: var(--linear-progress-size); border-radius: var(--linear-progress-size); background: var(--linear-progress-track-background); } .root[direction="vertical"] .track { width: var(--linear-progress-size); height: 100%; } .trail { position: relative; float: left; width: 0; height: 100%; border-radius: inherit; font-size: var(--linear-progress-trail-font-size); background: var(--linear-progress-trail-background-primary); color: var(--linear-progress-trail-color); transition: var(--linear-progress-trail-transition); } .root[direction="vertical"] .trail { float: none; width: auto; height: 0; } .track[size="small"] { height: var(--linear-progress-size-small); border-radius: var(--linear-progress-size-small); } .track[size="large"] { height: var(--linear-progress-size-large); border-radius: var(--linear-progress-size-large); } .track[size="huge"] { height: var(--linear-progress-size-huge); border-radius: var(--linear-progress-size-huge); } .track[size="small"][direction="vertical"] { width: var(--linear-progress-size-small); } .track[size="large"][direction="vertical"] { width: var(--linear-progress-size-large); } .track[size="huge"][direction="vertical"] { width: var(--linear-progress-size-huge); } .track[color="success"] .trail { background: var(--linear-progress-trail-background-success); } .track[color="error"] .trail { background: var(--linear-progress-trail-background-error); } </style> |