tm-avatarGroup.vue 813 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <view class="tm-avatarGroup">
  3. <view :class="[`pl-${posX}`]">
  4. <slot></slot>
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. name: 'tm-avatarGroup',
  11. props:{
  12. posX:{
  13. type:Number,
  14. default:30
  15. }
  16. },
  17. data() {
  18. return {
  19. };
  20. },
  21. mounted() {
  22. this.$nextTick(function(){
  23. this.inits();
  24. })
  25. },
  26. updated(){
  27. this.$nextTick(function () {
  28. this.inits();
  29. })
  30. },
  31. methods: {
  32. inits() {
  33. let t = this;
  34. let ch = [];
  35. // #ifndef H5
  36. ch = this.$children;
  37. // #endif
  38. // #ifdef H5
  39. ch = this.$children[0].$children[0].$children;
  40. // #endif
  41. ch.forEach((item, index) => {
  42. if (item.$options.name === 'tm-avatar') {
  43. item.setConfigStyle({
  44. 'margin-left':`-${t.posX}rpx`
  45. })
  46. }
  47. });
  48. }
  49. }
  50. };
  51. </script>
  52. <style lang="scss"></style>