[SIMPLE] Aide pour intégration d'un CodePen

Signaler
Messages postés
2
Date d'inscription
vendredi 9 novembre 2018
Statut
Membre
Dernière intervention
17 mai 2019
-
SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
-
Bonjour,

La solution à mon problème est sûrement extrêmement simple et c'est d'autant plus énervant.

J'essaye simplement de placer un CodePen (petit template) dans un container mais il est capricieux et n'apparaît pas. Un des commentaires (CSS) du code précise qu'il faut attribué une taille et une hauteur a l'objet sous peine de ne pas le voir apparaître et malgré ça je ne parvient pas a le faire apparaître.

CodePen : https://codepen.io/fabianmossberg/pen/yZMxzP

Voici mon container :

body{
    margin:0;
    padding: 0;
}

.container-wrap{
            width: 100vw;
			height:100vh;
			margin:0 auto;
			position: relative;
			background: url("../res/img/image.png") no-repeat center center;
			background-size: cover;
    overflow: hidden;
		}


Et voici le CSS que je dois adapter pour faire fonctionner l'ensemble :
(Avec commentaires traduis car a l'origine en chinoi ^^)

/* Ce style ne peut s'appliquer qu'à cette demo,Pour référence seulement,Personnalisable selon la conception ou les préférences */

html,body{ height: 100%; }

body { background: #20262E;
overflow: hidden; 
}

#app{
  overflow-x:hidden;
}

/* Des suggestions de référence de script directes sont ajoutées, sinon cela provoquerait un scintillement, un composant de fichier unique n’a pas besoin */

[v-cloak] { display: none; }

/* Attention! La largeur et la hauteur du composant doivent être définies, sinon il ne sortira pas!!! */

#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;
}

/* La position des trois indicateurs d'état sur la carte, la transparence sera automatiquement ajustée par le composant */

.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; }















J'ajoute également le HTML et le JS au cas où :

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()
      }
    }
  }
})

1 réponse

Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
59
Tient, je l'ai fait marcher, tu a juste à le caller dans une div :
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Vue Tinder</title>
      <style>
      /* ?????????demo,????,?????????????? */
html,body{ height: 100%; }

body { background: #20262E;overflow: hidden; }
#app{
  overflow-x:hidden;
}

/* ??script??????,???????,???????? */
[v-cloak] { display: none; }

/* ??!?????????,?????!!! */
#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;
}

/* ????3????????,??????????? */
.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;
}

/* slot????? */
.pic {
  width: 100%;
  height: 100%;
  background-size: cover;
}

/* ???? */
.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; }
      </style>
</head>
<body>
<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>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js'></script>
<script src='http://unpkg.com/vue-tinder'></script>
    <script>
    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()
      }
    }
  }
})
    </script>
</body>
</html>