因此,我希望根据组件内部图像的 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"> < </div>
<input @change="manuallyChangingPaginationIndex" v-model="paginationIndex" type="number">
<div @click="increasePaginationCounter" class="paginationControls__btn"> > </div>
</div>
</div>
</div>
</template>