意外中发现一个有意思的轮子，可以用来做加载中的动画， 只需一张图

这是大佬的文章手撕红黑树 (opens new window)

一、用vite创建的vue3为例

npm i fancy-components 安装一下插件，然后在入口文件main.tsnew一下

    import { createApp } from 'vue'
    import App from './App.vue'

    import { FcWaveFilter } from 'fancy-components'
    new FcWaveFilter()

    createApp(App).mount('#app')

接着在vite.config.js中配置一下

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'

    // https://vitejs.dev/config/
    export default defineConfig({
        plugins: [vue({
            template: {
                compilerOptions: {
                isCustomElement: tag => tag.startsWith('fc-')
                }
            }
        })]
    })

最后直接在页面中使用

    <fc-wave-filter color="#ff0000">
        <img src="./assets/logo1.png" />
    </fc-wave-filter>