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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<template>
<div @contextmenu.prevent="handleContextmenu">
<!-- <el-row :gutter="gutter">
<el-col :xs="8" :sm="6" :lg="5" :xl="4" v-for="(item,index) in items" :key="index">
</el-col>
</el-row>-->
<el-button type="primary" @click="test">测试</el-button>
<el-row type="flex" justify="center">
<el-col :span="20">
<el-row class="list" ref="wrapper">
<div
class="list-item"
:style="{
'margin-right':
(index + 1) % itemNumber == 0 ? 0 : marginRight + 'px',
width: itemWidth + 'px',
}"
v-for="(item, index) in items"
:key="index"
>
<slot name="card" :itemProp="item"></slot>
</div>
</el-row>
</el-col>
</el-row>
<contextMenu
:contextVisible="contextVisible"
:eventPosition="eventPosition"
@changeSize="changeSize"
@changeVisible="changeVisible"
/>
</div>
</template>
<script>
import contextMenu from "./BaseContextMenu.vue";
export default {
components: {
contextMenu,
},
props: {
items: {
type: Array,
required: true,
},
gutter: {
type: Number,
default: 10,
},
},
computed: {
surplus() {
return this.wrapperWidth % this.itemWidth;
},
itemNumber() {
return Math.floor(this.wrapperWidth / this.itemWidth);
},
marginRight() {
return Math.round((this.surplus / (this.itemNumber - 1)) * 100) / 100;
},
},
mounted() {
this.wrapperWidth = this.$refs.wrapper.$el.clientWidth - 1;
window.onresize = () => {
console.log("敞口在滨化");
this.wrapperWidth = this.$refs.wrapper.$el.clientWidth - 1;
};
// console.log("this.items", this.items);
// console.log("this.gutter", this.gutter);
},
data() {
return {
wrapperWidth: "",
itemWidth: "300",
contextVisible: false,
eventPosition: {
left: 0,
top: 0,
},
};
},
methods: {
test() {
console.log("this.$refs.wrapper", this.$refs.wrapper);
console.log("this.wrapperWidth", this.wrapperWidth);
console.log("this.itemWidth", this.itemWidth);
console.log("this.surplus", this.surplus);
console.log("this.itemNumber", this.itemNumber);
console.log("this.marginRight", this.marginRight);
},
handleContextmenu(event) {
console.log("鼠标右击", event);
this.contextVisible = true;
this.eventPosition = {
left: event.clientX,
top: event.clientY,
};
},
changeVisible(msg) {
this.contextVisible = msg;
},
changeSize(size) {
console.log("size", size);
this.itemWidth = size;
},
handleGetBig() {
console.log("大图标关闭");
this.$emit("changeVisible", false);
},
handleGetMedium() {
console.log("中等图标关闭");
this.$emit("changeVisible", false);
},
handleGetSmall() {
console.log("小图标关闭");
this.$emit("changeVisible", false);
},
},
};
</script>
<style lang="scss" scoped>
.list {
.list-item {
float: left;
}
}
</style>