1.在全局樣式設置禁選文字,禁止圖片拖動 在項目全局樣式文件中
body{
user-select: none;// 禁用文字选中
}
img{
-webkit-user-drag: none;// 禁用拖动图片
}
2.atnd 升級到5之之後直接引入 import 'antd/dist/antd.css';會報錯的,我見大部分都是選擇降版本到4.x使用. 還有一種說import 'antd/dist/antd.min.css'可以解決但是我去看了一下我的node_modules裏面并沒有這個文件所以也沒有成功。找到一種插件按需引入樣式的方式。 vite-plugin-style-import 主要在vite.config.ts 配置中
import styleImport,{AntdResolve} from 'vite-plugin-style-import'
plugins: [
styleImport({
resolves:[
AntdResolve()
],
})]
3.atnd 使用Tooltip組件需要鼠標懸浮的時候顯示一部分未展示出的信息,但是同時還需要滿足做點擊事件是要跳轉到另一個頁面上,本來以爲是一件挺容易的事情後來,實際寫上功能才發現,會有一個Tooltip組件的bug,跳轉的時候會帶著懸浮的信息一同出現。簡單來説就是Tooltip組件該消失的時候沒有消失。直接說我最後的解決辦法就是雙擊事件同時設置變量,在Tooltip組件内部用三目運算符判斷變量是否存在。給一個最近基本的html格式方便理解。
<Tooltip placement="topLeft"
title={ isTooltip ? ()=>{ return (
<div>
{items.test_item}
</div>
)}: ''}>
<Tag onDoubleClick ={()=>setTooltip(!isTooltip)}
<div>
{items.test_item}
</div>
</Tag>
</Tooltip>
4.