commu-article-imgs.vue 640 B

123456789101112131415161718192021222324252627282930313233343536
  1. <template>
  2. <view class="commu-article-imgs">
  3. <image v-for="item in imgs" :key="item" :src="item"></image>
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. props: {
  9. article: String
  10. },
  11. computed: {
  12. imgs() {
  13. const imgs = []
  14. this.article.match(/img src=".+"/g).forEach(e => {
  15. imgs.push(e.replace('img src="', '').replace('"', ''))
  16. })
  17. return imgs.slice(0, 3)
  18. }
  19. }
  20. }
  21. </script>
  22. <style lang="scss" scoped>
  23. .commu-article-imgs {
  24. @include flex();
  25. width: 100%;
  26. justify-content: space-between;
  27. image {
  28. width: 222rpx;
  29. height: 150rpx;
  30. margin-top: 10rpx;
  31. border-radius: 10rpx;
  32. }
  33. }
  34. </style>