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 | 7x 7x 7x | <template>
<u-linear-layout :class="$style.root" direction="vertical">
<u-dynamic-card v-for="(item, index) in currentData" :key="index"
:item="item"
:index="index"
:disable-remove="currentData.length <= minCount">
<template slot="mini">
<slot name="mini" :item="item" :index="index"></slot>
</template>
<slot :item="item" :index="index"></slot>
</u-dynamic-card>
<u-form-table-add-button v-if="dynamic" :disabled="currentData.length >= maxCount" @click="add">{{ addButtonText }}</u-form-table-add-button>
</u-linear-layout>
</template>
<script>
import MDynamic from '../m-dynamic.vue';
import UValidator from '../u-validator.vue';
import i18n from './i18n';
import i18nMixin from '../../mixins/i18n';
export default {
name: 'u-dynamic-cards',
mixins: [MDynamic, UValidator, i18nMixin('u-dynamic-cards')],
// i18n,
props: {
// data: Array,
// getDefaultItem: Function,
textField: { type: String, default: 'title' },
index: { type: Number, default: 0 },
addButtonText: {
type: String,
default() {
return this.$tt('add');
},
},
miniFormatter: Function,
},
data() {
return {
// currentData
currentIndex: this.index, // @TODO: 先用 index，观察会不会有不合适的问题
};
},
created() {
this.$on('add', ({ index }) => {
this.currentIndex = index;
});
this.$on('remove', ({ index }) => {
this.currentIndex
= index === this.currentData.length ? index - 1 : index;
});
},
methods: {
expand(index) {
this.currentIndex = index;
},
collapse(index) {
this.currentIndex = undefined;
},
},
};
</script>
<style module>
.root {
width: 680px;
}
.root[size="large"] {
width: 800px;
}
.root[size="full"] {
width: 100%;
}
</style>
|