Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 7x 7x 7x | <template> <div class="u-for-com" vusion-slot-name="default"> <template v-if="options.length > 0"> <div v-for="(item, index) in options" :key="index" class="u-for-com-frag"> <u-list-components-item v-for="(item2, index2) in item" :key="index2" :item="item2" :colnum="colnum || 5" :equal-width="equalWidth" :index="comIndex(index, index2)" > <template #default="item2"> <slot :item="item2.item" :index="comIndex(index, index2)"></slot> <s-empty v-if="$scopedSlots &&!($scopedSlots.default && $scopedSlots.default(item2)) &&$env.VUE_APP_DESIGNER && !!$attrs['vusion-node-path']"></s-empty> </template> </u-list-components-item> </div> </template> <template v-else-if="$env.VUE_APP_DESIGNER"> <slot><s-empty v-if="!$slots.default && $env.VUE_APP_DESIGNER && !!$attrs['vusion-node-path']"></s-empty></slot> </template> </div> </template> <script> import UListComponentsItem from './item.vue'; import SEmpty from '../../components/s-empty.vue'; import { formatDSResult } from '../../utils/DataSource/format'; export default { name: 'u-list-components', components: { UListComponentsItem, SEmpty, }, props: { dataSource: { type: [Array, Object, Function, String], default: () => [], }, colnum: { type: Number, default: 5, }, equalWidth: { type: Boolean, default: true, }, }, data() { return { options: [], }; }, computed: {}, watch: { dataSource: { deep: true, handler: 'update', immediate: true, }, }, methods: { divide(arr) { const result = []; const arre = [...arr]; while (arre.length > 0) { const temp = arre.splice(0, this.colnum || 5); result.push(temp); } return result; }, async update() { if (typeof (this.dataSource) === 'function') { try { const res = await this.dataSource({ page: 1, size: 1000, }); this.options = this.divide(formatDSResult(res)); } catch (error) { console.error(error); } } else { this.options = this.divide(formatDSResult(this.dataSource)); } }, comIndex(index1, index2) { return index1 * (this.colnum || 5) + index2; }, }, }; </script> <style> .u-for-com-frag { display: flex; flex-basis: auto; flex-wrap: wrap; } </style> |