欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果

 更新時(shí)間:2021年09月16日 15:02:13   作者:qq_42289686  
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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

演示效果:

結(jié)構(gòu)

progress/index.js

const controller = {
  init: require('./controllers/html'),
  speed: require('./controllers/speed')
}
exports.init = controller.init
exports.speed = controller.speed

progress/controllers/html/index.js

exports.set = () => {
  let dom = document.createElement('div')
  dom.setAttribute('id', 'progress_speed')
  dom.classList.add('progress-box', 'progress-hide')
  dom.innerHTML = '<div class="progress progress-speed-hide" id="progress_box_speed"><div class="speed" style="width:0%;background: #f2f3f5;transition: 0.2s;"></div></div>'
  document.getElementById('app').insertBefore(dom, document.getElementById('app').firstChild)
  let Style = `
              .progress-box{
                width: 100%;
                height: 100%;
                transition: 0.4s;
                position: fixed;
                top: 0;
                left: 0;
                background: rgba(0,0,0,0.5);
                z-index:4002;
              }
              .progress {
                border-radius: 19px;
                background: #f2f3f5;
                width: 80%;
                height: 38px;
                position: fixed;
                top: calc(50% - 19px);
                left: calc(50% - 40%);
                z-index:2000;
                transition: 0.4s;
                opacity: 1;
              }
              .progress-hide{
                border-radius: 19px;
                width: 0%;
                height: 0%;
                top: calc(50% - 0%);
                left: calc(50% - 0%);
                transition: 0.2s;
                overflow: hidden;
              }
              .progress-speed-hide{
                width: 0%;
                height: 0px;
                transition: 0.6s;
                opacity: 0;
                overflow: hidden;
              }
              .speed {
                border-radius: 19px;
                background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
                background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
                background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
                height: 38px;
                -webkit-background-size: 40px 40px;
                background-size: 40px 40px
                width: 0%;
                transition: 0.3s;
                background-color:#409EFF;
                -o-animation: progress-bar-stripes 2s linear infinite;
                animation: progress-bar-stripes 2s linear infinite;
              }
              .speed-success{
                width: 100%;
                background-color: #67c23a;
              }
              @-webkit-keyframes progress-bar-stripes {
                  from {
                      background-position: 40px 0
                  }
              
                  to {
                      background-position: 0 0
                  }
              }
              
              @-o-keyframes progress-bar-stripes {
                  from {
                      background-position: 40px 0
                  }
              
                  to {
                      background-position: 0 0
                  }
              }
              
              @keyframes progress-bar-stripes {
                  from {
                      background-position: 40px 0
                  }
              
                  to {
                      background-position: 0 0
                  }
              }`
  let styleElement = document.getElementById('progress')
  if (!styleElement) {
    styleElement = document.createElement('style')
    styleElement.type = 'text/css'
    styleElement.id = 'progress'
    document.getElementsByTagName('head')[0].appendChild(styleElement)
    styleElement.appendChild(document.createTextNode(Style))
  }
}

progress/controllers/speed/index.js

exports.run = (time) => {
  document.getElementById('progress_speed').classList.remove('progress-hide')
  time = time * 100
  let dom = document.getElementById('progress_box_speed')
  dom.classList.remove('progress-speed-hide')
  dom.getElementsByClassName('speed')[0].classList.remove('speed-success')
  setTimeout(() => {
    dom.getElementsByClassName('speed')[0].setAttribute('style', 'width:' + time + '%')
  }, 10)
  if (time >= 100) {
    setTimeout(() => {
      dom.getElementsByClassName('speed')[0].classList.add('speed-success')
      dom.getElementsByClassName('speed')[0].setAttribute('style', 'width:100%')
      dom.classList.add('progress-speed-hide')
      setTimeout(() => {
        document.getElementById('progress_speed').classList.add('progress-hide')
        dom.getElementsByClassName('speed')[0].setAttribute('style', 'width:0%')
      }, 900)
    }, 1000)
  }
}

如何使用?

main.js中導(dǎo)入(根據(jù)你自己新建文件的路徑為基準(zhǔn),這是我自己的路徑)

import progress from './common/progress'

全局掛載

Vue.prototype.$progress = progress

結(jié)構(gòu)

使用:

this.$progress.init.set()
this.$progress.speed.run('10.555555') // 這樣進(jìn)度條就走到10.555555%了

進(jìn)度條走到100之后,會(huì)自動(dòng)隱藏!可以全局掛載,然后各種需要進(jìn)度條的地方再使用!

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

相關(guān)文章

  • Vue通過(guò)moment插件實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天

    Vue通過(guò)moment插件實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天

    這篇文章主要介紹了Vue 結(jié)合插件moment 實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2023-10-10
  • Vue 一鍵清空表單的實(shí)現(xiàn)方法

    Vue 一鍵清空表單的實(shí)現(xiàn)方法

    這篇文章主要介紹了Vue 一鍵清空表單的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • vue在標(biāo)簽中如何使用(data-XXX)自定義屬性并獲取

    vue在標(biāo)簽中如何使用(data-XXX)自定義屬性并獲取

    這篇文章主要介紹了vue在標(biāo)簽中如何使用(data-XXX)自定義屬性并獲取,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解

    Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解

    這篇文章主要為大家介紹了Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-10-10
  • Vue深入理解之v-for中key的真正作用

    Vue深入理解之v-for中key的真正作用

    為了給Vue一個(gè)提示,以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份,從而重用和重新排序現(xiàn)有元素,你需要為每項(xiàng)提供一個(gè)唯一key屬性,下面這篇文章主要給大家介紹了關(guān)于Vue深入理解之v-for中key的真正作用,需要的朋友可以參考下
    2022-05-05
  • vue項(xiàng)目啟動(dòng)端口更改的實(shí)現(xiàn)

    vue項(xiàng)目啟動(dòng)端口更改的實(shí)現(xiàn)

    在Vue前端項(xiàng)目中,可以通過(guò)修改配置文件來(lái)指定啟動(dòng)的端口號(hào),本文就來(lái)介紹 一下vue項(xiàng)目啟動(dòng)端口更改的實(shí)現(xiàn),感興趣的可以了解一下
    2023-10-10
  • vue中echarts3.0自適應(yīng)的方法

    vue中echarts3.0自適應(yīng)的方法

    這篇文章主要介紹了vue中echarts3.0自適應(yīng),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02
  • el-table樹形數(shù)據(jù)序號(hào)排序處理方案

    el-table樹形數(shù)據(jù)序號(hào)排序處理方案

    這篇文章主要介紹了el-table樹形數(shù)據(jù)序號(hào)排序處理方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2024-03-03
  • 手把手教你如何使用Vite構(gòu)建vue項(xiàng)目

    手把手教你如何使用Vite構(gòu)建vue項(xiàng)目

    這篇文章主要介紹了如何使用Vite構(gòu)建vue項(xiàng)目的相關(guān)資料,本文主要介紹了Vite構(gòu)建Vue項(xiàng)目的詳細(xì)步驟,包括檢查node.js和pnpm的安裝,構(gòu)建Vite+Vue項(xiàng)目,利用HBuilderX導(dǎo)入項(xiàng)目,需要的朋友可以參考下
    2024-10-10
  • vue利用openlayers實(shí)現(xiàn)動(dòng)態(tài)軌跡

    vue利用openlayers實(shí)現(xiàn)動(dòng)態(tài)軌跡

    這篇文章主要為大家介紹了vue利用openlayers實(shí)現(xiàn)動(dòng)態(tài)軌跡,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11

最新評(píng)論