为滑动验证组件添加动画效果

package.json

@@ -1,11 +1,11 @@
 {
-  "name": "go-captcha-vue",
-  "version": "2.0.6",
+  "name": "miharakinu-go-captcha-vue",
+  "version": "2.0.7",
   "private": false,
   "type": "module",
   "license": "MIT",
-  "email": "wengaolng@gmail.com",
-  "author": "Awen <[email protected]>",
+  "email": "MiharaKinu1999@gmail.com",
+  "author": "MiharaKinu",
   "description": "GoCaptcha of Vue, which implements click mode, slider mode, drag-drop mode and rotation mode.",
   "keywords": [
     "go-captcha-vue",
@@ -17,13 +17,13 @@
     "gocapts"
   ],
   "bugs": {
-    "url": "https://github.com/wenlng/go-captcha-vue/issues"
+    "url": "https://github.com/MiharaKinu/go-captcha-vue/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/wenlng/go-captcha-vue.git"
+    "url": "git+https://github.com/MiharaKinu/go-captcha-vue.git"
   },
-  "homepage": "https://github.com/wenlng/go-captcha-vue",
+  "homepage": "https://github.com/MiharaKinu/go-captcha-vue",
   "main": "dist/go-captcha-vue.umd.js",
   "module": "dist/go-captcha-vue.es.js",
   "types": "./dist/index.d.ts",
@@ -70,5 +70,8 @@
     "vue": "^3.0.0",
     "vite": "4.4.11",
     "vue-tsc": "^2.0.11"
+  },
+  "dependencies": {
+    "caniuse-lite": "^1.0.30001717"
   }
 }

packages/components/base/Tips.vue

@@ -0,0 +1,121 @@
+<template>
+  <div
+    ref="notification"
+    class="notification"
+    :class="[typeClass, { show: isVisible }]"
+  >
+    {{ content }}
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+
+const props = defineProps({
+  // 是否显示
+  show: {
+    type: Boolean,
+    default: false
+  },
+  // 显示内容
+  content: {
+    type: String,
+    default: ''
+  },
+  // 状态类型
+  type: {
+    type: String,
+    default: 'SUCCESS',
+    validator: (value) => ['SUCCESS', 'WARNING', 'ERROR'].includes(value)
+  },
+  // 自动关闭时间（毫秒），设为0则不自动关闭
+  duration: {
+    type: Number,
+    default: 1500
+  }
+})
+
+const emit = defineEmits(['update:show'])
+
+const notification = ref(null)
+const isVisible = ref(false)
+let hideTimeout = null
+
+const typeClass = computed(() => `notification-${props.type.toLowerCase()}`)
+
+watch(
+  () => props.show,
+  (newVal) => {
+    if (newVal) {
+      showNotification()
+    } else {
+      hideNotification()
+    }
+  }
+)
+
+onMounted(() => {
+  if (props.show) {
+    showNotification()
+  }
+})
+
+function showNotification() {
+  clearTimeout(hideTimeout)
+  isVisible.value = true
+
+  if (props.duration > 0) {
+    hideTimeout = setTimeout(() => {
+      hideNotification()
+    }, props.duration)
+  }
+}
+
+function hideNotification() {
+  isVisible.value = false
+  emit('update:show', false)
+}
+</script>
+
+<style lang="less">
+.notification {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  font-size: 16px;
+  z-index: 1000;
+  padding: 2px;
+
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(100%);
+
+  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55),
+              opacity 0.4s ease-in-out,
+              visibility 0s linear 0.5s;
+
+  &.show {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    transition-delay: 0s, 0s, 0s;
+  }
+
+  // 不同类型样式
+  &-success {
+    background-color: #34a853;
+  }
+
+  &-warning {
+    background-color: #fbbc05;
+  }
+
+  &-error {
+    background-color: #ea4335;
+  }
+}
+</style>

packages/components/slide/index.vue

@@ -21,7 +21,7 @@
       </div>
     </div>
     <div
-      class="gc-body"
+      :class="`gc-body ${innerTips.type == 'SUCCESS' && innerTips.show ? 'shine-effect-tr-bl' : ''}`"
       ref="containerRef"
       :style="imageStyles"
     >
@@ -35,6 +35,11 @@
         :src="localData.image"
         alt=""
       />
+      <Tips
+        v-model:show="innerTips.show"
+        :content="innerTips.content"
+        :type="innerTips.type"
+      />
       <div
         class="gc-tile"
         ref="tileRef"
@@ -82,6 +87,13 @@ import {defaultSlideData, SlideData} from "./meta/data";
 import {SlideEvent} from "./meta/event";
 import {SlideExpose} from "./meta/expose";
 import {useHandler} from "./hooks/handler";
+import Tips from "../base/Tips.vue";
+
+const innerTips = reactive({
+  show: false,
+  content: '',
+  type: 'SUCCESS',
+})
 
 // @ts-ignore
 const props = withDefaults(
@@ -197,6 +209,11 @@ defineExpose<SlideExpose>({
   clear: handler.clearData,
   refresh: handler.refresh,
   close: handler.close,
+  setTips: (show: boolean, content: string, type: string) => {
+    innerTips.show = show
+    innerTips.content = content
+    innerTips.type = type
+  }
 });
 </script>
 

packages/components/slide/meta/expose.ts

@@ -9,4 +9,5 @@ export interface SlideExpose {
   clear: () => void,
   refresh: () => void,
   close: () => void,
+  setTips: (show: boolean, content: string, type: string) => void,
 }