笔记

unocss 的使用

使用纯 CSS 图标

npm i -D @unocss/preset-icons @iconify-json/[the-collection-you-want]

the-collection-you-want为图标库缩写

可以去icons 官网找需要的图标库

例如：Google Material Icons 的简写为https://icones.js.org/collection/ic地址最后的 ic

---

图标的使用

好像只能用div标签

图标的使用语法是i+${图标集缩写名}+${图标名}

以Font Awesome Solid为例

<div class="i-fa6-solid-user"></div>

移动端使用原生滚动

参考知乎

固定元素的高度

.scroll-box {
  overflow: scroll;
  /* 隐藏滚动条 */
  margin-right: -20px;
  padding-right: 20px;
}

图片懒加载

使用vueuse中的useIntersectionObserver钩子

app.directive('img-lazy', {
    mounted(el: HTMLImageElement, binding) {
      const { stop } = useIntersectionObserver(el, ([{ isIntersecting }], observerElement) => {
        if (isIntersecting) {
          el.src = binding.value
        }
      })
    }
  })

v-loading 指令的实现

v-loading

工具包

• 汉字转拼音

git 首次提交报错

参考csdn

原因：创建文件时添加了文件，进行了一次提交，导致两端都有文件，但这两份内容没有关系

解决方法

git pull --rebase origin main

ts 类型报错

解决方法

const props = withDefaults(
  defineProps<{
    artistList: ArtistItem[]
    pos: number
  }>(),
  {
    artistList: () => [],
    pos: 0
  }
)

播放器 icon

阿里图标库