Hello,
The solution to my problem is surely extremely simple and it is all the more annoying.
I’m just trying to put a CodePen (small template) in a container but it is capricious and does not appear. One of the comments (CSS) of the code specifies that it is necessary to attribute a size and a height to the object under pain of not seeing it appearing and in spite of that I do not see the error.
CodePen : httpsXclearXthisXpartX://codepen.io/fabianmossberg/pen/yZMxzP
my container :
body{
margin:0;
padding: 0;
}
.container-wrap{
width: 100vw;
height:100vh;
margin:0 auto;
position: relative;
background: url("../res/img/map_01.2.png") no-repeat center center;
background-size: cover;
overflow: hidden;
}
And here is the CSS that I have to adapt to make the whole thing work:
(With translated comments ^^)
/* This style can only be applied to this demo, For reference only, Customizable by design or preference */
html,body{ height: 100%; }
body { background: #20262E;
overflow: hidden;
}
#app{
overflow-x:hidden;
}
/* Direct script reference suggestions are added, otherwise it would cause flickering, a single file component does not need */
[v-cloak] { display: none; }
/* Warning! The width and height of the component must be defined, otherwise it will not come out！！！ */
#app .vue-tinder {
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 23px;
margin: auto;
width: calc(100% - 20px);
height: calc(100% - 23px - 18%);
min-width: 300px;
max-width: 355px;
}
/* The position of the three status indicators on the map, the transparency will be automatically adjusted by the component */
.nope-pointer { right: 10px; }
.like-pointer { left: 10px; }
.nope-pointer,
.like-pointer {
position: absolute;
z-index: 1;
top: 20px;
width: 64px;
height: 64px;
}
.super-pointer {
position: absolute;
z-index: 1;
bottom: 80px;
left: 0;
right: 0;
margin: auto;
width: 112px;
height: 78px;
}
/* Style d'image de fente */
.pic {
width: 100%;
height: 100%;
background-size: cover;
}
/* Style de bouton */
.btns {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: 18%;
display: flex;
align-items: center;
justify-content: center;
min-width: 300px;
max-width: 355px;
}
.btns img{ width: 80px; }
I also add HTML and JS in case :
HTML
<div id="app" v-cloak>
<tinder
ref="tinder"
:queue.sync="queue"
@submit="submit">
<template slot-scope="{data}">
<div
class="pic"
:style="`background-image:url(https://picsum.photos/710/1152/?random=${data.key})`">
</div>
</template>
<img class="like-pointer" slot="like" src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/like-txt.png">
<img class="nope-pointer" slot="nope" src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/nope-txt.png">
<img class="super-pointer" slot="super" src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/super-txt.png">
</tinder>
<div class="btns">
<img src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/nope.png" @click="decide('nope')">
<img src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/super-like.png" @click="decide('super')">
<img src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/like.png" @click="decide('like')">
</div>
</div>```
JS
```new Vue({
el: "#app",
data: {
queue: []
},
created () {
this.getData()
},
methods: {
/**
* 用于产生demo用的数据
* @method getData
*/
getData () {
const list = []
for (let i = 0; i < 5; i++) {
list.push({
key: Math.random()
})
}
this.queue = this.queue.concat(list)
},
/**
* 点击按钮所绑定的方法，此方法为调用vue-tinder组件内方法的示例，仅供参考
* @method submit
* @param {String} choice
*/
decide (choice) {
this.$refs.tinder.decide(choice)
},
/**
* 自定义事件submit绑定的方法，移除卡片的回调
* @method submit
* @param {Object} choice {type,key}
*/
submit (choice) {
switch (choice) {
case 'nope': // 左滑
break;
case 'like': // 右滑
break;
case 'super': // 上滑
break;
}
if (this.queue.length < 2) {
this.getData()
}
}
}
})```