CSS Sprite app in Vue and digital switch demo
<template>
<div class= "Total" >
<div class= "Content" >
<span class= "number" v-for= "Item in Numberobj": class= "Item.classobj" ></span>
</div>
</div>
</template>
<script type= "Text/babel" >
Export Default {
Data () {
return {
Total: ' 12451 ',
Numberobj: [
{
Classobj: "
},
{
Classobj: "
},
{
Classobj: "
},
{
Classobj: "
},
{
Classobj: "
},
{
Classobj: "
},
{
Classobj: "
},
{
Classobj: "
},
{
Classobj: "
}
]
};
},
Mounted () {
SetTimeout (function () {
This.total = 12451;
}, 1000 * 30);
},
Watch: {
' Total ' (newval, Oldval) {
This.total = newval;
This.refresh ();
}
},
Methods: {
Refresh:function () {
Let length = this.total.toString (). length;
for (Let i = 1; I <= length; i++) {
Let _number = parseint (this.total% Math.pow (ten, I)/Math.pow (Ten, (i-1)));
This.numberobj[9-i].classobj = [' position_ ' + _number, ' highLight '];
}
}
}
};
</script>
. number {
Flex:none;
margin:0 2px;
height:34px;
width:21px;
Background-image:url ("/image/number/css-sprites-x1.png");
@media only screen and (Min-device-pixel-ratio:2) {
Background-image:url ("/image/number/css-sprites-x2.png");
}
&.highlight{
Background-image:url ("/image/number/css-sprites-highlight-x1.png");
@media only screen and (Min-device-pixel-ratio:2) {
Background-image:url ("/image/number/css-sprites-highlight-x2.png");
}
}
BACKGROUND-POSITION:48PX 0;
&.POSITION_0 {
Background-position: -1px 0;
}
&.position_1 {
Background-position: -22px 0;
}
&.position_2 {
Background-position: -43px 0;
}
&.position_3 {
Background-position: -70px 0;
}
&.position_4 {
Background-position: -97px 0;
}
&.position_5 {
BACKGROUND-POSITION:129PX 0;
}
&.position_6 {
BACKGROUND-POSITION:102PX 0;
}
&.position_7 {
BACKGROUND-POSITION:72PX 0;
}
&.position_9 {
BACKGROUND-POSITION:21PX 0;
}
}
:
CSS3 Sprite chart for digital switching