overlay_addtocart v2.0.0

Overlay Add to cart

Description

Add to cart effect to use in order shop vue application

Install

#npm
npm i overlay_addtocart

Import in Vue

import Vue from "vue";
import App from "./App.vue";
import overlay from "overlay_addtocart";

Vue.use(overlay);

new Vue({
  render: (h) => h(App),
}).$mount("#app");

Using

<template>
  <div>
    <button @click="test">a</button>
    <div ref="start" class="start"></div>
    <div ref="end" class="end"></div>
  </div>
</template>

<script>
import ItemCompo from '@/components/ItemCompo'
export default {
  methods: {
    test() {
      this.$overlay({
        from: ".start",
        to: ".end",
        duration: 2000, // ms
        startScale: 0.9,
        startOpacity: 0.9,
        endScale: 0.1,
        endOpacity: 0.1,
        render: this.$createElement(ItemCompo)  // >> VNode
        done: () => {
          alert("done");
        },
      });
    },
  },
};
</script>

without using query selector

...
        from: this.$refs.start,
        to: this.$refs.end,
...

Options

phamthao2001