All files / src/components/u-dynamic-cards.vue index.vue

65% Statements 13/20
25% Branches 2/8
25% Functions 1/4
68.42% Lines 13/19

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>