零散知識、 積纍

103 阅读1分钟

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.