vue組件實(shí)現(xiàn)進(jìn)度條效果

更新時(shí)間：2018年06月06日 11:14:42 作者：wl_

這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)進(jìn)度條效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)進(jìn)度條效果的具體代碼，供大家參考，具體內(nèi)容如下

一、效果圖

二、代碼

progress-bar.vue

<template>
 <div class="vue-progress-bar default-theme">
  <div class="vue-progress-bar__tip">
   <span class="vue-progress-bar__tiplabel">{{label}}</span>
   <span class="vue-progress-bar__tiptext">{{text}}</span>
  </div>
  <div class="vue-progress-bar__outer">
   <div class="vue-progress-bar__inner" :style="barStyle"></div>
  </div>
 </div>
</template>

<script>
 export default {
  props:{
   label:String,
   text:String,
   height:{
    type: Number,
    default: 0,
    required: true,
    validator: val => val >= 0
   },
   color: {
    type: String,
    default: ''
   },
   percentage:{
    type: Number,
    default: 0,
    required: true,
    validator: val => val >= 0 && val <= 100
   }
  },
  computed:{
   barStyle() {
    const style = {};
    style.width = this.percentage + '%';
    style.height = this.height + 'px';
    style.backgroundColor = this.color;
    return style;
   }
  }
 }
</script>

<style lang="scss" scoped>
 .vue-progress-bar.default-theme{
  .vue-progress-bar__outer {
   background: #eee;
  }
 }

 .vue-progress-bar {
  .vue-progress-bar__tiptext {
   float: right;
  }
 }
</style>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue2和elementUI?實(shí)現(xiàn)落日余暉登錄頁(yè)和滑塊校驗(yàn)功能
這篇文章主要介紹了vue2和elementUI打造落日余暉登錄頁(yè)和滑塊校驗(yàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-06-06
vuecli4配置sass與less詳解
這篇文章主要為大家介紹了vuecli4配置sass與less詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
vue模塊導(dǎo)入報(bào)錯(cuò)問(wèn)題Module not found: Error:[CaseSensi
這篇文章主要介紹了vue模塊導(dǎo)入報(bào)錯(cuò)問(wèn)題Module not found: Error:[CaseSensitivePathsPlugin]，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue3中關(guān)于getCurrentInstance的大坑及解決
這篇文章主要介紹了Vue3中關(guān)于getCurrentInstance的大坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue.js—定義全局變量、函數(shù)的方式
這篇文章主要介紹了vue.js—定義全局變量、函數(shù)的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
詳解vuex中的this.$store.dispatch方法
這篇文章主要介紹了vuex中的this.$store.dispatch方法,必須要用commit(‘SET_TOKEN’,?tokenV)調(diào)用mutations里的方法，才能在store存儲(chǔ)成功，需要的朋友可以參考下
2022-11-11
Vue中的?ref,props,mixin屬性
這篇文章主要介紹了Vue中的ref,props,mixin屬性,文章圍繞主題ref,props,mixin展開(kāi)詳細(xì)內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-05-05
vue3封裝echarts圖表數(shù)據(jù)無(wú)法渲染到頁(yè)面問(wèn)題
這篇文章主要介紹了vue3封裝echarts圖表數(shù)據(jù)無(wú)法渲染到頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-09-09
vue使用Pinia的五個(gè)實(shí)用技巧分享
這篇文章主要為大家詳細(xì)介紹了vue中使用Pinia是五個(gè)實(shí)用技巧,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起了解一下
2023-11-11
VSCode搭建Vue項(xiàng)目的方法
這篇文章主要介紹了VSCode搭建Vue項(xiàng)目的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04