026: el-progress reverse countdown display in vue

insert image description here

No. 026

View column directory: VUE ------ element UI

column goal

Under the control of the joint technology stack of vue and element UI, this column provides effective source code examples and introduction of information points to achieve flexible use.

(1) Provide some basic operations of vue2: installation, reference, template use, computed, watch, life cycle (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated, errorCaptured, components,), $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else , v-else-if, v-on, v-pre, v-cloak, v-once, v-model, v-html, v-text, keep-alive, slot-scope, filters, v-bind,. stop, .native, directives, mixins, render, internationalization, Vue Router, etc.

（2）提供element UI的经典操作：安装，引用，国际化，el-row，el-col，el-button，el-link，el-radio，el-checkbox，el-input，el-select, el -cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form , el-table, el-tree, el-pagination, el-badge, el-avatar, el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $ message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el- popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop，v-infinite-scroll， el-drawer等

Contents of this article

demand background

In the development of the vue project, when it comes to the usage of traffic, the el-progress progress bar is used to display the current status of traffic. Since the traffic is getting less and less, it should be displayed in a reverse way. The el-progress example is all in a positive way. We have made a small modification here to achieve the desired effect, as shown in the figure.

example effect

insert image description here

Sample source code (53 lines in total)

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [email protected]
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2022-09-05
*/

<template>
	<div class="container">
		<div class="top">
			<h3>vue中el-progress逆向倒计时方式显示 </h3>
			<div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
		</div>
		<el-progress :percentage="value1" :stroke-width="18"  :text-inside="true"  ></el-progress>
        <el-progress :percentage="value2" :stroke-width="28"  :text-inside="true"  status="success"></el-progress>
        <el-progress :percentage="value3" :stroke-width="38"  :text-inside="true"  status="warning"></el-progress>
        <el-progress :percentage="value4" :stroke-width="48"  :text-inside="true"  status="exception"></el-progress>
        <el-progress type="circle" :percentage="55" status="success"></el-progress>
	</div>
</template>

<script>

	export default {
    
    
		data() {
    
    
			return {
    
    
				value1:40,
				value2:50,
				value3:60,
                value4:70,
			}
		},

	}
</script>
<style scoped>
	.container {
    
    
		width: 1000px;
		height: 540px;
		margin: 50px auto;
		border: 1px solid orange;
	}

	.top{
    
    
		margin:0 auto 30px; padding:10px 0;
		background:coral;
	}
	
	>>>.el-progress-bar__inner{
    
    text-align: right;left: auto;right: 0; border: 1px solid #fff;}
    >>>.el-progress-bar{
    
     margin-bottom:20px;}
</style>

core code

The solution to the problem is to modify the style of el-progress, left: auto;right: 0; this is the core

	>>>.el-progress-bar__inner{text-align: right;left: auto;right: 0; border: 1px solid #fff;}