質問編集履歴

2

修正

2021/06/06 05:39

投稿

kgi
kgi

スコア0

test CHANGED
File without changes
test CHANGED
@@ -110,7 +110,7 @@
110
110
 
111
111
  mounted() {
112
112
 
113
- this.cardThumbPaddingTop();
113
+ this.pTop();
114
114
 
115
115
  window.addEventListener('resize', this.pTop)
116
116
 

1

code追加

2021/06/06 05:39

投稿

kgi
kgi

スコア0

test CHANGED
File without changes
test CHANGED
@@ -39,3 +39,121 @@
39
39
 
40
40
 
41
41
  環境はLaravel,blade,vue.jsです。
42
+
43
+
44
+
45
+
46
+
47
+ >> m2l さん
48
+
49
+
50
+
51
+
52
+
53
+
54
+
55
+ ```
56
+
57
+ <template>
58
+
59
+ <span class="lazyload thumb"
60
+
61
+ v-bind:data-bg="'/storage/' + item.img"
62
+
63
+ v-bind:style="{'height': height + 'px'}"
64
+
65
+ ></span>
66
+
67
+ </template>
68
+
69
+
70
+
71
+ <script>
72
+
73
+ export default {
74
+
75
+ props: {
76
+
77
+ item: {
78
+
79
+ type: Object
80
+
81
+ }
82
+
83
+ },
84
+
85
+
86
+
87
+ data() {
88
+
89
+ return {
90
+
91
+ height: null,
92
+
93
+ }
94
+
95
+ },
96
+
97
+
98
+
99
+ methods: {
100
+
101
+ pTop() {
102
+
103
+ this.height = Math.floor((this.$el.offsetWidth / 10) * 7);
104
+
105
+ }
106
+
107
+ },
108
+
109
+
110
+
111
+ mounted() {
112
+
113
+ this.cardThumbPaddingTop();
114
+
115
+ window.addEventListener('resize', this.pTop)
116
+
117
+ },
118
+
119
+
120
+
121
+ beforeDestroy: function () {
122
+
123
+ window.removeEventListener('resize', this.pTop)
124
+
125
+ }
126
+
127
+ }
128
+
129
+ </script>
130
+
131
+ ```
132
+
133
+
134
+
135
+ このような感じです。
136
+
137
+ レスポンシブに対応させているため、heightは随時計算させています。
138
+
139
+
140
+
141
+ htmlからは呼び出しは
142
+
143
+
144
+
145
+ ```
146
+
147
+ <thumb-component
148
+
149
+ v-bind:item="{{ $item }}"
150
+
151
+ ></thumb-component>
152
+
153
+
154
+
155
+ ```
156
+
157
+
158
+
159
+ このようにしてます。