css – Vue dynamically changing background position


I have a list of items that are background-image and I need to go down through each item down (-38px) and display all of them changing only the background-position
enter image description here
Should be displayed in a line
enter image description here
My vue code:
CraftPage:

<template>
    <div class="page-wrap">
        <my-nav-craft/>

        <div class="wrap">
            <div class="construct">
                <div class="left">
                    <h3 class="title">Basic</h3>
                    <ul class="items">
                        <my-li-crafts :items="items"/>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</template>

<script>

    import MyNavCraft from "@/components/navCraft/navCraft";
    import MyLiCrafts from "@/components/navCraft/liCraft";
    export default {
        components: {MyLiCrafts, MyNavCraft},
        data() {
            return {
                items: [
                    {id: 1, posX: 0, posY: 0},
                    {id: 2, posX: 0, posY: -38}
                ]
            }
        },
    }
</script>

<style scoped>
    .page-wrap{
        width: 100%;
        display: flex;
        flex-direction: column;
        max-width: 1200px;
        justify-content: center;
        margin: 0px auto;
    }
    .wrap {
        width: 100%;
        background-color: #c6c6c6;
        border-radius: 20px;
        padding: 26px 23px 8px;
    }
    .left {
        float: left;
        width: 340px;
        clear: both;
        margin-bottom: 5px;
    }
    .items{
        list-style: none;
    }
    .items__item {
        background-image: url("../assets/icon_sprite.png");
        width: 36px;
        height: 36px;
        margin-right: 5px;
        margin-bottom: 5px;
        cursor: pointer;
    }
</style>

My

  • element which needs to change background-position to -38px
    My-li-craft:

    <template>
        <li class="items__item" v-for="item in items" :key="item.id"
            :style="{backgroundPosition: item.posX + 'px' + ' ' + item.posY + 'px' }"
        >
        </li>
    </template>
    
    <script>
        export default {
            name: "my-li-crafts",
            props: {
                items: {
                    type: Array,
                    required: true
                }
            },
            data() {
                return {
                }
            },
            methods: {
                bgPos: function () {
                    let el = this.$el.querySelector('.items__item'), bgWidth = 20, bgHeight = 20;
                    for (let i = 0; i< 3; i++) {
                        return el.css({
                            "background-position": (el.width()-bgWidth+10) + "px " + (el.height()-bgHeight-10) +  "px"
                        })
                    }
                }
            },
            // computed: {
            //     bgPoss: function () {
            //         const el = this.$el.querySelector('.items__item'), bgWidth = 20, bgHeight = 20;
            //         return el.css({
            //             "background-position": (el.width()-bgWidth+10) + "px " + (el.height()-bgHeight-10) +  "px"
            //         })
            //
            //     }
            // }
        }
    </script>
    
    <style scoped>
        .items__item {
            background-image: url("../../assets/icon_sprite.png");
            width: 36px;
            height: 36px;
            margin-right: 5px;
            margin-bottom: 5px;
            cursor: pointer;
        }
    </style>
    


  • Source link

    Latest articles

    Related articles

    Leave a reply

    Please enter your comment!
    Please enter your name here