add new component

README.md

@@ -21,6 +21,15 @@
 - [vue-router](https://router.vuejs.org/zh/) `router`
 - [axios](http://axios-js.com/zh-cn/docs/index.html) `ajax request`
 - [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html) `国际化`
+- [scrollreveal.js](https://scrollrevealjs.org/) `滚动加载动画`
+
+## 组件说明
+
+`RayIcon` 结合插件 `vite-plugin-svg-icons` 使用, 可以直接在项目中按照规范使用 `svg` 做为图标
+
+`RayScrollReveal` 基于 `ScrollReveal` 进行开发, 可以实现滚动加载动画
+
+`RayTransitionComponent` 路由过渡动画组件, 可根据自己喜好更改 `src/styles/animate.scss` 文件过渡效果
 
 ## 项目结构
 

package.json

@@ -13,12 +13,14 @@
     "axios": "^0.27.2",
     "pinia": "^2.0.17",
     "sass": "^1.54.3",
+    "scrollreveal": "^4.0.9",
     "vue": "^3.2.37",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.3"
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^0.5.0",
+    "@types/scrollreveal": "^0.0.8",
     "@vitejs/plugin-vue": "^3.0.0",
     "@vitejs/plugin-vue-jsx": "^2.0.0",
     "prettier": "^2.7.1",

src/App.tsx

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue'
 import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue' // 以封装动画路由组件
 import DraggableComponent from '@/components/DraggableComponent/index.vue'
 import RayIcon from '@/components/RayIcon/index'
+import RayScrollReveal from '@/components/RayScrollReveal/index'
 
 const App = defineComponent({
   name: 'App',
@@ -27,6 +28,15 @@ const App = defineComponent({
           当前鼠标位置: x: {this.x}, y: {this.y}
         </h1>
         <DraggableComponent />
+        {Array.from({ length: 10 }, (_, i) => i).map((_, idx) => (
+          <RayScrollReveal>
+            <div
+              style={`width: 100%; height: 300px;border: 1px solid #FDD192;margin: 20px;background: #e7f5ee;`}
+            >
+              {idx}
+            </div>
+          </RayScrollReveal>
+        ))}
       </div>
     )
   },

src/components/DraggableComponent/index.vue

@@ -2,7 +2,7 @@
 const el = ref<HTMLElement | null>(null)
 
 const { x, y, style } = useDraggable(el, {
-  initialValue: { x: 40, y: 140 },
+  initialValue: { x: 630, y: 14 },
 })
 </script>
 
@@ -18,5 +18,6 @@ const { x, y, style } = useDraggable(el, {
   padding: 8px 16px;
   border: 1px solid rgba(156, 163, 175, 0.3);
   cursor: move;
+  z-index: 10;
 }
 </style>

src/components/RayScrollReveal/index.tsx

@@ -0,0 +1,60 @@
+import { defineComponent, PropType } from 'vue'
+import './index.scss'
+import ScrollReveal from 'scrollreveal'
+
+const RayScrollReveal = defineComponent({
+  name: 'RayScrollReveal',
+  props: {
+    options: {
+      type: Object as PropType<scrollReveal.ScrollRevealObjectOptions>,
+    },
+  },
+  emits: ['scrollRevealSync'],
+  setup(props, { emit }) {
+    const scrollRevealRef = ref<HTMLElement>()
+
+    const handleRegisterScrollReveal = async () => {
+      const el = scrollRevealRef.value as HTMLElement
+      const defaultOptions = {
+        distance: '50px',
+        duration: 600,
+        reset: true,
+        easing: 'ease',
+        scale: 0.99,
+        mobile: true,
+      }
+
+      ScrollReveal().reveal(el, Object.assign(defaultOptions, props.options))
+    }
+
+    const handleScrollRevealSync = async () => {
+      emit('scrollRevealSync', ScrollReveal().sync)
+    }
+
+    onMounted(async () => {
+      await handleRegisterScrollReveal()
+      await handleScrollRevealSync()
+    })
+
+    return {
+      scrollRevealRef,
+    }
+  },
+  render() {
+    return (
+      <div class="ray-scroll-reveal" ref="scrollRevealRef">
+        {this.$slots.default?.()}
+      </div>
+    )
+  },
+})
+
+export default RayScrollReveal
+
+/**
+ *
+ * 滚动加载过度组件, 来回滚动时, 可以重复触发效果
+ * 只需要将 dom 插入在 RayScrollReveal 组件下即可
+ * 如果需要使用重新注册加载脚本或者有新的 dom 插入, 调用 scrollRevealCallback 函数即可捕获添加到 dom 的任何新元素
+ * 注意: 插件始终是以显示屏为窗口作为判断元素是否显示, 所以自定义滚动条滚动加载元素不生效
+ */

src/components/RayTransitionComponent/index.vue

@@ -11,4 +11,5 @@
 // 带过渡动画 RouterView 组件
 // 如果子路由需要做动画切换，则需要此组件
 // 为什么必须为 vue 文件，因为 tsx 文件在解析的时候会抛出警告不好看
+// 只需要像使用 RouterView 组件时一样使用即可, 但是不能对于子路由生效, 所以需要在子路由显示的地方替换 RouterView 组件
 </script>

yarn.lock

@@ -443,6 +443,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.6.4.tgz#fd26723a8a3f8f46729812a7f9b4fc2d1608ed39"
   integrity sha512-I4BD3L+6AWiUobfxZ49DlU43gtI+FTHSv9pE2Zekg6KjMpre4ByusaljW3vYSLJrvQ1ck1hUaeVu8HVlY3vzHg==
 
+"@types/scrollreveal@^0.0.8":
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/@types/scrollreveal/-/scrollreveal-0.0.8.tgz#d0313ac67b57a32b3beb224e20af63ab13cd2696"
+  integrity sha512-HwD3vSmxjEozI4+uHY7pPxB47gppsv0racBHZreEQFC6K1kBKaIUkCTwUMH6gGFEDmLrgOckfGsTvR/n2yyV6g==
+
 "@types/svgo@^2.6.1":
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/@types/svgo/-/svgo-2.6.3.tgz#0786d8329b67cd48d84e57cb92b79832b85e6c8e"
@@ -1610,6 +1615,18 @@ is-descriptor@^1.0.0, is-descriptor@^1.0.2:
     is-data-descriptor "^1.0.0"
     kind-of "^6.0.2"
 
+is-dom-node-list@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-dom-node-list/-/is-dom-node-list-1.2.1.tgz#141ded0c66de759d0976800d21370bb908f2950f"
+  integrity sha512-P1H071iT5TGG8pAHslhrLDo/tQLYc8tGuWABVqhGU4l2mm7aDNb9cx2myQ2AujEQO6B2cAujcW4a0/+6UfXInw==
+  dependencies:
+    is-dom-node "^1.0.4"
+
+is-dom-node@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-dom-node/-/is-dom-node-1.0.4.tgz#abb18af7133f1e687610cfeb274da1ced342f1c5"
+  integrity sha512-NEnTHKCeyGJTL0cKdzATF8SWzyTMYf5CbNKWBvsXvyMxZG32g+a09qkeCbrfQNLTD85CbPeHb4YjIJCjyzF0yA==
+
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -1881,6 +1898,11 @@ minimist@^1.2.0:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
+miniraf@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/miniraf/-/miniraf-1.0.0.tgz#5d88e108bbdcb55b4a2ff3da337f24a13a3377e1"
+  integrity sha512-XpvhtJYzVrpXe+JoAthrT9E40NIrSDDMcdHEYL2M+lR/OCas0nadetcBBq/MWYqlgV5aDWVQ3mfAqd+fG6Y/EQ==
+
 mixin-deep@^1.2.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
@@ -2136,6 +2158,11 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+rematrix@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/rematrix/-/rematrix-0.3.0.tgz#4f3f9156aa80ded8a8ca23785f48c6012b6dea4a"
+  integrity sha512-xB/9ZvJIKaDgXX0qkvV9/pLD8zK23A6TVV6F8Vhsl+SrxbBeVYutz5uszxgC6Rt3RP9LZiH8OXaYjr+x6WXWmQ==
+
 repeat-element@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
@@ -2210,6 +2237,15 @@ sass@^1.54.3:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+scrollreveal@^4.0.9:
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/scrollreveal/-/scrollreveal-4.0.9.tgz#47866e1967ff604e64bac28818fe0dcea44f2c8b"
+  integrity sha512-fefGvzVS8YbXbDK1+T0kvy2yqxaiBJZeGUhPeqajf+7sGqtX4xikbKGAlzQuPCpswAMswx94ZwhDjXKnRIqW1w==
+  dependencies:
+    miniraf "1.0.0"
+    rematrix "0.3.0"
+    tealight "0.3.6"
+
 scule@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/scule/-/scule-0.3.2.tgz#472445cecd8357165a94a067f78cee40e700b596"
@@ -2419,6 +2455,14 @@ svgo@^2.8.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+tealight@0.3.6:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/tealight/-/tealight-0.3.6.tgz#14c8071ce3c188972a5cb7d8a5668ca2820b4292"
+  integrity sha512-Dys3N8jFBThD9pNVpPCyUiu6DfWcTBdqWQJIvnAuVaFkGEdrPBJ43070vVbn6sTlLvn2IQK2zFW4FrVIrTo8eQ==
+  dependencies:
+    is-dom-node "^1.0.4"
+    is-dom-node-list "^1.2.1"
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"