diff --git a/src/views/demo/backToHttp/1.png b/public/absRes/backToHttp/1.png similarity index 100% rename from src/views/demo/backToHttp/1.png rename to public/absRes/backToHttp/1.png diff --git a/src/views/demo/backToHttp/2.png b/public/absRes/backToHttp/2.png similarity index 100% rename from src/views/demo/backToHttp/2.png rename to public/absRes/backToHttp/2.png diff --git a/src/views/demo/scssLiveTranslate/sass.sync.js b/public/absRes/scssLiveTranslate/sass.sync.js similarity index 100% rename from src/views/demo/scssLiveTranslate/sass.sync.js rename to public/absRes/scssLiveTranslate/sass.sync.js diff --git a/src/views/demo/tuiImageEditor/img/test.jpg b/public/absRes/tuiImageEditor/img/test.jpg similarity index 100% rename from src/views/demo/tuiImageEditor/img/test.jpg rename to public/absRes/tuiImageEditor/img/test.jpg diff --git a/src/views/demo/tuiImageEditor/js/FileSaver.js b/public/absRes/tuiImageEditor/js/FileSaver.js similarity index 100% rename from src/views/demo/tuiImageEditor/js/FileSaver.js rename to public/absRes/tuiImageEditor/js/FileSaver.js diff --git a/src/views/demo/tuiImageEditor/js/black-theme.js b/public/absRes/tuiImageEditor/js/black-theme.js similarity index 100% rename from src/views/demo/tuiImageEditor/js/black-theme.js rename to public/absRes/tuiImageEditor/js/black-theme.js diff --git a/src/views/demo/tuiImageEditor/js/fabric.js b/public/absRes/tuiImageEditor/js/fabric.js similarity index 100% rename from src/views/demo/tuiImageEditor/js/fabric.js rename to public/absRes/tuiImageEditor/js/fabric.js diff --git a/src/views/demo/tuiImageEditor/js/tui-code-snippet.js b/public/absRes/tuiImageEditor/js/tui-code-snippet.js similarity index 100% rename from src/views/demo/tuiImageEditor/js/tui-code-snippet.js rename to public/absRes/tuiImageEditor/js/tui-code-snippet.js diff --git a/src/views/demo/tuiImageEditor/js/tui-color-picker.js b/public/absRes/tuiImageEditor/js/tui-color-picker.js similarity index 100% rename from src/views/demo/tuiImageEditor/js/tui-color-picker.js rename to public/absRes/tuiImageEditor/js/tui-color-picker.js diff --git a/src/views/demo/tuiImageEditor/js/tui-image-editor.js b/public/absRes/tuiImageEditor/js/tui-image-editor.js similarity index 100% rename from src/views/demo/tuiImageEditor/js/tui-image-editor.js rename to public/absRes/tuiImageEditor/js/tui-image-editor.js diff --git a/src/views/demo/tuiImageEditor/js/white-theme.js b/public/absRes/tuiImageEditor/js/white-theme.js similarity index 100% rename from src/views/demo/tuiImageEditor/js/white-theme.js rename to public/absRes/tuiImageEditor/js/white-theme.js diff --git a/src/views/demo/vListDoc1/img/1.png b/public/absRes/vListDoc1/img/1.png similarity index 100% rename from src/views/demo/vListDoc1/img/1.png rename to public/absRes/vListDoc1/img/1.png diff --git a/src/views/demo/vListDoc1/img/2.png b/public/absRes/vListDoc1/img/2.png similarity index 100% rename from src/views/demo/vListDoc1/img/2.png rename to public/absRes/vListDoc1/img/2.png diff --git a/src/views/demo/vListDoc1/img/3.png b/public/absRes/vListDoc1/img/3.png similarity index 100% rename from src/views/demo/vListDoc1/img/3.png rename to public/absRes/vListDoc1/img/3.png diff --git a/src/views/demo/vListDoc1/img/4.png b/public/absRes/vListDoc1/img/4.png similarity index 100% rename from src/views/demo/vListDoc1/img/4.png rename to public/absRes/vListDoc1/img/4.png diff --git a/src/views/demo/vListDoc1/img/5.gif b/public/absRes/vListDoc1/img/5.gif similarity index 100% rename from src/views/demo/vListDoc1/img/5.gif rename to public/absRes/vListDoc1/img/5.gif diff --git a/src/views/demo/vListDoc2/img/1.png b/public/absRes/vListDoc2/img/1.png similarity index 100% rename from src/views/demo/vListDoc2/img/1.png rename to public/absRes/vListDoc2/img/1.png diff --git a/src/views/demo/vListDoc2/img/2.gif b/public/absRes/vListDoc2/img/2.gif similarity index 100% rename from src/views/demo/vListDoc2/img/2.gif rename to public/absRes/vListDoc2/img/2.gif diff --git a/src/views/demo/backToHttp/backToHttp.md b/src/views/demo/backToHttp/backToHttp.md index c586c90..75a52a9 100644 --- a/src/views/demo/backToHttp/backToHttp.md +++ b/src/views/demo/backToHttp/backToHttp.md @@ -14,8 +14,8 @@ 3. 选择`允许`选项 4. 刷新页面生效 -![操作示例](/src/views/demo/backToHttp/1.png) -![操作示例](/src/views/demo/backToHttp/2.png) +![操作示例](/absRes/backToHttp/1.png) +![操作示例](/absRes/backToHttp/2.png) ## 参考网站 [Chrome 浏览器：取消http自动跳转https的默认设置](https://maoyanqing.com/chrome-delete-domain-security-policies) \ No newline at end of file diff --git a/src/views/demo/cssDemo.vue b/src/views/demo/cssDemo.vue index 8c0c0e2..5b448fe 100644 --- a/src/views/demo/cssDemo.vue +++ b/src/views/demo/cssDemo.vue @@ -78,7 +78,7 @@ .blurred-glass-box { width: 100%; height: 300px; - background: url('/src/views/demo/tuiImageEditor/img/test.jpg') no-repeat center center; + background: url('/absRes/tuiImageEditor/img/test.jpg') no-repeat center center; background-size: cover; display: flex; align-items: center; diff --git a/src/views/demo/scssLiveTranslate/index.vue b/src/views/demo/scssLiveTranslate/index.vue index 431efd8..6c42fbe 100644 --- a/src/views/demo/scssLiveTranslate/index.vue +++ b/src/views/demo/scssLiveTranslate/index.vue @@ -306,7 +306,7 @@ async function ensureSass() { try { await new Promise((resolve, reject) => { const script = document.createElement('script'); - script.src = '/src/views/demo/scssLiveTranslate/sass.sync.js'; + script.src = '/absRes/scssLiveTranslate/sass.sync.js'; script.onload = () => resolve(); script.onerror = (e) => reject(new Error('Sass.js failed to load')); document.head.appendChild(script); diff --git a/src/views/demo/tuiImageEditor/components/image-editor.vue b/src/views/demo/tuiImageEditor/components/image-editor.vue index 07c164b..bbd3013 100644 --- a/src/views/demo/tuiImageEditor/components/image-editor.vue +++ b/src/views/demo/tuiImageEditor/components/image-editor.vue @@ -74,13 +74,13 @@ onMounted(async () => { loading.value = true; if (!window.hasOwnProperty('tui')) { // 加载同级目录下的js文件 - await createScriptElement('/src/views/demo/tuiImageEditor/js/fabric.js'); - await createScriptElement('/src/views/demo/tuiImageEditor/js/tui-code-snippet.js'); - await createScriptElement('/src/views/demo/tuiImageEditor/js/tui-color-picker.js'); - await createScriptElement('/src/views/demo/tuiImageEditor/js/FileSaver.js'); - await createScriptElement('/src/views/demo/tuiImageEditor/js/tui-image-editor.js'); - await createScriptElement('/src/views/demo/tuiImageEditor/js/white-theme.js'); - await createScriptElement('/src/views/demo/tuiImageEditor/js/black-theme.js'); + await createScriptElement('/absRes/tuiImageEditor/js/fabric.js'); + await createScriptElement('/absRes/tuiImageEditor/js/tui-code-snippet.js'); + await createScriptElement('/absRes/tuiImageEditor/js/tui-color-picker.js'); + await createScriptElement('/absRes/tuiImageEditor/js/FileSaver.js'); + await createScriptElement('/absRes/tuiImageEditor/js/tui-image-editor.js'); + await createScriptElement('/absRes/tuiImageEditor/js/white-theme.js'); + await createScriptElement('/absRes/tuiImageEditor/js/black-theme.js'); } initTuiImageEditor(); addEventListenerFN(); diff --git a/src/views/demo/tuiImageEditor/index.vue b/src/views/demo/tuiImageEditor/index.vue index 7f23d56..f6657e6 100644 --- a/src/views/demo/tuiImageEditor/index.vue +++ b/src/views/demo/tuiImageEditor/index.vue @@ -38,7 +38,7 @@ const imgList = ref([ name: '3', }, { - path: '/src/views/demo/tuiImageEditor/img/test.jpg', + path: '/absRes/tuiImageEditor/img/test.jpg', name: '3', }, ]); diff --git a/src/views/demo/vListDoc1/vListDoc1.md b/src/views/demo/vListDoc1/vListDoc1.md index c5a6595..ba12270 100644 --- a/src/views/demo/vListDoc1/vListDoc1.md +++ b/src/views/demo/vListDoc1/vListDoc1.md @@ -9,7 +9,7 @@ 有的特殊场景我们不能分页，只能渲染一个长列表。这个长列表中可能有几万条数据，如果全部渲染到页面上用户的设备差点可能就会直接卡死了，这时我们就需要虚拟列表来解决问题。 一个常见的虚拟列表是下面这样的，如下图： -![v1](/src/views/demo/vListDoc1/img/1.png) +![v1](/absRes/vListDoc1/img/1.png) 其中实线框的item表示在视口区域内真实渲染DOM，虚线框的item表示并没有渲染的DOM。 @@ -119,19 +119,19 @@ function handleScroll(e) { 如果当前`itemSize`的值为100。 如果此时滚动的距离在0-100之间，比如下面这样： -![v1](/src/views/demo/vListDoc1/img/2.png) +![v1](/absRes/vListDoc1/img/2.png) 上面这张图item1还没完全滚出可视区域，有部分在可视区域内，部分在可视区域外。此时可视区域内显示的就是`item1-item7`的模块了，这就是为什么前面我们计算end时要多渲染一个item，不然这里item7就没法显示了。 **滚动距离在0-100之间时，渲染的DOM没有变化，我们完全是复用浏览器的滚动，并没有进行任何处理。** 当`scrollTop`的值为100时，也就是刚刚把item1滚到可视区外面时。此时item1已经不需要渲染了，因为已经看不见他了。所以此时的`start`的值就应该从`0`更新为`1`，同理如果`scrollTop`的值为`110`，start的值也一样是`1`。所以得出`start.value = Math.floor(scrollTop / itemSize);`如下图： -![v1](/src/views/demo/vListDoc1/img/3.png) +![v1](/absRes/vListDoc1/img/3.png) 此时的`start`从item2开始渲染，但是由于前面我们复用了浏览器的滚动，所以实际渲染的DOM第一个已经在可视区外面了。此时可视区看见的第一个是item3，很明显是不对的，应该看见的是第一个是item2。 此时应该怎么办呢？ 很简单，使用`translate`将列表向下偏移一个item的高度就行，也就是100px。列表偏移后就是下面这样的了： -![v1](/src/views/demo/vListDoc1/img/4.png) +![v1](/absRes/vListDoc1/img/4.png) 如果当前`scrollTop`的值为200，那么偏移值就是200px。所以我们得出 ```javascript @@ -145,7 +145,7 @@ offset.value = scrollTop - (scrollTop % itemSize); 实际上从一个item滚动到另外一个item时，比如从`item0`滚动到`item1`。此时会做两件事情：将`start`的值从`0`更新为`1`和根据`scrollTop`计算得到列表的偏移值`100`，从而让新的start对应的`item1`重新回到可视范围内。 这个是运行效果图： -![v1](/src/views/demo/vListDoc1/img/5.gif) +![v1](/absRes/vListDoc1/img/5.gif) 下面是完整的代码： ```javascript diff --git a/src/views/demo/vListDoc2/vListDocs2.md b/src/views/demo/vListDoc2/vListDocs2.md index 6b7d08e..b3fe395 100644 --- a/src/views/demo/vListDoc2/vListDocs2.md +++ b/src/views/demo/vListDoc2/vListDocs2.md @@ -7,7 +7,7 @@ # 什么是不定高虚拟列表 不定高的意思很简单，就是不知道每一项item的具体高度，如下图： -![v1](/src/views/demo/vListDoc2/img/1.png) +![v1](/absRes/vListDoc2/img/1.png) 现在我们有个问题，**在不定高的情况下我们就不能根据当前滚动条的`scrollTop`去计算可视区域里面实际渲染的第一个item的index位置，也就是`start`的值。** @@ -266,7 +266,7 @@ const getTransform = computed(() => `translate3d(0,${props.offset}px,0)`); ``` 这个是最终的运行效果图： -![v1](/src/views/demo/vListDoc2/img/2.gif) +![v1](/absRes/vListDoc2/img/2.gif) 完整的父组件代码如下： ```javascript diff --git a/src/views/welcome/config.json b/src/views/welcome/config.json index 1cde6e2..448eb21 100644 --- a/src/views/welcome/config.json +++ b/src/views/welcome/config.json @@ -1,8 +1,8 @@ { "totalNotes": 74, "categories": 5, - "lastUpdated": "2025-10-14T03:06:31.162Z", - "weeklyAdded": 5, + "lastUpdated": "2025-10-15T08:30:23.764Z", + "weeklyAdded": 8, "categoryChartData": [ { "name": "demo", @@ -27,34 +27,34 @@ ], "recentNotes": [ { - "path": "demo/deletdNodeModules/index.vue", - "title": "删除 node_modules 文件夹非常耗时解决办法", + "path": "demo/scssLiveTranslate/index.vue", + "title": "SCSS → CSS 实时翻译器", "category": "demo", - "date": "2025-10-14" + "date": "2025-10-15" }, { - "path": "demo/asyncDynComp/index.vue", - "title": "异步动态加载组件", + "path": "demo/cssDemo.vue", + "title": "cssDemo", "category": "demo", - "date": "2025-10-11" + "date": "2025-10-15" }, { - "path": "demo/asyncDynComp/moduleA/item2.vue", - "title": "item2", + "path": "demo/tuiImageEditor/index.vue", + "title": "tuiImageEditor", "category": "demo", - "date": "2025-10-11" + "date": "2025-10-15" }, { - "path": "demo/asyncDynComp/moduleA/item1.vue", - "title": "item1", + "path": "demo/deletdNodeModules/index.vue", + "title": "删除 node_modules 文件夹非常耗时解决办法", "category": "demo", - "date": "2025-10-11" + "date": "2025-10-14" }, { - "path": "demo/dataSafe/index.vue", - "title": "数据安全-加密解密与掩码", + "path": "demo/asyncDynComp/index.vue", + "title": "异步动态加载组件", "category": "demo", - "date": "2025-10-10" + "date": "2025-10-11" } ] } \ No newline at end of file