技術標籤：vuehtml元件化

需求

今天做專案的時候遇到一個需求，左右方向都要有的進度條，並且背景需要是半透明的，檢視各元件庫沒有符合需求的，只能自己動手擼一個。

具體程式碼

具體的頁面結構是這樣的，還是很簡單的，就是大div套小div控制長度，第一版寫的時候是左右分開顯示，設定一個值來控制是左側還是右側的進度條，後面發現因為中間還要顯示月份，不好對齊，所以改成了下面這版。

html程式碼

<template>
    <div class="big-box">
        <div class="out">
 

            <div class="in" :style="{'width':linelwidth+'%'}"></div>
        </div>
        <b>{{mothNumber}}月</b>
        <div class="out-green">
            <div class="in-green" :style="{'width':linerwidth+'%'}"
 
></div>
        </div>
    </div>    
</template>

js程式碼

如果是左右分開其實只需要一個值來控制長度，但是因為第二版發現要一起設定所以只能設定兩個傳值。
第一版中還有一個值是用來控制顯示左進度條還是右進度條，只需要用這個值配合v-if顯示是out還是out-green就好了，當然友友們也可以根據自己的需求自己改動。

<script>
export default {
    name: 'ProgressLine',
    props:{
        linelwidth: {
 

            type: Number,
            default: function() {
                return 0
            }
        },
        linerwidth: {
            type: Number,
            default: function() {
                return 0
            }
        },
        mothNumber:{
            type: Number,
            default: function(){
                return 1
            }
        }   
    }
}
</script>

css程式碼

<style lang='scss'>
    .big-box{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 5px 0;
    }
    .out{
        width: 100px;
        height: 10px;
        background: #05255e;
        border-radius: 5px;       
        .in{
            float: right;
            height: 10px;
            border-radius: 5px;
            background: #01d2ec;
        }
    }
    .out-green{
        width: 100px;
        height: 10px;
        background: #04383e;
        border-radius: 5px;
        .in-green{
            float: left;
            height: 10px;
            border-radius: 5px;
            background: #05ca3d;
        }
    }
    b{
        display: flex;
        justify-content: center;
        align-items: center;
        background: #223355;
        color: white;
        border: 1px solid #0e61bb;
        width: 40px;
        height: 16px;
        font-size: 12px;
        border-radius: 8px;
        margin: 0 10px;
    }
</style>

父元件呼叫

引用然後註冊元件

<script>
import ProgressLine  from "../components/progressLine"
export default {

    name: 'BigScreen',
    components: {
        'progress-line':ProgressLine
    },
    data () {
        return {

        }
    },
    methods:{
        
    }
}
</script>

呼叫元件情況

<progress-line :linelwidth="50" :linerwidth="30" :moth-number='11'/>

總結

剛開始做前端，之前封裝元件的經驗不多，所以把本次的經歷記錄下來。不是很難，但是直接用各大元件庫確實不太好實現這種需求。自己擼一個相比較起來靈活很多。再就是註冊元件，呼叫元件的時候還是不太熟卡了一會，駝峰大小寫沒有寫好，所以沒有呼叫成功，還好最後解決了。