list.vue 886 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <template>
  2. <view :class="['list', data.type]">
  3. <view class="list-item" v-for="(item, index) in data.items">
  4. <text class="dot">{{data.type === 'ordered' ? `${index + 1}.` : '&#8226'}}</text>
  5. <render-text :data="item.data" reset class="reset-default"></render-text>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. import text from './text.vue'
  11. export default {
  12. name: "render-list",
  13. props: {
  14. data: {
  15. type: Object,
  16. default () {
  17. return {}
  18. }
  19. }
  20. },
  21. components: {
  22. renderText: text
  23. },
  24. methods: {
  25. }
  26. }
  27. </script>
  28. <style scoped lang="scss">
  29. .list {
  30. margin-bottom: 40rpx;
  31. }
  32. .list-item {
  33. display: flex;
  34. align-items: flex-start;
  35. margin-bottom: 20rpx;
  36. &:last-child {
  37. margin-bottom: 0;
  38. }
  39. .dot {
  40. margin-right: 10rpx;
  41. }
  42. }
  43. .reset-default {
  44. text-indent: 0;
  45. flex: 1;
  46. }
  47. </style>