记录一次使用element-ui 进度条的示例程序

最新推荐文章于 2024-09-10 16:50:14 发布

fangdengfu123

最新推荐文章于 2024-09-10 16:50:14 发布

阅读量7.9k

点赞数

分类专栏： js vue

本文链接：https://blog.csdn.net/fangdengfu123/article/details/85251302

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

在线调试地址

HTML

@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<div id="app">
	<div>
		<el-progress :text-inside="true" :stroke-width="18" :percentage="used" :color="color"></el-progress>
	</div>
	<div>
		<el-input v-model="used" placeholder="请输入内容"></el-input>
	</div>

</div>

js

var app = new Vue({
	el: '#app',
  data: {
  	used: 50,
    color: 'red'
  },
  methods: {
  	
  },
  watch: {
  	used: function(v, v2){
    	if(v >= 80){
      	this.color = "red";
      } else if (v >= 60){
      	this.color = "orange";
      } else {
      	this.color = "blue";
      }
    }
  }
});

在列表中使用：

html

<td>
	<div>
		<el-progress :text-inside="true" :stroke-width="18" :percentage="item.used" :color="item.used|color"></el-progress>
	</div>
</td>

js

Vue.filter('color', function (input) {
    if (input == null){
        return "#f56c6c";
    }
    if (typeof input != "number"){
        return "#f56c6c";
    }
    if (input >= 90){
        return "#f56c6c";
    } else if (input >= 80){
        return "orange";
    } else {
        return "#409EFF";
    }
});