|
| 1 | +<template> |
| 2 | + <view class="u-progress" :style="{ |
| 3 | + borderRadius: round ? '100rpx' : 0, |
| 4 | + height: height + 'rpx', |
| 5 | + backgroundColor: inactiveColor |
| 6 | + }"> |
| 7 | + <view :class="[ |
| 8 | + type ? `u-type-${type}-bg` : '', |
| 9 | + striped ? 'u-striped' : '', |
| 10 | + striped && stripedActive ? 'u-striped-active' : '' |
| 11 | + ]" class="u-active" :style="[progressStyle]"> |
| 12 | + <slot v-if="$slots.default || $slots.$default" /> |
| 13 | + <block v-else-if="showPercent"> |
| 14 | + {{percent + '%'}} |
| 15 | + </block> |
| 16 | + </view> |
| 17 | + </view> |
| 18 | +</template> |
| 19 | + |
| 20 | +<script> |
| 21 | + /** |
| 22 | + * lineProgress 线型进度条 |
| 23 | + * @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。 |
| 24 | + * @tutorial https://www.uviewui.com/components/lineProgress.html |
| 25 | + * @property {String Number} percent 进度条百分比值，为数值类型，0-100 |
| 26 | + * @property {Boolean} round 进度条两端是否为半圆（默认true） |
| 27 | + * @property {String} type 如设置，active-color值将会失效 |
| 28 | + * @property {String} active-color 进度条激活部分的颜色（默认#19be6b） |
| 29 | + * @property {String} inactive-color 进度条的底色（默认#ececec） |
| 30 | + * @property {Boolean} show-percent 是否在进度条内部显示当前的百分比值数值（默认true） |
| 31 | + * @property {String Number} height 进度条的高度，单位rpx（默认28） |
| 32 | + * @property {Boolean} striped 是否显示进度条激活部分的条纹（默认false） |
| 33 | + * @property {Boolean} striped-active 条纹是否具有动态效果（默认false） |
| 34 | + * @example <u-line-progress :percent="70" :show-percent="true"></u-line-progress> |
| 35 | + */ |
| 36 | + export default { |
| 37 | + name: "u-line-progress", |
| 38 | + props: { |
| 39 | + // 两端是否显示半圆形 |
| 40 | + round: { |
| 41 | + type: Boolean, |
| 42 | + default: true |
| 43 | + }, |
| 44 | + // 主题颜色 |
| 45 | + type: { |
| 46 | + type: String, |
| 47 | + default: '' |
| 48 | + }, |
| 49 | + // 激活部分的颜色 |
| 50 | + activeColor: { |
| 51 | + type: String, |
| 52 | + default: '#19be6b' |
| 53 | + }, |
| 54 | + inactiveColor: { |
| 55 | + type: String, |
| 56 | + default: '#ececec' |
| 57 | + }, |
| 58 | + // 进度百分比，数值 |
| 59 | + percent: { |
| 60 | + type: Number, |
| 61 | + default: 0 |
| 62 | + }, |
| 63 | + // 是否在进度条内部显示百分比的值 |
| 64 | + showPercent: { |
| 65 | + type: Boolean, |
| 66 | + default: true |
| 67 | + }, |
| 68 | + // 进度条的高度，单位rpx |
| 69 | + height: { |
| 70 | + type: [Number, String], |
| 71 | + default: 28 |
| 72 | + }, |
| 73 | + // 是否显示条纹 |
| 74 | + striped: { |
| 75 | + type: Boolean, |
| 76 | + default: false |
| 77 | + }, |
| 78 | + // 条纹是否显示活动状态 |
| 79 | + stripedActive: { |
| 80 | + type: Boolean, |
| 81 | + default: false |
| 82 | + } |
| 83 | + }, |
| 84 | + data() { |
| 85 | + return { |
| 86 | +
|
| 87 | + } |
| 88 | + }, |
| 89 | + computed: { |
| 90 | + progressStyle() { |
| 91 | + let style = {}; |
| 92 | + style.width = this.percent + '%'; |
| 93 | + if(this.activeColor) style.backgroundColor = this.activeColor; |
| 94 | + return style; |
| 95 | + } |
| 96 | + }, |
| 97 | + methods: { |
| 98 | +
|
| 99 | + } |
| 100 | + } |
| 101 | +</script> |
| 102 | + |
| 103 | +<style lang="scss" scoped> |
| 104 | + @import "../../libs/css/style.components.scss"; |
| 105 | + |
| 106 | + .u-progress { |
| 107 | + overflow: hidden; |
| 108 | + height: 15px; |
| 109 | + /* #ifndef APP-NVUE */ |
| 110 | + display: inline-flex; |
| 111 | + /* #endif */ |
| 112 | + align-items: center; |
| 113 | + width: 100%; |
| 114 | + border-radius: 100rpx; |
| 115 | + } |
| 116 | +
|
| 117 | + .u-active { |
| 118 | + width: 0; |
| 119 | + height: 100%; |
| 120 | + align-items: center; |
| 121 | + @include vue-flex; |
| 122 | + justify-items: flex-end; |
| 123 | + justify-content: space-around; |
| 124 | + font-size: 20rpx; |
| 125 | + color: #ffffff; |
| 126 | + transition: all 0.4s ease; |
| 127 | + } |
| 128 | +
|
| 129 | + .u-striped { |
| 130 | + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); |
| 131 | + background-size: 39px 39px; |
| 132 | + } |
| 133 | +
|
| 134 | + .u-striped-active { |
| 135 | + animation: progress-stripes 2s linear infinite; |
| 136 | + } |
| 137 | +
|
| 138 | + @keyframes progress-stripes { |
| 139 | + 0% { |
| 140 | + background-position: 0 0; |
| 141 | + } |
| 142 | +
|
| 143 | + 100% { |
| 144 | + background-position: 39px 0; |
| 145 | + } |
| 146 | + } |
| 147 | +</style> |
0 commit comments