BG Development


Страници: (2) [1] 2   ( Първото ново мнение ) Reply to this topicStart new topicStart Poll

> VueJS зареждане на Sprite image в UL
miss
Публикувано на: 08-04-2019, 15:48
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 31
Регистриран на: 14.04.15



Имам sprite image, който съдържа картинки на марки телефони, всички те са със широчина 40px и искам да ги подредя в UL, като всяко следващо LI трябва да вземе следващата картинка от sprite.


View:
CODE

           <ul>
             <li v-for="brand in brands" v-bind:key="brand.id">
               <a href="#">
                 {{ brand.brand_name }}<br>

                 <img src="@/assets/spacer.gif" :style='brandsImgObject' alt="">
               </a>
             </li>
           </ul>


Data:
CODE

 data () {
   return {
     brands: [],
     counter: 0,
     msg: 'Welcome to Your Vue.js App',
     brandsImgObject: {
       backgroundPosition: '-40px 0'
     }
   }
 }


Style:
CODE

<style scoped>
 .brands .brands__body img { background-image: url(../../assets/sprite/sprite.png); background-position: 0 0; width: 40px; }
</style>


Променяйки backgroundPosition атрибута в data() "хардкорвам" някаква стойност за позицията на логото, но искам тази стойност да се взема динамично и за всяко следващо LI да намалява с 40px, защото така се появява едно и също лого на всяко LI.
PMEmail Poster
Top
miss
Публикувано на: 08-04-2019, 19:15
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 31
Регистриран на: 14.04.15



Някой?
PMEmail Poster
Top
Gosheto
Публикувано на: 08-04-2019, 19:23
Quote Post



Име:
Група: Потребител
Ранг: Посетител

Мнения: 77
Регистриран на: 07.05.07



Ами дефинирай си в css марките:

CODE

.brands .brands__body img .samsung { background-image: url(../../assets/sprite/sprite.png); background-position: -40px 0; width: 40px; }
.brands .brands__body img .apple{ background-image: url(../../assets/sprite/sprite.png); background-position: -80px 0; width: 40px; }
......


И после ги подавай "динамично" във вюто:
CODE

...
<img src="@/assets/spacer.gif" :style="brands brands__body img {{ brand.brand_name }}" alt="">
...


Нещо такова...

Това мнение е било редактирано от Gosheto на 08-04-2019, 19:25
PMEmail Poster
Top
miss
Публикувано на: 08-04-2019, 20:37
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 31
Регистриран на: 14.04.15



QUOTE (Gosheto @ 08-04-2019, 19:23)
Ами дефинирай си в css марките:

CODE

.brands .brands__body img .samsung { background-image: url(../../assets/sprite/sprite.png); background-position: -40px 0; width: 40px; }
.brands .brands__body img .apple{ background-image: url(../../assets/sprite/sprite.png); background-position: -80px 0; width: 40px; }
......


И после ги подавай "динамично" във вюто:
CODE

...
<img src="@/assets/spacer.gif" :style="brands brands__body img {{ brand.brand_name }}" alt="">
...


Нещо такова...

Всичко трябва да става автоматично, а не да се хардкорва в кода. Освен това, това няма да работи тъй като в документацията на Vue пише: "Mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive.". Да не говорим, че това са >1000 реда код отгоре, напълно ненужно.

Това мнение е било редактирано от miss на 08-04-2019, 20:39
PMEmail Poster
Top
Gosheto
Публикувано на: 08-04-2019, 21:32
Quote Post



Име:
Група: Потребител
Ранг: Посетител

Мнения: 77
Регистриран на: 07.05.07



И от къде ще знаеш коя картинка от спрайта на коя марка отговаря ако не ги "хардкорнеш" или ще ползваш някакъв AI?

Това мнение е било редактирано от Gosheto на 08-04-2019, 21:33
PMEmail Poster
Top
relax4o
Публикувано на: 08-04-2019, 23:58
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 2369
Регистриран на: 04.04.07



Ти математика не си ли учил? В първи клас се учи събиране и изваждане.


--------------------
Бисери :D

QUOTE (oveRLuckEd)
Ползваш някоя нова версия на PHP, която е вече ооп ориентирана и заради това ти я изкарва тази грешка.


QUOTE (nbacool2)
Щом няма input полета, значи няма откъде да се направи SQL инжекция Very Happy
PM
Top
deam0n
Публикувано на: 09-04-2019, 10:15
Quote Post



Име: Атанас Атанасов
Група: Потребител
Ранг: Посетител

Мнения: 93
Регистриран на: 12.09.05



Некво такова

https://jsfiddle.net/cvyj3o8u/

Използвам тази картинка: https://i.imgur.com/qtAcrro.png

Умножавам индекса по 40.
CODE
<li v-for="(brand, index) in brands" v-bind:key="brand.id">
       <div class="img-brand" v-bind:style="'background-position: -'+parseInt(index*40)+'px 0;'"></div>
</li>


Можеш да си го направиш като функция за по-хубав синтаксис.

Това мнение е било редактирано от deam0n на 09-04-2019, 10:23
PMEmail Poster
Top
samominavam
Публикувано на: 09-04-2019, 10:48
Quote Post



Име:
Група: Потребител
Ранг: Активен

Мнения: 285
Регистриран на: 22.08.17



бахти лайняния синтаксис
PMEmail Poster
Top
miss
Публикувано на: 10-04-2019, 12:57
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 31
Регистриран на: 14.04.15



QUOTE (deam0n @ 09-04-2019, 10:15)
Некво такова

https://jsfiddle.net/cvyj3o8u/

Използвам тази картинка: https://i.imgur.com/qtAcrro.png

Умножавам индекса по 40.
CODE
<li v-for="(brand, index) in brands" v-bind:key="brand.id">
       <div class="img-brand" v-bind:style="'background-position: -'+parseInt(index*40)+'px 0;'"></div>
</li>


Можеш да си го направиш като функция за по-хубав синтаксис.

Много ти благодаря, точно това ми трябваше!
PMEmail Poster
Top
deam0n
Публикувано на: 10-04-2019, 16:30
Quote Post



Име: Атанас Атанасов
Група: Потребител
Ранг: Посетител

Мнения: 93
Регистриран на: 12.09.05



QUOTE (samominavam @ 09-04-2019, 10:48)
бахти лайняния синтаксис

Твойтa баба цял живот е писала нелайнян синтаксис icon_biggrin.gif icon_biggrin.gif
PMEmail Poster
Top
1 потребители преглеждат тази тема в момента (1 гости, 0 анонимни потребители)
Потребители, преглеждащи темата в момента:

Topic Options Страници: (2) [1] 2  Reply to this topicStart new topicStart Poll

 


Copyright © 2003-2019 | BG Development | All Rights Reserved
RSS 2.0