这是一个Vue组件，用于创建一个带有背景颜色、进度条颜色、内部填充颜色和宽度可定制的进度条。组件通过props接收值，并使用样式属性动态设置元素的样式。此组件适用于前端界面的进度展示。
<template>
<view class="progressContainer" :style="{ background: cbackground }">
<view
class="progress"
:style="{ background: tbackground, width: value + '%' }"
>
<view
class="progress-view"
:style="{
background: sbackground,
width: width,
height: '100%',
position: 'absolute',
right: 0,
}"
></view>
</view>
</view>
</template>
<script>
export default {
name: "details",
data() {
return {
// progress: 80,
};
},
props: {
value: {
type: Number,
},
cbackground: {
type: String,
default: "#f00",
},
sbackground: {
type: String,
default: "#090",
},
tbackground: {
type: String,
default: "#6BCB39",
},
width: {
type: String,
default: "20rpx",
},
},
methods: {},
};
</script>
<style scoped>
.progressContainer {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.progress {
position: absolute;
height: 100%;
}
</style>
扫一扫
1839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
