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