css - 创建重叠的用户图标

Question

我正在尝试创建一个与用户图标重叠的组件，如图所示。我在谷歌上看到过这个。如果我有一个用户图标列表，如何将它们相互重叠？

我想要这样的东西。

<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>

标签： cssvue.jsvuejs2

Answer 1

图标组件只是一个<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>