创建重叠的用户图标答案

【问题标题】：creating overlapping user icons创建重叠的用户图标
【发布时间】：2021-03-27 10:24:26
【问题描述】：

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

我想要这样的东西。

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

【问题讨论】：

相关：stackoverflow.com/q/48916431/8620333

标签： css vue.js vuejs2

【解决方案1】：

图标组件只是一个带有user 属性的<img> 标签：

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

提供<li>s position: absolute 和<ul> position: relative 以将它们拉出正常的文档流。将每个<li> 上的left 位置设置为循环的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>

【讨论】：

我做的和你一样，但它甚至没有显示圆圈图标。 circle 组件接受:name 和':picture`。照我的方式，这样发送是否正确？
您可以像这样单独传递属性，但我认为传递整个 user 对象更有意义。无论哪种方式都可以。也许尝试复制并粘贴答案中的代码，以防万一与您意识到的不同
它说Invalid prop: type check failed for prop "userList". Expected Object, got Array @Dan 现在圆圈显示但图片不显示..
我做了你所做的。不知道为什么它说它有一个数组
这不会改变您是否可以通过user。我的第一个答案是对象数组，我更新了它，因为您说它是对象的对象。我认为您需要将代码发布到codesandbox.io，并附上您所有数据的示例，因为我已经展示了两种方式

【解决方案2】：

我喜欢您问题中的想法，并将其视为对自己的挑战，结果如下：

vue overlapping avatars component

基本上我采用的方法是使用组件的props 作为样式绑定中的样式。还有一些scoped style，但我认为如果需要它们也可以在样式绑定中设置（可能代码可以更简洁）。

user prop 是一个包含以下属性的对象数组：img: 'imageURL'，并在 div 元素上使用 v-for：

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

我们可以设置图片。

至于重叠部分，divs有position: relative，使用v-for的index，样式绑定变成这样：

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

除了第一个元素之外，每个元素都向左移动 15px。

这是最终结果的图像：

谢谢你的问题，很有趣:)

【讨论】：