- N +

vue手写进度条(静态)

原标题:vue手写进度条(静态)

导读:

需求如图(份数会跟随进度条):HTML代码如下:<template><div id="hello"> &...

文章目录 [+]

需求如图(份数会跟随进度条):

snipaste_20190222_092532.jpg

HTML代码如下:

<template>
<div id="hello">
    <div class="box">
        <div class="w">
            <div class="q">日:</div>
            <div class="q red" v-bind:style="{ 'width': qwe}"></div>
            <div class="q">{{proportion[0].day}}</div>
        </div>
        <div class="w">
            <div class="q">月:</div>
            <div class="q red" v-bind:style="{ 'width': asd}"></div>
            <div class="q">{{proportion[1].month}}</div>
        </div>
        <div class="w">
            <div class="q">季:</div>
            <div class="q red" v-bind:style="{ 'width': zxc}"></div>
            <div class="q">{{proportion[2].quarter}}</div>
        </div>
        <div class="w">
            <div class="q">年:</div>
            <div class="q red" v-bind:style="{ 'width': rty}"></div>
            <div class="q">{{proportion[3].year}}</div>
        </div>
    </div>
</div>
</template>

css样式:

<style>
    .box {
        width: 500px;
        height: 200px;
        transform-style: preserve-3d;
        perspective: 200px;
        transform: rotateY(50deg);
    }
    .w {
        text-align: left;
    }
    .red {
        background-color: red;
        height: 20px;
    }
    .q {
        display: inline-block;
    }
</style>

js代码:

<script>
export default {
    name: 'hello',
    data () {
        return {
            proportion: [
                    { day: '64份/98.44%' },
                    { month: '4份/75.0%' },
                    { quarter: '0 份/0%' },
                    { year: '0 份/0%' }
            ],
            qwe: '',
            asd: '',
            zxc: '',
            rty: ''
        }
    },
    methods: {},
    mounted () {
            // 前面的100div的宽度,可根据具体情况改变,.split()截取字符串,等到/后面的百分比,总宽度*百分比除于100,把单位换成px,防止占一整行,把左右div挤成独占一行
            this.qwe = 100 * Number(this.proportion[0].day.split('/')[1].split('%')[0]) / 100 + 'px'
            this.asd = 100 * Number(this.proportion[1].month.split('/')[1].split('%')[0]) / 100 + 'px'
            this.zxc = 100 * Number(this.proportion[2].quarter.split('/')[1].split('%')[0]) / 100 + 'px'
            this.rty = 100 * Number(this.proportion[3].year.split('/')[1].split('%')[0]) / 100 + 'px'
    }
}
</script>


有好的文章希望我们帮助分享和推广,猛戳这里我要投稿

4

0
返回列表
上一篇:
下一篇:

发表评论中国互联网举报中心

快捷回复:

验证码

    评论列表 (暂无评论,共609人参与)参与讨论

    还没有评论,来说两句吧...