公司小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

142 lines
3.2 KiB

<template>
<view
class="u-line-progress"
:style="[$u.addStyle(customStyle)]"
>
<view
class="u-line-progress__background"
ref="u-line-progress__background"
:style="[{
backgroundColor: inactiveColor,
height: $u.addUnit(height),
}]"
>
</view>
<view
class="u-line-progress__line"
:style="[progressStyle]"
>
<slot>
<text v-if="showText && percentage >= 10" class="u-line-progress__text">{{innserPercentage + '%'}}</text>
</slot>
</view>
</view>
</template>
<script>
import props from './props.js';
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom')
// #endif
/**
* lineProgress 线型进度条
* @description 展示操作或任务的当前进度,比如上传文件,是一个线形的进度条。
* @tutorial https://www.uviewui.com/components/lineProgress.html
* @property {String} activeColor 激活部分的颜色 ( 默认 '#19be6b' )
* @property {String} inactiveColor 背景色 ( 默认 '#ececec' )
* @property {String | Number} percentage 进度百分比,数值 ( 默认 0 )
* @property {Boolean} showText 是否在进度条内部显示百分比的值 ( 默认 true )
* @property {String | Number} height 进度条的高度,单位px ( 默认 12 )
*
* @example <u-line-progress :percent="70" :show-percent="true"></u-line-progress>
*/
export default {
name: "u-line-progress",
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
data() {
return {
lineWidth: 0,
}
},
watch: {
percentage(n) {
this.resizeProgressWidth()
}
},
computed: {
progressStyle() {
let style = {}
style.width = this.lineWidth
style.backgroundColor = this.activeColor
style.height = uni.$u.addUnit(this.height)
return style
},
innserPercentage() {
// 控制范围在0-100之间
return uni.$u.range(0, 100, this.percentage)
}
},
mounted() {
this.init()
},
methods: {
init() {
uni.$u.sleep(20).then(() => {
this.resizeProgressWidth()
})
},
getProgressWidth() {
// #ifndef APP-NVUE
return this.$uGetRect('.u-line-progress__background')
// #endif
// #ifdef APP-NVUE
// 返回一个promise
return new Promise(resolve => {
dom.getComponentRect(this.$refs['u-line-progress__background'], (res) => {
resolve(res.size)
})
})
// #endif
},
resizeProgressWidth() {
this.getProgressWidth().then(size => {
const {
width
} = size
// 通过设置的percentage值,计算其所占总长度的百分比
this.lineWidth = width * this.innserPercentage / 100 + 'px'
})
}
}
}
</script>
<style lang="scss">
@import "../../libs/css/components.scss";
.u-line-progress {
align-items: stretch;
position: relative;
@include flex(row);
flex: 1;
&__background {
background-color: #ececec;
border-radius: 100px;
flex: 1;
}
&__line {
position: absolute;
top: 0;
left: 0;
bottom: 0;
align-items: center;
@include flex(row);
color: #ffffff;
border-radius: 100px;
transition: width 0.5s ease;
justify-content: flex-end;
}
&__text {
font-size: 10px;
align-items: center;
text-align: right;
color: #FFFFFF;
margin-right: 5px;
transform: scale(0.9);
}
}
</style>