All files / src/components/u-grid-view.vue index.vue

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
 
 
 
7x
 
7x
 
 
7x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script>
import { UListView } from '../u-list-view.vue';
import i18n from './i18n';
import { isIE } from '../../utils/dom';
import i18nMixin from '../../mixins/i18n';
 
export default {
    name: 'u-grid-view',
    groupName: 'u-grid-view-group',
    childName: 'u-grid-view-item',
    extends: UListView,
    // i18n,
    mixins: [i18nMixin('u-grid-view')],
    props: {
        repeat: { type: Number, default: 5 },
        showTitle: { type: Boolean, default: () => !isIE() }, // IE 默认不展示 title
    },
    computed: {
        itemWidth() {
            return 1 / this.repeat * 100 + '%';
        },
    },
};
</script>
 
<style module>
@import '../u-list-view.vue/index.css';
 
/** 避免父级设置了white-space:nowrap，导致item没有换行 */
.root {
    white-space: normal;
}
 
.body{
    margin: 0 calc(var(--grid-view-item-space) / (-2));
}
 
.root .item {
    padding: calc(var(--grid-view-item-space) / 2);
}
 
.pagination {
    text-align: right;
    margin: 0;
}
.foot {
    margin: 0 calc(var(--grid-view-item-space) / (-2));
    padding: var(--grid-view-foot-padding);
}
</style>