Vue - stylowanie komponentów

Question

Witam,

W jaki sposób ostylować komponent w Vue z wykorzystaniem zmiennych? Np. biorąc pod uwagę data-atrybuty? W 'zwykłym' JS puszczam pętlę forEach:

    this.rings.forEach((ring) => {
      const value = this.changeTextPercentToNumber(ring.dataset.value);
      const radius = ring.r.baseVal.value;
      const circumference = radius * 2 * Math.PI;

      ring.style.strokeDasharray = `${circumference} ${circumference}`;
      ring.style.strokeDashoffset = `${circumference}`;

      const offset = circumference - value / 100 * circumference;
      ring.style.strokeDashoffset = offset;
    });

Jak zrobić to w komponencie?

Komponent:

<template>
  <div class="nearestGoals">
    <ul class="nearestGoals__list">
      <li class="nearestGoalsList__item" v-for="goal in goals">
        <svg class="progress-ring">
          <defs>
            <linearGradient id="grad1" x1="100%" y1="0%" x2="0%" y2="100%" >
              <stop offset="0%" style="stop-color:rgb(74,163,254);stop-opacity:1" />
              <stop offset="100%" style="stop-color:rgb(108,232,254);stop-opacity:1" />
            </linearGradient>
          </defs>
          <circle class="progress-ring__circle progress-ring__circle--background" r="48" cx="51" cy="51" style="stroke-dasharray: 301.593, 301.593; stroke-dashoffset: 0;"></circle>

          <circle class="progress-ring__circle" r="48" cx="51" cy="51" data-value="25%" stroke="url(#grad1)" style="stroke-dasharray: 301.593, 301.593; stroke-dashoffset: 301.926;" v-bind:style="styles"></circle>
        </svg>
        <div class="nearestGoalsItem__wrapper">
          <input class="nearestGoalsItem__name" v-model="goal.name">
          <span class="nearestGoalsItem__progress">{{money}} / {{goal.price}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'todoList',
    data() {
      return {
        money: 400,
        goals: [
          {
            id: 0,
            name: 'Cel pierwszy',
            price: 7800,
          },
          {
            id: 1,
            name: 'Cel drugi',
            price: 4200,
          },
          {
            id: 2,
            name: 'Cel trzeci',
            price: 5900,
          },
        ]
      }
    },
    methods: {
      percentageGoal(cost) {
        alert(cost);
      }
    },

    computed: {
      styles: function() {



        const money = this.$data.money;


        return {
          'stroke-dasharray': money,
        };
      }
    }
  }
</script>

 

Answer 1

A skąd będziesz miał dane do data-attributes w v-for?

Comments

  goals: [
          {
            id: 0,
            name: 'Cel pierwszy',
            price: 7800,
          },
          {
            id: 1,
            name: 'Cel drugi',
            price: 4200,
          },
          {
            id: 2,
            name: 'Cel trzeci',
            price: 5900,
          },
        ]

Z tablicy goals.

 

---

Możesz użyć ich bezpośrednio w bindowanych stylach - kombinowanie z data-attributes jest tutaj niepotrzebne

---

W jaki sposób się do nich odwołać. Nie chciałbym tego robić inline, ale przenieść do metody computed-> styles

---

<div :style="styles(goal)"> 

computed: {
  styles () {
    return goal => {
      return {
         width: goal.value + 'px',
         // ... co tam potrzebujesz
      }
    }
  }
}

Ale żeby nie tworzyć takich potworków, stwórz dodatkowy komponent GoalItem i przekaż goal propsem. Od razu poprawi się czytelność kodu.

Answer 2

musisz zbindować atrybut style lub class np.

<template>
    <div :style="{ color: blue? 'blue' : 'black' }">
        <span @click="blue = !blue">Hello</span>
    </div>
</template>

<script>
export default {
    data() {
        return { blue: false };
    }
};
</script>

 

Comments

A w jaki sposób uzyskać dostęp do atrybutu danego elementu?

This nie wskazuje na ten element

---

Nie rozumiem co dokładnie masz na myśli.

 https://vuejs.org/v2/guide/class-and-style.html

Answer 3

Rzuć okiem na: https://github.com/styled-components/vue-styled-components