From 3b1d21ff71350c93442fb53a183d0e7518cfddb1 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Thu, 11 Jul 2024 15:20:43 +0800 Subject: [PATCH] =?UTF-8?q?page:=20=F0=9F=93=84=20=E9=BC=A0=E6=A0=87?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 223 ++++++++++++++++++------ src/views/styling/mouse-style/index.vue | 85 +++++++++ 2 files changed, 252 insertions(+), 56 deletions(-) create mode 100644 src/views/styling/mouse-style/index.vue diff --git a/README.md b/README.md index f98de4a..4c9edbc 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,114 @@ +# 待学习内容 + +```sh +Mouse Cursor Style +Blend Mode +Fill Stroke Order +EVENTS +Binding Events +Mobile Events +Pointer Events +Desktop and Mobile Event +Mobile Scrolling +Multi Event +Remove Event +Remove by Name +Listen for Events +Cancel Propagation +Event Delegation +Fire Events +Stage Events +Custom Hit Region +Image Hit Region +Keyboard Events +Desktop and Mobile +DRAG AND DROP +Drag and Drop +Drag an Image +Drag a Group +Drag a Line +Drag a Stage +Drag Events +Simple Drag Bounds +Complex Drag and Drop +Drop Events +SELECT AND TRANSFORM +Basic demo +Centered Scaling +Keep Ratio +Styling +Complex Styling +Transform Events +Resize Limits +Rotation Snaps +Resize Snaps +Stop Transform +Force Update +Text Resizing +Ignore Stroke +CLIPPING +Simple Clip +Complex Clip +GROUPS, LAYERS AND ORDERING +Groups +Layering +Change Containers +zIndex +FILTERS +Blur +Brighten +Contrast +Emboss +Enhance +Grayscale +HSL +HSV +RGB +Invert +Kaleidoscope +Mask +Noise +Pixelate +Custom Filter +Multiple Filters +TWEENS +Linear Easing +Common Easings +All Easings +Finish Event +All Controls +Tween Filter +Complex Tweening +ANIMATIONS +Create an Animation +Moving +Rotation +Scaling +Stop Animation +SELECTORS +Select by id +Select by Type +Select by Name +DATA & SERIALIZATION & EXPORT +Serialize a Stage +Simple Load +Complex Load +JSON Best Practices +Stage Data URL +Export to HD Image +PERFORMANCE +All tips +Layer Management +Batch Draw +Shape Caching +Optimize Animation +Optimize Strokes +Shape Redraw +Disable Perfect Drawing +Listening False +Avoid Memory Leaks +``` + # Vite相关使用 ## .env文件 @@ -14,9 +125,9 @@ ```ts export default defineConfig( - (): UserConfig => ({ - envPrefix: 'BUNNY', - }), + (): UserConfig => ({ + envPrefix: 'BUNNY', + }), ); ``` @@ -34,7 +145,7 @@ npm i vite-plugin-compress import compress from 'vite-plugin-compress'; export default { - plugins: [compress()], + plugins: [compress()], }; ``` @@ -50,8 +161,8 @@ const routeMap: Record = {}; // * 所有处理的路由 const contexts = [ - { context: import.meta.glob('@/views/**/index.vue', { eager: true, import: 'default' }), isIndex: true }, - { context: import.meta.glob('@/views/**/page.ts', { eager: true, import: 'default' }), isIndex: false }, + { context: import.meta.glob('@/views/**/index.vue', { eager: true, import: 'default' }), isIndex: true }, + { context: import.meta.glob('@/views/**/page.ts', { eager: true, import: 'default' }), isIndex: false }, ]; /** @@ -61,23 +172,23 @@ const contexts = [ * @param route 路由内容 */ function buildRouteTree(context: any, isIndex: boolean, route: any) { - // 遍历当前子路由 - Object.entries(context).forEach(([filePath, _]) => { - // 获取子路由下所有文件对象格式 - const childrenFileInfo = routeFilenameHelper(filePath); - // 组装子路由对象 - const childrenRoute: any = { - name: childrenFileInfo?.name, - path: childrenFileInfo!.path, - component: isIndex ? context[filePath] : undefined, - children: [], - meta: { isFullScreen: false }, - }; - // 如果当前路由对象等于当前遍历的路由子对象，将子路由推到父级路由中 - if (childrenFileInfo?.path.includes(route.path) && childrenFileInfo?.path !== route.path) { - route.children.push(childrenRoute); - } - }); + // 遍历当前子路由 + Object.entries(context).forEach(([filePath, _]) => { + // 获取子路由下所有文件对象格式 + const childrenFileInfo = routeFilenameHelper(filePath); + // 组装子路由对象 + const childrenRoute: any = { + name: childrenFileInfo?.name, + path: childrenFileInfo!.path, + component: isIndex ? context[filePath] : undefined, + children: [], + meta: { isFullScreen: false }, + }; + // 如果当前路由对象等于当前遍历的路由子对象，将子路由推到父级路由中 + if (childrenFileInfo?.path.includes(route.path) && childrenFileInfo?.path !== route.path) { + route.children.push(childrenRoute); + } + }); } /** @@ -86,31 +197,31 @@ function buildRouteTree(context: any, isIndex: boolean, route: any) { * @param isIndex 是否为索引遍历 */ const createRouteList = (context: any, isIndex: boolean) => { - Object.entries(context).forEach(([filePath, exportRouteConfig]) => { - const fileInfo = routeFilenameHelper(filePath); - // 组装路由对象 - const route: any = { - name: fileInfo?.name, - path: fileInfo!.path, - component: isIndex ? context[filePath] : undefined, - children: [], - meta: { isFullScreen: false }, - }; + Object.entries(context).forEach(([filePath, exportRouteConfig]) => { + const fileInfo = routeFilenameHelper(filePath); + // 组装路由对象 + const route: any = { + name: fileInfo?.name, + path: fileInfo!.path, + component: isIndex ? context[filePath] : undefined, + children: [], + meta: { isFullScreen: false }, + }; - // 初始化赋值 - if (isIndex) { - routeMap[route.path] = route; - buildRouteTree(context, isIndex, route); - } else { - // 导出当前存在的路由并重新赋值 - const existingRoute = routeMap[route.path]; - // 当前路由存在 - if (existingRoute) { - // 使用loadsh合并对象 - routeMap[route.path] = _.merge(existingRoute, exportRouteConfig); - } - } - }); + // 初始化赋值 + if (isIndex) { + routeMap[route.path] = route; + buildRouteTree(context, isIndex, route); + } else { + // 导出当前存在的路由并重新赋值 + const existingRoute = routeMap[route.path]; + // 当前路由存在 + if (existingRoute) { + // 使用loadsh合并对象 + routeMap[route.path] = _.merge(existingRoute, exportRouteConfig); + } + } + }); }; // * 生成路由信息 @@ -129,7 +240,7 @@ console.log(import.meta.env); ## 动态加载CDN -在Module中配置相关内容，相关文档查看：https://www.npmjs.com/package/vite-plugin-cdn-import +在Module中配置相关内容，相关文档查看： ```ts import vue from '@vitejs/plugin-vue'; @@ -138,13 +249,13 @@ import { defineConfig, UserConfig } from 'vite'; import cdn from 'vite-plugin-cdn-import'; export default defineConfig( - (): UserConfig => ({ - plugins: [ - cdn({ - modules: [], - }), - ], - }), + (): UserConfig => ({ + plugins: [ + cdn({ + modules: [], + }), + ], + }), ); ``` @@ -160,7 +271,7 @@ export default defineConfig( legacy({ targets: ["defaults", "not IE 11"] }), ``` -详细配置查看：https://www.npmjs.com/package/@vitejs/plugin-legacy +详细配置查看： ## 打包设置 diff --git a/src/views/styling/mouse-style/index.vue b/src/views/styling/mouse-style/index.vue new file mode 100644 index 0000000..44a28d6 --- /dev/null +++ b/src/views/styling/mouse-style/index.vue @@ -0,0 +1,85 @@ + + +