중복되는 사용자 아이콘 생성

중복되는 사용자 아이콘 생성

사진과 같이 사용자 아이콘 위에 겹치는 컴포넌트를 만들려고 합니다.구글에서 이걸 쓰는 걸 본 적이 있어요.사용자 아이콘 목록이 있는 경우 서로 겹치는 방법은 무엇입니까?

나는 이런 것을 원한다.

<template>
    <div >
    <ul>
      <li v-for="user in userList" :key="user.key">
        <user-icon-component :name="user.name" :image="user.picture"></user-icon-component>
      </li>
    </ul>
    </div>
</template>


<script>
export default {
  name: "UserList",
  props: {
    userList: {
      type: Object,
      default: null,
    },
  },
};
</script>

<style>

</style>

아이콘 컴포넌트는 단지<img>로 꼬리표를 붙이다user소품:

Vue.component('user-icon-component', {
  props: ['user'],
  template: `
  <img :src="user.picture" width="32" height="32" />
  `
})

를 제공하다<li>s position: absolute및 그<ul> position: relative일반적인 문서 흐름에서 끌어냅니다.설정left각각에 대한 입장<li>로부터의 계산으로서index루프의 경우:

<ul class="icon-container">
  <li v-for="(user, key, i) in userList" :key="user.key"
      class="icon" :style="{ left: `${i * 20}px` }">
    <user-icon-component :user="user"></user-icon-component>
  </li>
</ul>

데모를 소개합니다.

Vue.component('user-icon-component', {
    props: ['user'],
  template: `
  <img :src="user.picture" width="32" height="32" />
  `
})

/***** APP *****/
new Vue({
  el: "#app",
  data() {
    return {
        userList: {
        'Bob': { name: 'Bob', key: 1, picture: 'https://www.flaticon.com/svg/static/icons/svg/3084/3084430.svg' },
        'Mary': { name: 'Mary', key: 2, picture: 'https://www.flaticon.com/svg/static/icons/svg/3084/3084431.svg' },
        'Paul': { name: 'Paul', key: 3, picture: 'https://www.flaticon.com/svg/static/icons/svg/3084/3084452.svg' },
      }
    }
  },
});

.icon-container {
  position: relative;
}
.icon {
  position: absolute;
}
ul {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul class="icon-container">
    <li v-for="(user, key, i) in userList" :key="user.key"
        class="icon" :style="{ left: `${i * 20}px` }">
      <user-icon-component :user="user"></user-icon-component>
    </li>
  </ul>
</div>

질문의 아이디어가 마음에 들어 스스로 도전해 본 결과, 다음과 같습니다.결과는 다음과 같습니다.

vue 중첩 아바타 구성 요소

기본적으로 제가 취한 접근법은 컴포넌트의props스타일 바인딩의 스타일입니다.몇 개 있다scoped style스타일 바인딩으로 설정할 수도 있다고 생각합니다(코드가 더 깔끔할 수도 있습니다).

user prop는 다음 속성을 포함하는 개체의 배열입니다.img: 'imageURL'및 를 사용하여v-for에서div요소:

:style="{ backgroundImage: `url(${user.img})`}"

이미지를 설정할 수 있습니다.

겹치는 부분은div가지고 있다position: relative를 사용하여index의v-for스타일 바인딩은 다음과 같습니다.

:style="{backgroundImage: `url(${user.img})`, left: `-${i*15}px`}"

첫 번째 요소를 제외한 모든 요소를 왼쪽으로 15px 이동시킵니다.

최종 결과 이미지는 다음과 같습니다.

질문 감사합니다.재밌었습니다:)

언급URL : https://stackoverflow.com/questions/65328678/creating-overlapping-user-icons