Vue如何动态修改background-position实现雪碧图固定偏移量逐帧展示

样式调整实现横向排列 #

修改父页面中.items类的样式，添加flex布局实现横向排列：

.items{
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}

优化雪碧图偏移逻辑 #

自动生成偏移量（无需手动配置每个item的posY） #

如果需要适配任意数量的图标，直接在父页面的data中批量生成items数组即可：

data() {
    // 替换为你的雪碧图实际图标总数
    const totalIconNum = 6
    return {
        items: Array.from({length: totalIconNum}, (_, index) => ({
            id: index + 1,
            posX: 0,
            posY: -38 * index
        }))
    }
},

子组件简化（可选） #

如果不需要父组件控制偏移值，也可以直接在子组件的循环中通过索引计算偏移，删除冗余的DOM操作代码即可：

<template>
    <li 
        class="items__item" 
        v-for="(item, index) in items" 
        :key="item.id"
        :style="{backgroundPosition: `0 ${-38 * index}px`}"
    >
    </li>
</template>

<script>
export default {
    name: "my-li-crafts",
    props: {
        items: {
            type: Array,
            required: true
        }
    }
}
</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>

冗余代码清理 #

删除子组件中无效的bgPos方法与注释的computed代码，Vue不推荐直接操作DOM修改样式，通过:style绑定的方式已经可以生效。同时可以删除父组件中重复定义的.items__item样式，由子组件自行维护自身样式即可。

内容的提问来源于stack exchange，提问作者Dmitry