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