动态子列表

<template>
    <div class="canvas">
        <div class="tabContainer">
            <div class="publicTab">标签中心</div>
            <div class="publicTab">标签复盘</div>
            <div class="publicTab">标签选购</div>
        </div>
        <div id="canvas"
            :style="{width:cWidth,height:'30px'}">
            <div class="lineDash"
                :style="{marginLeft:calLeft,width:'3px',marginRight:calLeft}"
                v-for="(item ,index) in dataList.length-2"
                :key='index'></div>
        </div>
        <div class="mainTextContainer">
            <div class="contextInline"
                id="allText">
                <div class="publicTextContainer"
                    v-for="(item,index) in dataList"
                    :key="index">{{item}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dataList: [
                "复购中心",
                "优选中心中心",
                "重采购",
                
            ],
            cWidth: "",
            calLeft: "",
        };
    },
    computed: {
        // calLeft(){
        //  return (parseInt(this.cWidth)/this.dataList.length)+'px'
        // }
    },
    created() {},
    mounted() {
        this.getWidth();
        // this.canvas();
    },
    methods: {
        canvas() {
            var canvas = document.querySelector("#canvas");
            var c = canvas.getContext("2d");
            // ctx(0, 0, 500, 0, "black", 1);
            // ctx(500, 0, 500, 30, "black", 1);
            // ctx(500, 30, 0, 30, "black", 1);
            // ctx(0, 30, 0, 0, "black", 1);
            function ctx(x1, y1, x2, y2, color, width) {
                c.beginPath();
                c.moveTo(x1, y1);
                c.lineTo(x2, y2);
                c.strokeStyle = color;
                c.lineWidth = width;
                c.stroke();
                c.closePath();
            }

            // 画一条虚线
            // for (var i = 0; i < 50; i++) {
            //     ctx(0 + i * 10, 0, 5 + i * 10, 0, "black", 1);
            // }
            // for (var i = 0; i < 6; i++) {
            //     ctx(500, 0 + i * 10, 500, 5 + i * 10, "black", 1);
            // }
            // for (var i = 0; i < 50; i++) {
            //     ctx(500 - i * 10, 30, 495 - i * 10, 30, "black", 1);
            // }
            // for (var i = 0; i < 6; i++) {
            //     ctx(0, 0 + i * 10, 0, 5 + i * 10, "black", 1);
            // }
            // for (var i = 0; i < 6; i++) {
            //     ctx(248, 0 + i * 10, 248, 5 + i * 10, "black", 1);
            // }

            //虚线数组方法
            c.setLineDash([5, 5]);
            c.moveTo(0, 0);
            c.lineTo(this.cWidth, 0);
            c.strokeStyle = "red";
            c.stroke();
        },
        //封装一条直线的画法
        ctx(x1, y1, x2, y2, color, width) {
            c.beginPath();
            c.moveTo(x1, y1);
            c.lineTo(x2, y2);
            c.strokeStyle = color;
            c.lineWidth = width;
            c.stroke();
            c.closePath();
        },
        // 获取元素的宽度
        getWidth() {
            // debugger
            var calWidth = document.querySelector("#allText");
            console.log("总宽度", calWidth.offsetWidth);
            var oneCalWidth = document.querySelector(".publicTextContainer");
            console.log("一个宽度", oneCalWidth.offsetWidth);
            this.cWidth =
                calWidth.offsetWidth - 2 * oneCalWidth.offsetWidth + "px";
            // this.calLeft = (parseInt(this.cWidth)/this.dataList.length-1)/2+'px'
            this.calLeft =
                parseInt(this.cWidth) / (this.dataList.length - 1) / 2 + "px";

            //获取数组长度
        },
    },
};
</script>

<style scoped lang="less">
.lineDash {
    width: 2px;
    height: 30px;
    border-left: 1px dashed black;
    display: inline-block;
}
.contextInline {
    display: inline-block;
}
.tabContainer {
    margin-bottom: 20px;
    .publicTab {
        display: inline-block;
        margin: 0 50px;
    }
}
.mainTextContainer {
    .publicTextContainer {
        display: inline-block;
        margin: 0 50px;
        width: 100px;
    }
}
#canvas {
    margin: 0 auto;
    border-top: 1px dashed black;
    border-left: 1px dashed black;
    border-right: 1px dashed black;
}
</style>