Skip to content

DevDoc.md

Latest commit

 

History

History
343 lines (232 loc) · 9.43 KB

DevDoc.md

File metadata and controls

343 lines (232 loc) · 9.43 KB

配置

eslint prettier husky commitlint src-@

package

vueuse router axios anywhere 随启随用的静态文件服务器 ——失败 删除了

是否为移动设备

src\utils\flexible.js

网络请求

axios相应拦截器 跨域 环境变量 dev prod

封装组件

svg

src\libs\svg-icon\index.vue 在Vue应用中安装和使用一个自定义的SVG图标组件库。 把封装的svg插件，在vite中注册：vite-plugin-svg-icons main.js注册

目录滑块

1 选中的 item 下标：currentCategoryIndex 2 所有 item 元素：itemRefs 3 ul 的横向滚动偏离位置：ulScrollLeft 4 最后在 currentCategoryIndex 发生改变时，获取 item 下标元素的 left 和 width，计算 sliderStyle 即可

popup

src\libs\popup\index.vue teleport transition vue3动画

popup + menu组件

自动注册libs(通用)组件

src\libs\index.js

  • 知识点 1.vite的Glob导入功能：该功能可以帮助我们在文件系统中导入多个模块 2.vue的defineAsyncComponent方法：该方法可以创建一个按需加载的异步组件

  • 具体方法1.获取当前路径下所有文件夹中的index.vue 2.遍历或许到的组件模块3.利用app component进行注册

PC端 layout

search

src\libs\search\index.vue /**

    1. 输入内容实现双向数据绑定
    1. 搜索按钮在 hover 是展示
    1. 一键清空文本功能
    1. 触发搜索
    1. 控制下拉展示区的展示
    1. 事件处理 */

button组件

需求分析 1 显示文字 提供loading能力 2 显示icon 可以指定icon颜色 3 可以开关的点击动画 4 制定各种风格和大小 5 当指定的风格或者大小不符合预设时，需要给开发者以提示消息

开发分析

    1. 构建 type 风格可选项和 size 大小可选项
    1. 通过 props 让开发者控制按钮
    1. 区分 icon button 和 text button
    1. 依据当前的数据，实现视图
    1. 处理点击事件

阻止事件冒泡
props emit slot

popover

用户将鼠标移入某个元素时，显示一个气泡提示框；当鼠标移出时，气泡提示框会延迟关闭。气泡提示框的位置可以根据配置动态调整（如左上、右上、左下、右下等）。

点击\悬浮时候 触发 具名插槽 匿名插槽 显示的位置 左上 右上 左下 右下->计算位置 定时器 延迟效果(防抖)

navigation bar

通常情况下复杂功能的响应式处理，一般我们有三种处理方案：

  1. 一套代码处理多端

    1. 优势：代码量相对比较少
    2. 劣势：耦合性强，不利于后期维护

  2. 多套代码分别处理各端：

    1. 优势：逻辑清晰
    2. 劣势：可能会产生很多重复的逻辑

  3. 结合以上两种方案，抽离公用逻辑，封装私有逻辑：

    1. 优势：结合以上两点优势
    2. 劣势：需要对业务和逻辑足够清楚

那么综合来看，肯定是第三种方式更好，所以咱们的 navigationBar 就通过第三种方式来去进行实现。

那么具体我们应该怎么去做呢？哪些是公用逻辑？哪些是私有逻辑？

我们知道一个功能由两部分组成：

  1. 数据
  2. 视图

pinia抽离公共数据->PC移动端分别实现

为了解决目录闪烁问题

也就是开始pinia中只有一个“全部”，后来发送网络请求才会有很多其他的 pinia持久化pinia-plugin-persistedstate

主题替换

// 1. 监听主题的切换行为 // 2. 根据行为保存当前需要展示的主题到 pinia 中 // 3. 根据 pinia 中保存的当前主题，展示 header-theme 下的显示图标 // 4. 根据 pinia 中保存的当前主题，修改 html 的 class

window下的跟随系统

瀑布流

瀑布流组件的构建过程

每个 item 应该横向排列，第二行的 item 顺序连接到当前【最短】的列中，而这个也就是构建瀑布流的核心逻辑。那么想要实现这个核心逻辑，我们的每个 item 肯定就不可以使用正常的布局方式，而必须使用 absolute 绝对布局，通过 top 和 left 来手动控制位置。

那么明确好了这个核心逻辑之后，接下来如何进行构建呢？

想要搞明白一个复杂组件的构建机制，那么最好的方式是想象一下：当你去使用这个组件时，你希望如何进行使用。

按照你期望的使用方式来反向思考构建过程，这样在主要的思路上就不会出现大的偏差。 我期望我是这么使用瀑布流的：

<div>
  <m-waterfall :data="" :nodeKey="" :column="" :picturePreReading="">
    <template v-slot="{ item, width }">
      <item-vue :data="item"></item-vue>
    </template>
  </m-waterfall>
</div>

// picturePreReading图片是否需要预加载

获取容器宽度&列宽 区分预加载（需要预加载->图片高度未知。不需要预加载->图片高度已知）

  1. 瀑布流的核心就是：通过 relative 和 absolute 定位的方式，来控制每个 item 的位置
  2. 影响瀑布流高度的主要元素，通常都是 img 标签
  3. 有些服务端会返回关键 img 的高度，有些不会，所以我们需要分别处理 (1)当服务端不返回高度时：我们需要等待 img 加载完成之后，再来计算高度，然后通过得到的高度计算定位。否则则会出现高度计算不准确导致定位计算不准确的问题。 (2)当服务端返回高度时：开发者则必须利用此高度为 item 进行高度设定。一旦 item 具备指定高度，那么我们就不需要等待 img 加载的过程。这样效率更高，并且可以业务的逻辑会变得更加简单。
  4. 当进行响应式切换时，同样需要区分对应场景： (1)当服务端不返回高度时：我们需要重新执行整个渲染流程，虽然会耗费一些性能，但是这样可以最大可能的避免出现逻辑错误。让组件拥有更强的普适性。 (2)当服务端返回高度时：我们同样需要重新计算列宽和定位，但是因为 item 具备明确的高度，所以我们可以直接拿到具体的高度，而无需重复整个渲染流程，从而可以实现更多的交互逻辑。比如：位移动画，将来的图片懒加载占位...

长列表

长列表原理：当滚动到列表底部，加载数据 核心是监听到列表滚动到底部

vueuse提供了useIntersectionObserver 当我们使用长列表时，希望如何使用？

<m-infinite-list
  v-model="" //当前是否处于加载状态
  isFinished="" //数据是否全部加载完毕
  @onload="" //加载下一页数据的触发事件
>
</m-infinite-list>

图片懒加载

原理：当图片不可见时，不加载图片，当图片可见时，加载图片 关键还是IntersectionObserver

通用指令v-lazy

src\directives\modules\lazy.js

全局指令注册 src\directives\index.js

main.js引入

  • 全局指令注册
import lazy from './modules/lazy'
/**
 * 全局指令注册
 */
export default {
  install(app) {
    app.directive('lazy', lazy)
  },
}
  • vite自动注册

彩色占位符

src\utils\color.js

搜索框searchBar

搜索提示 搜索历史 推荐主题 search触发时和list联动

提示

防抖 vueuse 高亮 正则替换

搜索历史

本地化-pinia 删除 全部删除

condirm组件 通过方法调用

1 虚拟 dom：通过 js 来描述 dom 2 vnode 虚拟节点：告诉 vue 页面上需要渲染什么样子的节点 3 h 函数：用来创建 vnode 的函数，接受三个参数（要渲染的 dom，attrs 对象，子元素） 4 render 函数：可以根据 vnode 来渲染 dom、

根据以上所说我们知道：通过 h 函数可以生成一个 vnode，该 vnode 可以通过 render 函数被渲染

1 创建一个 confirm 组件 2 创建一个 confirm.js 模块，在该模块中返回一个 promise 3 同时利用 h 函数生成 confirm.vue 的 vnode 4 最后利用 render 函数，渲染 vnode 到 body 中

动态绑定CSS

transition: all v-bind(duration);

tailwind使用

ul li 最后一个元素

<li
  v-for="item in _categorys"
  :key="item.id"
  class="shrink-0 px-1.5 py-0.5 z-10 duration-200 last:mr-4"
>
  {{ item.name }}
</li>

高度设置

媒体查询

响应式 xl:dark 视频10-2

12章

文件下载

  • 小文件下载 file-saver
  • 大文件下载 streamsaver

方法触发的message

defineProps里面的validator

floating

  • 功能引导 driver.js

13章节

vue router的transition是对应的页面组件切换 所以当前我想实现的【点击瀑布流中的某个元素->图片放大动画】是无法用transition实现

【思路】不去进行真实的路由跳转，而是先修改浏览器的URL，再切换展示的页面（以组建的形式覆盖整个浏览器的可视区域）。 【问题转换】 ：1如何让浏览器的URL变化，但是不跳转页面 2 如何让一个新的组件以包含动画的形式进行展示

功能1

History.pushState()

const onToPins = (item) => { history.pushState(null, null, /pins/${item.id}) //修改浏览器的URLW // currentPins.value = item // isVisiblePins.value = true }

功能2

GSAP

gsap.set() 这个方法通常使用在动画开始之前，表示设置动画开始前的元素属性 gsap.to() 这个方法表示最终元素展示的状态

gsap会基于set和to的状态，来自动执行中间的补间动画。

所以我们需要 （1）创建对应的组件 使用transition包括 （2）计算set时 组件对应的演示 （3）计算to时 组件对应的演示

后端

alt text