使用Vue3+Vant实现移动端@功能
基础DOM结构为了方便进行DOM操作，实际上是使用原生的可编辑元素contenteditable实现一个简单的富文本框。
123456789101112131415161718192021222324252627282930<script setup lang="ts">const inputRef = shallowRef<HTMLDivElement>();</script><template> <div contenteditable class="mention-input" ref="inputRef"></div></template><style lang="scss" scoped>.mention-input { background-color: #f6f7fb; width: 100%; padding: 18px 24px; max-height: 172px; bo ...
Nestjs实现七牛云Kodo私有存储文件上传与预览
安装七牛云SDK1pnpm i qiniu
新建qiniu模块
别在意angular的图标
qiniu.service.ts由于是私有存储，在上传和下载时都需要生成对应的token，具体实现可以查看文档七牛Node.jsSDK文件数据流上传。注意：这里的key尽量别直接使用文件名，七牛云的上传策略会按key拦截或覆盖文件上传
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081import { Injectable } from "@nestjs/common";import { ConfigService } from "@nestjs/config";import * as qiniu from "qiniu";import & ...
递归处理VueRouter为NaiveUI菜单的实现
主要方法handleRoute
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667const menuItems = ref<Array<MenuOption>>([])const rawRoutes = ref<RouterOptions['routes']>(router.options.routes)// 渲染图标至菜单const renderIcon = (icon: Component) => icon ? () => h(NIcon, null, { default: () => h(icon) }) : () => null// 递归处理路由const handleRoute = (routes: RouterOptions['routes'], pn ...
使用Vue3自定义指令实现滚动触发元素动画的一种方法
主要实现原理是使用 IntersectionObserver 对元素进行监听，以元素是否与该观察者相交来验证元素是否进入视图范围；使用 threshold 来控制元素与观察者相交多少百分比后触发事件。
123456789101112131415161718192021222324252627282930313233343536373839import { Directive } from 'vue'const anime: Directive = { mounted: (el: HTMLElement, binding: { value: string }) => { if (binding.value.endsWith('Big')) { console.error(el, '避免使用Big类型的动画，这可能会引起未知错误') return } const name = binding.value ? ...
解决gin-swagger找不到doc.json问题
使用 gin-swagger 时出现找不到 doc.json 的问题，只需在 main.go 中使用docs.SwaggerInfo.ReadDoc()即可。
官方注释：ReadDoc会把SwaggerTemplate转换成为 swagger 文档，即把 docs 文件夹中的内容转换成 doc.json。注意：引入的docs应为工程内 swag-cmd 生成的文件夹
Gorm开启Logger
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152package utilsimport ( "fmt" "github.com/spf13/viper" "gorm.io/driver/mysql" "gorm.io/gorm" "gorm.io/gorm/logger" "log" "os" "time")var DB *gorm.DBvar globalLogger = logger.New( log.New(os.Stdout, "\r\n", log.LstdFlags), logger.Config{ SlowThreshold: time.Second, // 自己切换logger的优 ...
Golang平铺数组与树形结构互相转换
平铺数组转换为树形结构1234567891011121314151617181920212223242526272829303132333435363738type T struct { model.DictGenre Children *[]*T `json:"children"`}treeList := func() []T { var treeList []T var flatPtr []T for _, i := range flat { t := T{} t.Pid = i.Pid t.ID = i.ID t.NameZh = i.NameZh t.NameEn = i.NameEn t.AliasZh = i.AliasZh t.AliasEn = i.AliasEn t.CreateTime = i.CreateTime t.UpdateTime = i.UpdateTime t.Children = nil flat ...
在 Next.js13 中集成 antd 和 layout 的使用
在 Next.js13 中集成 antd 和 layout 的使用nextjs 官方文档：https://nextjs.org/docs/basic-features/layoutsantd 官方文档：https://ant-design.gitee.io/
引入 antd在 Next 中引入 antd 与在常规 React 项目中引入 antd 是一样的，直接安装 antd 作为组件使用即可。
npm i antd
创建组件在/pages下分别创建/components/layout.tsx、/components/navbar.tsx和/components/footer.tsx，并创建对应 React 函数组件。
12345678910111213141516171819202122// components/layout.tsximport React from 'react'import Navbar from '@/pages/components/navbar'import { Layout as AntdLayout & ...
在Next.js13中使用Sass/SCSS
官方文档见这一章：https://nextjs.org/docs/basic-features/built-in-css-support
安装 Sassnpm i sass -D
在 next.config.js 中配置
1234567891011import path from 'path'/** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: true, sassOptions: { includePaths: [path.join(__dirname, 'styles')] }}module.exports = nextConfig
上述配置只会对 styles 文件夹下的.scss 文件进行预处理
Chrome反复提示拒绝连接解决方法
最近用 chrome 老是时不时抽风，显示无法访问 Internet。一开始用火绒的断网修复，说是 hosts 文件有问题，全部注释掉了之后确实好了一段时间，结果今天又出问题了。
后来百度了一圈，发现好像只有小米路由器有这种问题。
解决方案
打开 chrome设置->隐私设置和安全性->安全
在高级中打开使用安全DNS
将 DNS 自定义为https://dns.alidns.com/dns-query，问题暂时得到解决