因此,我希望根据组件内部图像的 colored颜色 来更改组件的背景.页面上有20个组件实例,现在所有20个实例都有相同的 colored颜色 ,但它们都应该有自己唯一的 colored颜色 .我不知道该怎么做.我try 使用内联样式,但也不起作用

该 colored颜色 是在组件中加载图像时生成的.通过组件中的此函数

我试着用谷歌搜索东西,但找不到答案,试了试,但没有成功

我用裁判试过了,但它仍然改变了所有的20张牌,而不是1张.我试着根据pokemonid设置唯一ID,但也不起作用

以下是代码

该组件被称为pokemon-card

组件:

<template>
  <div class="card">
    <div class="card__front" :style="{'background' : `radial-gradient(circle at 50% 0%, ${cardCircleColor} 36%, #fff 36%)`}">
      <div class="card__front__cardTop">
        <div class="card__front__cardTop__id"><span></span>{{ id }}</div>
      </div>
      <img class="card__front__img"
           :src="'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/' + id + '.png'"
           alt="pokemonImage" crossorigin="anonymous">
      <div class="card__front__name">
        <h3>{{ name }}</h3>
      </div>
    </div>
    <div class="card__back">
      <router-link :to="`/pokemonDetails/${id}`" class="card__back__button">Details</router-link>
    </div>
  </div>
</template>

该 colored颜色 是在组件中加载图像时生成的.通过组件中的此函数

    methods: {
    //gets color for background based on pokemon image
    getColor() {
      const fac = new FastAverageColor();
      fac.getColorAsync(document.querySelector(`.card__front__img`))
          .then(color => {
            // document.querySelector(`.card__front`).style.background = `radial-gradient(circle at 50% 0%, ${color.hex} 36%, #fff 36%)`
            this.cardCircleColor = color.hex
          })
    },
  },
  mounted() {
    this.getColor()
  },

组件的相关css( colored颜色 应采用径向渐变(圆圈为50%0%、#36%、#fff 36%);)

组件的相关css( colored颜色 应采用径向渐变(圆圈为50%0%、#36%、#fff 36%);)

  &__front{
    transition: all .8s;
    //background: radial-gradient(circle at 50% 0%, #90aac1 36%, #fff 36%);
    //background-color: $cardBg_color;

亲本

<template>
  <div class="container">
    <div class="cardContainer">
        <pokemon-card v-for="data in pokemonData.results" :name="data.name" :id="data.id"></pokemon-card>
    </div>

    <div class="PaginationcontrolContainer">
      <div class="paginationControls">
        <div @click="decreasePaginationCounter" class="paginationControls__btn"> &lt </div>
        <input @change="manuallyChangingPaginationIndex" v-model="paginationIndex" type="number">
        <div @click="increasePaginationCounter" class="paginationControls__btn"> > </div>
      </div>
    </div>

  </div>
</template>

推荐答案

您的问题很好地说明了为什么在使用Vue时不应该直接操作DOM.


问题就在这里:

fac.getColorAsync(document.querySelector(`.card__front__img`))
  .then(...)

document.querySelector('.card__front__img')将始终返回101.

这意味着fac个单独的实例中的每一个都找到相同的完全相同的元素,并将其用作色源.相同的输入将产生相同的输出,20次不同的次数.

相反,您应该遵循Vue关于如何与DOM交互的指导方针.使用template refs.

具体地说,就是:

<template>
  <!-- ... -->
    <img class="card__front__img" ref="image">
</template>
  // ...
  getColor() {
    //...
    fac.getColorAsync(this.$refs.image).then(...)
  }

现在,每个组件都将引用其自己的image个引用,如果它们加载不同的图像,结果应该会有所不同.


此外,确保你遵循了@MichaelMano的建议,并使用了:key个带有唯一标识符的v-for.尽管它与您当前正在经历的错误没有直接联系,但它是一个常见的细微错误的来源,就像您的一样,理解和修复它可能需要几个小时,有时甚至几天.


注意:如果我的建议不能修复错误,您应该在每个组件上运行getColor()时判断imagesrc,并确保它们是应该的(例如console.log(this.$refs.image.getAttribute('src')))

备注:如果你提供的是runnable minimal reproducible example,你的问题会更容易回答.

Css相关问答推荐

为什么我的容器的弹性包裹会导致我的自动填充网格添加额外的空轨道行?

如何使用混合混合模式更改动画背景上的文本 colored颜色

如何使用 tailwind css 修复滚动条始终位于底部?

如何使我的标语(h1元素)不居中对齐?

如何使用 Sass to CSS 创建 H1 到 H6 标题并减小字体大小

before 元素的过渡效果

在 Tailwind css 中,间距对我不起作用

没有 colored颜色 Select 器的 JavaFX colored颜色 Select 器

CSS网格列随着长内容改变大小

Tailwind:如何设置网格的自动填充?

为什么我们将