SEEC-Portal-Front/src/components/Basic/Ripple.vue

<template>
    <el-tag></el-tag>
<!--  <div class="ripple-wrapper" :class="color || ''">-->
<!--    <div class="ripple" @click="handleRipple" :class="className" :style="size ? `width: ${size}px; height: ${size}px;` : ''">-->
<!--    </div>-->
<!--    <div class="background"></div>-->
<!--  </div>-->
</template>

<script>
// export default {
//   props: ["size", "color"],
//   data () {
//     return {
//       className: "hide"
//     };
//   },
//   methods: {
//     handleRipple () {
//       this.className = "";
//       this.$nextTick(() => {
//         this.className = "show";
//         setTimeout(() => {
//           this.className = "";
//         }, 500);
//       });
//     }
//   }
// };
</script>

<!--<style lang="scss" scoped>-->
<!--@import "src/style/theme.scss";-->

<!--$opacity: 1;-->
<!--.ripple-wrapper {-->
<!--  position: absolute;-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  top: 0;-->
<!--  left: 0;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: center;-->
<!--}-->

<!--.ripple {-->
<!--  -webkit-tap-highlight-color: transparent;-->
<!--  opacity: 0;-->
<!--  width: 80px;-->
<!--  height: 80px;-->
<!--  z-index: 2;-->
<!--  position: absolute;-->
<!--  background-color: $theme-blue-transparent;-->
<!--  border-radius: 100000px;-->
<!--  transform-origin: center;-->
<!--}-->

<!--.show {-->
<!--  opacity: $opacity;-->
<!--  animation: ripple .5s forwards ease-out;-->
<!--}-->

<!--.red {-->
<!--  .ripple {-->
<!--    background: $theme-red-transparent;-->
<!--  }-->
<!--}-->

<!--.orange {-->
<!--  .ripple {-->
<!--    background: $theme-orange-transparent;-->
<!--  }-->
<!--}-->

<!--.green {-->
<!--  .ripple {-->
<!--    background: $theme-green-transparent;-->
<!--  }-->
<!--}-->

<!--.blue {-->
<!--  .ripple {-->
<!--    background: $theme-blue-transparent;-->
<!--  }-->
<!--}-->

<!--@keyframes ripple {-->
<!--  0% {-->
<!--    opacity: $opacity;-->
<!--    transform: scale(0.1, 0.1);-->
<!--  }-->
<!--  40% {-->
<!--    opacity: $opacity;-->
<!--    transform: scale(1, 1);-->
<!--  }-->
<!--  80% {-->
<!--    opacity: $opacity;-->
<!--    transform: scale(1, 1);-->
<!--  }-->
<!--  100% {-->
<!--    opacity: 0;-->
<!--  }-->
<!--}-->
<!--</style>-->