国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

element-ui el-steps自定義進度圖標及完成圖標

這篇具有很好參考價值的文章主要介紹了element-ui el-steps自定義進度圖標及完成圖標。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

element-ui el-steps自定義進度圖標及完成圖標
項目中需要自定義 el-steps的圖標 同時完成時圖標也要進行修改,記錄一下,有寫的不好的地方歡迎大佬們指正:

實現(xiàn)步驟:

首先在templete部分:
el-step中添加一個插槽 slot=“icon”, 為其添加類名,以便于修改樣式

<el-steps class="handlerSteps">
          <el-step
            @click.native="scrollToTop('build')"
            :status="flag_build ? 'success' : 'wait'"
            title="立項"
          >
            <i class="build stepIcon" slot="icon"></i>
          </el-step>
          <el-step
            @click.native="scrollToTop('design')"
            :status="flag_design ? 'success' : 'wait'"
            title="設計"
          >
            <i class="design stepIcon" slot="icon"></i>
          </el-step>
          <el-step
            @click.native="scrollToTop('bidding')"
            :status="flag_bidding ? 'success' : 'wait'"
            title="招標"
          >
            <i class="bidding stepIcon" slot="icon"></i>
          </el-step>
          <el-step
            @click.native="scrollToTop('doing')"
            :status="flag_doing ? 'success' : 'wait'"
            title="施工"
          >
            <i class="doing stepIcon" slot="icon"></i>
          </el-step>
          <el-step
            @click.native="scrollToTop('check')"
            :status="flag_check ? 'success' : 'wait'"
            title="驗收"
          >
            <i class="check stepIcon" slot="icon"></i>
          </el-step>
          <el-step
            @click.native="scrollToTop('payProgress')"
            :status="flag_pay ? 'success' : 'wait'"
            title="進度支付"
          >
            <i class="pay stepIcon" slot="icon"></i>
          </el-step>
        </el-steps>

css部分:
記得不要寫在 scoped中,否則不會生效, 這里是新開了一個style標簽,所以沒有寫穿透
等待節(jié)點自定義圖標:

.handlerSteps{
      .stepIcon{
        width: 35px;
        height: 35px;
        background-size: 100% 100%;
      }
      .build{
        background-image: url("~@/static/images/project/build.png");
      }
      .design{
        background-image: url("~@/static/images/project/design.png");
      }
      .bidding{
        background-image: url("~@/static/images/project/bidding.png");
      }
      .doing{
        background-image: url("~@/static/images/project/doing.png");
      }
      .check{
        background-image: url("~@/static/images/project/check.png");
      }
      .pay{
        background-image: url("~@/static/images/project/pay.png");
      }

成功狀態(tài)自定義圖標:文章來源地址http://www.zghlxwxcb.cn/news/detail-514777.html

.el-step{
        &>.is-success{
          .is-icon{
              i{
              	//默認成功狀態(tài)是在這個偽類中寫的,因此覆蓋掉這個√,寫入自己的圖片
                &:before{
                  content:"";
                }
                width:35px;
                height:35px;
                background-size: 100% 100%;
                background-image: url("~@/static/images/project/done.png");
              }
          }
        }
        .el-step__title{
          text-indent:6px;
        }
      }

到了這里,關于element-ui el-steps自定義進度圖標及完成圖標的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權(quán),不承擔相關法律責任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領支付寶紅包贊助服務器費用

相關文章

  • element-ui控件el-select如何在前面添加icon圖標

    在element-ui中input可以使用prefix-icon=“el-icon-user” 在前面添加icon圖標,但是select自己沒有該屬性。那么如何在element-ui控件el-select前面前面icon圖標 代碼如下(示例): 這里使用了 template #prefix 來替換,因為我使用的是element-plus ,如果使用的是element-ui 則直接使用slot替換

    2024年02月11日
    瀏覽(43)
  • css實現(xiàn)圖標閃爍(Element-UI el-badge標記組件為例)

    css實現(xiàn)圖標閃爍(Element-UI el-badge標記組件為例)

    本文以Element-UI?el-badge標記組件為例,實現(xiàn)el-badge圖標的閃爍,其他html元素也可以使用此方法實現(xiàn)閃爍功能。 實現(xiàn)閃爍功能,主要用到下面3個CSS屬性 1、@keyframes 利用 @keyframes?規(guī)則來創(chuàng)建動畫。 創(chuàng)建動畫的原理是,將一套?CSS?樣式逐漸變化為另一套樣式。 在動畫過程中,您

    2024年02月08日
    瀏覽(83)
  • vue項目element-ui上傳組件自定義方法無法獲取進度

    原因:element-ui中的up-load組件使用時,若用自定義上傳http-request,會重新申明XMLHttpRequest,on-progress里的申明則被覆蓋,無法使用該鉤子,無法添加進度條 方案一:假進度條;寫個假進度條優(yōu)化用戶體驗,使用el-upload組件里on-change方法的status狀態(tài),配合定時器 ,以vue3為例 ,

    2024年02月15日
    瀏覽(24)
  • [element-ui] el-table表格頭添加圖標-鼠標移入顯示el-tooltip提示信息

    [element-ui] el-table表格頭添加圖標-鼠標移入顯示el-tooltip提示信息

    只是單純的想在table中添加圖標和tooltip 在el-table-column中綁定:render-header=“renderPrice” (此方法無法使tooltip換行) 方法二、 使用組件插槽,elementui已封裝好 elementUI表格頭添加圖標-鼠標移入顯示el-tooltip提示信息

    2024年02月11日
    瀏覽(28)
  • element-ui中 Progress 圓形進度條 自定義文字 底色 圓角 文字顏色等修改

    element-ui中 Progress 圓形進度條 自定義文字 底色 圓角 文字顏色等修改

    1.圓形進度條底色修改,非底色修改官方文檔中有說明。deep:樣式穿透 2.圓角修改 stroke-linecap=“square” ,stroke-linecp有三個值,分別為butt/round/square,默認值為round圓角模式 3.進度條中文字修改,有兩種模式,如不需要添加復雜樣式,可使用format屬性自行添加樣式 例: 4.如果需要

    2024年02月11日
    瀏覽(23)
  • element ui中el-dialog如何自定義標題,加圖標

    element ui中el-dialog如何自定義標題,加圖標

    效果圖:

    2024年02月13日
    瀏覽(107)
  • vue+element ui中的el-button自定義icon圖標

    vue+element ui中的el-button自定義icon圖標

    button的icon屬性自定義一個圖標名稱,這個自定義的圖標名稱會默認添加到button下i標簽的class上,我們只需要設置i標簽的樣式就可以了 ##3. 按鈕上使用自定義的icon

    2024年02月05日
    瀏覽(23)
  • element-ui 的el-popover 自定義彈出和關閉

    element-ui 的el-popover 自定義彈出和關閉

    業(yè)務需求: 鼠標懸停打開彈窗,點擊彈窗里面的內(nèi)容后關閉彈窗 Element 中 Popover 彈出框的彈出方式有 hover,click,focus,手動激活幾種方式,根據(jù)業(yè)務需求,可以如下使用: el-popover彈出框 關閉和打開分別用 doClose() 和 doShow() 方法 ,Element UI文檔中沒有提到這兩個方法 通過方

    2024年02月16日
    瀏覽(18)
  • element-ui自定義表頭;el-table自定義表頭;render-header自定義表頭

    element-ui自定義表頭;el-table自定義表頭;render-header自定義表頭

    場景:給表頭設置自定義按鈕,點擊時候 批量下載或做其他事件 給當前的那列設置 :render-header methods設置事件 element-ui自定義表頭鏈接 注意:el-table-column需要去掉label和prop屬性 然后使用插槽 slot

    2024年02月11日
    瀏覽(22)
  • vue elementui 修改步驟條el-steps的樣式

    vue elementui 修改步驟條el-steps的樣式

    感覺以后可能還會用到,在此記錄一下 場景: elementui原有的樣式: 目標樣式: ? 實現(xiàn): ? html代碼: 多加了個居中屬性:align-center css代碼: ?ok啦,如果有更優(yōu)的方法,再優(yōu)化 ? ?

    2024年02月16日
    瀏覽(29)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包,優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包