【_ 記 】vue 三角形步骤条 CSS样式+页面引用

vue 三角形步骤条展示：

CSS样式 页面源码

<template>
    <ul class="triangle_step">
        <li :class="{cur:active>=index}" v-for="(item,index) in stepArr" :style="{width:width}">
            <span>{{item.title}}</span>
            <div v-if="index<stepArr.length-1" :class="active>=index?'jiaoActive':'jiao'"></div>
            <div class="interval"></div>
        </li>
    </ul>
</template>
<script>
    export default{
        props:{
            active:{
                default:0
            },
            stepArr:{
                default:[]
            },
            width:{
                default:'100%'
            }
        },
        watch:{
            active(a){
                if(a<=0){
                    this.$emit('update:active',0)
                    console.log('已经是最小值了'+a)
                }
                if(a>this.stepArr.length-1){
                    this.$emit('update:active',this.stepArr.length-1)
                    console.log('已经是最大值了'+a)
                }
            }
        },
        data(){
            return{

            }
        }
    }
</script>
<style scoped lang="scss">
    *{
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 12px;
    }
    .triangle_step{
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px auto;
        li{
            height: 40px;
            background: #d7d8da;
            color:#666;
            text-align: center;
            line-height: 40px;
            /*width: 20%;*/
            /*flex-basis: 100%;*/
            position: relative;
        }
        li.cur{
            background: #E8514A;
            color:#fff;
        }
        /*三角形绘制*/
        .jiao{
            width: 0;
            height: 0;
            border-top: 20px solid transparent;/*高度一半*/
            border-left: 20px solid #d7d8da; /*调整宽度*/
            border-bottom: 20px solid transparent;/*高度一半*/
            position: absolute;
            right:-20px;/*跟宽度保持一致*/
            top:0;
            z-index: 9999;
        }
        .jiaoActive{
            width: 0;
            height: 0;
            border-top: 20px solid transparent;/*高度一半*/
            border-left: 20px solid #E8514A; /*调整宽度*/
            border-bottom: 20px solid transparent;/*高度一半*/
            position: absolute;
            right:-20px;/*跟宽度保持一致*/
            top:0;
            z-index: 2;
        }
        /*大3个px的边 26-20/2*/
        .interval{
            width: 0;
            height: 0;
            border-top: 26px solid transparent;/*高度一半*/
            border-left: 26px solid #fff; /*调整宽度*/
            border-bottom: 26px solid transparent;/*高度一半*/
            position: absolute;
            right:-26px;/*跟宽度保持一致*/
            top:-6px;
            z-index: 1;
        }
    }
</style>

父页面 引用：

    <template>
              ①  <triangle_step :active.sync="active" :stepArr="stepArr" :width="width"></triangle_step>
            <!--选择订单-->
		<selectOrder :active.sync="active" v-if="stepArr[active].title==='选择订单'"></selectOrder>
		<!--确认订单-->
		<enterOrder :active.sync="active" v-if="stepArr[active].title==='确认订单'"></enterOrder>
		<!--发票信息-->
		<invoiceInfo :active.sync="active" v-if="stepArr[active].title==='确认发票信息'"></invoiceInfo>
		<!--发票信息-->
		<applySuccess :active.sync="active" v-if="stepArr[active].title==='合同申请成功'"></applySuccess>
    </template>
    <script>
              ②  import triangle_step from "@/components/triangle_step/index.vue"
	         import selectOrder from "./step/selectOrder.vue"
	         import enterOrder from "./step/enterOrder.vue"
	         import invoiceInfo from "./step/invoiceInfo.vue"
	         import applySuccess from "./step/applySuccess.vue"
	      ③  components: {
     		    triangle_step,
     		    selectOrder,
		    enterOrder,
		    invoiceInfo,
		    applySuccess
		             }
    </script>