[JavaScript知识库]vue自定义竖向进度条

<template>

? <view class="progressContainer">

? ? <view class="progress" :style="{ height: progress + '%' }">

? ? ? <view class="progress-view"></view>

? ? </view>

? </view>

</template>

<script>

export default {

? name: "details",

? data() {

? ? return {

? ? ? progress: 80,

? ? };

? },

? methods: {},

? created() {},

};

</script>

<style scoped>

.progressContainer {

? position: relative;

? width: 20px;

? height: 100%;

? background-color: #ddd;

? overflow: hidden;

}

.progress {

? position: absolute;

? background-color: #1c8de0;

? width: 20px;

? bottom: 0;

}

.progress-view {

? width: 20px;

? height: 20px;

? background: #f00;

? position: absolute;

? top: 0;

}

</style>

?