| commit | author | age | ||
| e3ba12 | 1 | <template> |
| Z | 2 | <view |
| 3 | class="u-line-progress" | |
| 4 | :style="[$u.addStyle(customStyle)]" | |
| 5 | > | |
| 6 | <view | |
| 7 | class="u-line-progress__background" | |
| 8 | ref="u-line-progress__background" | |
| 9 | :style="[{ | |
| 10 | backgroundColor: inactiveColor, | |
| 11 | height: $u.addUnit(height), | |
| 12 | }]" | |
| 13 | > | |
| 14 | </view> | |
| 15 | <view | |
| 16 | class="u-line-progress__line" | |
| 17 | :style="[progressStyle]" | |
| 18 | > | |
| 19 | <slot> | |
| 20 | <text v-if="showText && percentage >= 10" class="u-line-progress__text">{{innserPercentage + '%'}}</text> | |
| 21 | </slot> | |
| 22 | </view> | |
| 23 | </view> | |
| 24 | </template> | |
| 25 | ||
| 26 | <script> | |
| 27 | import props from './props.js'; | |
| 28 | // #ifdef APP-NVUE | |
| 29 | const dom = uni.requireNativePlugin('dom') | |
| 30 | // #endif | |
| 31 | /** | |
| 32 | * lineProgress 线型进度条 | |
| 33 | * @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。 | |
| 34 | * @tutorial https://www.uviewui.com/components/lineProgress.html | |
| 35 | * @property {String} activeColor 激活部分的颜色 ( 默认 '#19be6b' ) | |
| 36 | * @property {String} inactiveColor 背景色 ( 默认 '#ececec' ) | |
| 37 | * @property {String | Number} percentage 进度百分比，数值 ( 默认 0 ) | |
| 38 | * @property {Boolean} showText 是否在进度条内部显示百分比的值 ( 默认 true ) | |
| 39 | * @property {String | Number} height 进度条的高度，单位px ( 默认 12 ) | |
| 40 | * | |
| 41 | * @example <u-line-progress :percent="70" :show-percent="true"></u-line-progress> | |
| 42 | */ | |
| 43 | export default { | |
| 44 | name: "u-line-progress", | |
| 45 | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], | |
| 46 | data() { | |
| 47 | return { | |
| 48 | lineWidth: 0, | |
| 49 | } | |
| 50 | }, | |
| 51 | watch: { | |
| 52 | percentage(n) { | |
| 53 | this.resizeProgressWidth() | |
| 54 | } | |
| 55 | }, | |
| 56 | computed: { | |
| 57 | progressStyle() { | |
| 58 | let style = {} | |
| 59 | style.width = this.lineWidth | |
| 60 | style.backgroundColor = this.activeColor | |
| 61 | style.height = uni.$u.addUnit(this.height) | |
| 62 | return style | |
| 63 | }, | |
| 64 | innserPercentage() { | |
| 65 | // 控制范围在0-100之间 | |
| 66 | return uni.$u.range(0, 100, this.percentage) | |
| 67 | } | |
| 68 | }, | |
| 69 | mounted() { | |
| 70 | this.init() | |
| 71 | }, | |
| 72 | methods: { | |
| 73 | init() { | |
| 74 | uni.$u.sleep(20).then(() => { | |
| 75 | this.resizeProgressWidth() | |
| 76 | }) | |
| 77 | }, | |
| 78 | getProgressWidth() { | |
| 79 | // #ifndef APP-NVUE | |
| 80 | return this.$uGetRect('.u-line-progress__background') | |
| 81 | // #endif | |
| 82 | ||
| 83 | // #ifdef APP-NVUE | |
| 84 | // 返回一个promise | |
| 85 | return new Promise(resolve => { | |
| 86 | dom.getComponentRect(this.$refs['u-line-progress__background'], (res) => { | |
| 87 | resolve(res.size) | |
| 88 | }) | |
| 89 | }) | |
| 90 | // #endif | |
| 91 | }, | |
| 92 | resizeProgressWidth() { | |
| 93 | this.getProgressWidth().then(size => { | |
| 94 | const { | |
| 95 | width | |
| 96 | } = size | |
| 97 | // 通过设置的percentage值，计算其所占总长度的百分比 | |
| 98 | this.lineWidth = width * this.innserPercentage / 100 + 'px' | |
| 99 | }) | |
| 100 | } | |
| 101 | } | |
| 102 | } | |
| 103 | </script> | |
| 104 | ||
| 105 | <style lang="scss" scoped> | |
| 106 | @import "../../libs/css/components.scss"; | |
| 107 | ||
| 108 | .u-line-progress { | |
| 109 | align-items: stretch; | |
| 110 | position: relative; | |
| 111 | @include flex(row); | |
| 112 | flex: 1; | |
| 113 | overflow: hidden; | |
| 114 | border-radius: 100px; | |
| 115 | ||
| 116 | &__background { | |
| 117 | background-color: #ececec; | |
| 118 | border-radius: 100px; | |
| 119 | flex: 1; | |
| 120 | } | |
| 121 | ||
| 122 | &__line { | |
| 123 | position: absolute; | |
| 124 | top: 0; | |
| 125 | left: 0; | |
| 126 | bottom: 0; | |
| 127 | align-items: center; | |
| 128 | @include flex(row); | |
| 129 | color: #ffffff; | |
| 130 | border-radius: 100px; | |
| 131 | transition: width 0.5s ease; | |
| 132 | justify-content: flex-end; | |
| 133 | } | |
| 134 | ||
| 135 | &__text { | |
| 136 | font-size: 10px; | |
| 137 | align-items: center; | |
| 138 | text-align: right; | |
| 139 | color: #FFFFFF; | |
| 140 | margin-right: 5px; | |
| 141 | transform: scale(0.9); | |
| 142 | } | |
| 143 | } | |
| 144 | </style> | |
