shanlh / vue-tinder Goto Github PK

Component not rendering in vue 3

Will a section with a comprehensive options list be added to the documentation?

I'm using the branch Next with Vue3.
Everything works well except for the "card move away" animation. Instead, it looks like the card goes behind the deck.
The only situation where the expected animation is occurring is when I "rewind": the card "0" (the 1st of the deck) will come back with the correct animation.
Do you have any idea where this issue could come from? Which part of the code takes care of this animation?
I attached a recording of my deck. And I share below my code.
Thanks in advance for your help.

<template>
  <f7-page name="swipe">
    <vue-tinder
      ref="tinder"
      key-name="key"
      v-model:queue="queue"
      :offset-y="10"
      allowDown
      @submit="onSubmit"
    >
      <template #default="{ data }">
        {{ data.key }}
      </template>
      <template #like>🙂</template>
      <template #nope>🤮</template>
      <template #super>🤩</template>
      <template #down>🤔</template>
      <template v-slot:rewind>
        <span>REWIND</span>
      </template>
    </vue-tinder>
    <f7-row tag="p" class="tinder-buttons">
      <f7-button class="col" small raised round @click="decide('rewind')">↩️</f7-button>
      <f7-button class="col" large raised round @click="decide('nope')">🤮</f7-button>
      <f7-button class="col" small raised round @click="decide('down')">🤔</f7-button>
      <f7-button class="col" large raised round @click="decide('like')">🙂</f7-button>
      <f7-button class="col" small raised round @click="decide('super')">🤩</f7-button>
    </f7-row>
  </f7-page>
</template>

<script>
import VueTinder from "vue-tinder";
import { ref } from "vue";

export default {
  components: { VueTinder },
  setup() {
    const queue = ref([]);
    const history = [];
    const tinder = ref(null);
    for (let i = 0; i < 15; i++) {
      queue.value.push({ key: i });
    }
    const onSubmit = ({ type, key, item }) => {
      history.push(item);
    };
    const decide = (choice) => {
      if (choice === "rewind") {
        if (history.length) {
          const item = history.pop();
          tinder.value.rewind([item]);
        }
        return;
      }
      tinder.value.decide(choice);
    };
    return {
      queue,
      tinder,
      onSubmit,
      decide,
    };
  },
};
</script>

<style lang="less">
.page[data-name="swipe"] .page-content {
  overflow: hidden;
}
.vue-tinder {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  margin: auto;
  width: 300px;
  height: 350px;
  padding: 20px;

  .v-move {
    transition: none !important;
  }

  .tinder-card {
    position: absolute;
    height: calc(100% - 40px);
    width: calc(100% - 40px);
    color: white;
    font-size: 15em;
    font-weight: bold;
    line-height: 500px;
    text-align: center;
    background: var(--f7-theme-color-tint);
    border-radius: var(--f7-button-border-radius);

    .md & {
      box-shadow: 0px 0px 5px rgb(0 0 0 / 50%);
    }
    .ios & {
      box-shadow: 0px 0px 3px rgb(0 0 0 / 25%);
    }

    .tinder-rewind-leave-active {
      transition: all 0.5s ease;
    }
    .tinder-rewind-leave-to {
      opacity: 0;
    }

    .pointer-wrap {
      position: absolute;
      display: block;
      z-index: 101;
      width: 64px;
      height: 64px;
      font-size: 64px;
      line-height: 64px;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .nope-pointer-wrap {
      right: 10px;
      top: calc(50% - 32px);
    }
    .like-pointer-wrap {
      left: 10px;
      top: calc(50% - 32px);
    }
    .super-pointer-wrap {
      bottom: 10px;
      left: calc(50% - 32px);
    }
    .down-pointer-wrap {
      top: 10px;
      left: calc(50% - 32px);
    }
  }
}
.tinder-buttons {
  align-items: center;
  margin: 1em auto;
  max-width: 300px;

  .button {
    background: white;
  }

  .button-large {
    width: calc(var(--f7-button-large-height) * 1.5);
    height: calc(var(--f7-button-large-height) * 1.5);
    font-size: var(--f7-button-large-height);
    .md & {
      padding: 3px 0px 0px 3px;
    }
    .ios & {
      padding: 0px;
    }
  }
  .button-small {
    width: calc(var(--f7-button-small-height) * 1.5);
    height: calc(var(--f7-button-small-height) * 1.5);
    font-size: var(--f7-button-small-height);
    .md & {
      padding: 3px 0px 0px 2px;
    }
    .ios & {
      padding: 0px;
    }
  }
}
</style>

I've tried:
.vue-tinder { border-radius: 0px !important; }

But didn't work.

Hey shanlh, I hope you are well.

We, in our company, made an ecommerce app using Vuetify.js, and one of feature we are developing is a tinder-like clothes showroom (you can check a brief preview here) with idea to get feedback from our customer.

The issue is, comparing with your demo playground, the animations when press buttons using documented APIs. Adittionaly, rewind feature don't show badge when press button, I want to know how to do to make work vue-tinder with vuetify, I'm sure thats the problem.

Regards.

<vue-tinder ref="tinder" key-name="key" :queue.sync="recommendList" :offset-y="10" :pointerThreshold="0.2" :superThreshold="0.2" @submit="onClerkStackChange"> <router-link slot-scope="{index, status, data}" :to="'/clerk/detail/'+ data.id"> <div class="picture" :style="{ 'background-image': url(${recommendList[index].avatarUrl}) }"> <img v-if="data.grade == 2 || data.grade == 3" class="grade" :src="/static/images/grade_badge_${data.grade}.png" /> </div> </router-link> </vue-tinder>

Hello.

I have followed the guide published by you (https://shanlh.github.io/vue-tinder/guide/bing-images.html), but when loading the page, the page appears blank with the following error in the console:
http://prntscr.com/uwbry1

Thanks in advance.

I have a big issue (with Vue3): when I provide a queue with a getter of my store, the tinder breaks.

After analyzing the Tinder code, it seems that the cards are not a direct representation of the queue but of a list internally built as a copy of the queue, and updated every time the queue changes thanks to a watch on the queue.

The issue is that there is a breaking change with Vue3:

BREAKING: When watching an array, the callback will only trigger when the array is replaced. If you need to trigger on mutation, the deep option must be specified. https://v3.vuejs.org/guide/migration/watch.html#overview

If we replace this code by the following, it works well:

watch: {
    queue: {
      handler(val) {
        const keyName = this.keyName
        const newKeys = val.map(item => item[keyName])
        const oldKeys = this.list.map(item => item[keyName])
        this.diff(newKeys, oldKeys)
      },
      deep: true
    }
}

But from what I read, "deep watchers" are the devil...

The rule is simple — do not use a deep modifier, and do not watch non-primitive-type variables at all. https://codeburst.io/5-vue-performance-tips-98e184338439

I observed that there is a update:queue event emitted every time the queue changes. It is not documented officially, but it's there. Perhaps it would be a good place to do the same diff operation?

Or perhaps, it would be even "cleaner" to simply create a method accessible on the Tinder instance, that the developper will trigger every time the queue is updated?

What do you think?

<vue-tinder key-name="id" :queue.sync="queue" @submit="fetchMoreNews" style="width: 295px; height: 450px;"> <template slot-scope="scope"> <news-item :key="scope.data.id" :detail="scope.data" class="border-none mb-0"></news-item> </template> </vue-tinder>

发布到正式站，报错：“请设置vue-tinder的宽高”

Hello, thanks for this amazing plugin!

I read that there is the possibility to disable the "super like" function, but this doesn't mean that it stops the user to swipe up right? is it possible that it stops doing that? kinda like it bounces back down? and just allows them to swipe left/right

Hi

I show you my app based in your amazing plugin

https://github.com/jjmontalban/filmder-front

Best regards

I'm just starting to get this working. However, I see the following error being repeated a few times. Buttons are showing on the page but no images are shown.

ERROR [Vue warn]: <transition-group> children must be keyed: <TinderCard>

Trying to work with the sample.

Any ideas?

Hello, hope you are well.
We need to add a down functionailty to your component but can;t get it to work.
Can you help?

Congratulatioins on the component!!! Nice job.

Felipe

首先感谢作者的框架！
现在我有个问题，我本地开发的效果都是好的，但是打包到线上只有第一张卡片可以滑动，第二张就不行了。发现卡片一直卡在这个样式，如截图。
本地效果:

线上效果:

我的代码:

出现问题的样式截图

@我发现本地在每一次滑动完之后class上是不会加上v-mov,v-move的，但是线上的在第一次滑玩之后，再滑第二个就会加上这个样式，然后就卡着无法往下滑动了，还请作者麻烦看一下，十分感谢！

Hi,
I tried installing vue-tinder on my project. However, some attributes seem to have been deprecated in Vue v3 (slot-scope, slot and queue.sync)
I tried updating those on my end, but Vue throws a warning Unhandled error during execution of scheduler flush.
Do you have any idea about what might have happened ?

Also, I can't fix a warning triggered by Vetur saying

Could not find a declaration file for module 'vue-tinder'. '/Users/fabienrahaingomanana/Desktop/citouci/node_modules/vue-tinder/lib/vue-tinder.js' implicitly has an 'any' type.
Try npm i --save-dev @types/vue-tinder if it exists or add a new declaration (.d.ts) file containing declare module 'vue-tinder';

I tried adding a file called global.d.ts and running the suggested command. But nothing worked.

This is not an issue but request. The decide function should return full item so I can use other information about the card also. I am gonna check the code and see if I can make pull request.

Hi.

I think that you could add more photos in the current object, that is, that you can see more photos in carousel format for the object you are currently viewing.

I do not know if I have explained myself properly, but this is implemented by Tinder and other applications.

Thanks.

Getting error 请设置vue-tinder的宽高 while all the css variables are set as per the sandbox. Am I missing something ?
\

Hi, I wanna thank you for this wonderful library and ask for translate docs, examples an error messages to english. Ok, I'm from Brazil and my primary language is portuguese, but english seems to be the common language for open source projects and development.

Hello,I tried to use your component but it tells me to set the height and the width.

I'm using the alpha version for Vue 3 and I've put it in a component.

It works when I put it the App.vue directly like your example in https://github.com/shanlh/vue-tinder/blob/next/src/App.vue .

Thank your for your help.

Hi, im playing with this amazing plugin a few days.
So my question is the same as in title. For example:
I want to rename 'nope' event to 'dislike'. Is there any way to accomplish this? @click events are renamed as i need, But when you swipe, the events remain standard

Is there any way to get the slot opacity value for the card when I swipe the card? I want to add some event, when slots are shown

为什么在uniapp端运行不起来

The card can't be touched while it returns to its original position after being moved to either side

作者，您好！我现在右滑移除卡片之后因为某些判定问题把移除的卡片添加到了数组的第一项之后卡片滑动就失效了，不能滑动，请问这个问题你有解决方法吗？

您好，请问在vue-cli构建项目上如何使用？我找不到全局注册的方式

Hi,

how can I remove the symbols?

Klaus

Now, if you want to click on a card to open a link or detail, we need to set the click on a certain element, because if we add it to the card, when we are dragging it, it will automatically click instead of just swipe to the selected side and the card will disappear.

A event or even the possibility to be able to click on a card would bring more possibilities for the component.

I tried to use it using the example provided for vue 3 but it doesn't render anything inside <div class="vue-tinder"></div>

Hey! What can cause a problem where touches work for some time but then suddenly do not anymore? I tried debugging but I can not find a place where it stops working. I found out that both start and move functions do return values. Just that the card itself won't be affected by the changes.

Does my case go under one of the following descriptions I found from TODO list in README.

1. The mobile end may accidentally touch VueTinder when the finger slides back.
2. In non-sync mode, press and hold the card immediately after the operation. If the front card disappears completely, the DOM node will be stuck after being removed, and the Touchend and Touchcancel events in the component will not be triggered.

For me it seems like it does not have to be completed operation nor in sync mode to reproduce the second item in the list.

These are my parameters on vue-tinder itself:

<vue-tinder
      v-if="items.length > 0"
      ref="tinder"
      :allow-super="true"
      key-name="id"
      :pointer-threshold="1.0"
      :super-threshold="1.0"
      :queue.sync="items"
      @submit="submit"
      @update:queue="onListUpdate"
    />

Here is illustration about this: