原创 vue3中使用simple-keyboard實現虛擬鍵盤(帶中文切換數字鍵盤)

效果圖 官網 simple-keyboard官網:https://hodgef.com/simple-keyboard/ 打不開的話請用魔法 不足 中文語言包支持度不夠。不過自己可以找語言包替換 依賴安裝 npm inst

原创 vscode中vue代碼提示插件

由來 基於(Vue 3 Snippets,Vue VSCode Snippets)插件集成而來,因爲這倆插件目前沒有集成最新vue代碼片段,且集成內容相對較少,於是這個插件就誕生了 插件提示跟vue寫法一致,詳情可看插件的介紹頁。除了

原创 js中訂閱發佈模式bus

export default { list: {}, // 事件中心集中地 /** * 發佈訂閱 * @param {string} name 事件名 * @param [...args] */ $em

原创 按鈕點擊水波紋效果和兩邊擴散效果

廢話少說,先上代碼了,複製到html中即可使用 點擊查看代碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-e

原创 echarts中實現多個label

先來個效果圖 如果你剛好需要實現這種效果,那麼可以瞅一瞅了 我要開始水文了 如圖所示,圖中頂部部分文字乍一看好像是獨立於柱狀圖,顯示在最頂上,其實它也是由柱狀圖模擬而成. 只是吧圖形相關屬性做了隱藏,視覺上達到獨立於圖外 代碼正

原创 vue中類tabs左右滑動

效果圖 思路 給定一個變量用來記錄滾動了幾列,每滾動一次加1滾動一列,監聽頁面滾動父級元素寬度改變,重新設置滾動的距離(放在計算屬性中讓其自動計算) <template> <div class="container">

原创 elementui中下拉框(select)抖動問題

將下面樣式加入即可 // 處理下拉框中抖動 .el-select .el-input__inner { vertical-align: bottom !important; } 如設置了size屬性,可將樣式設爲 .el-select

原创 vue中elementui表格錯位問題解決(一次到位)

引入element-resize-detector 在項目引入插件(用來監聽元素寬度變化) npm install element-resize-detector --save 在文件中引入(寫在script中,export def

原创 在彈框區域外點擊,關閉彈框

思路 彈框最外層套個id,監聽文檔點擊事件,循環查找父級id,判斷是否包含在外層id中,包含不處理,不包含彈窗關閉 注意點 具體問題具體分析,如html層級解構混亂時,需加入額外判斷來處理,但整體思想不變 例子,vue中使用 docume

原创 vue,vuex,element實現無限tab頁效果

直接擼代碼 ?滿足你 碼雲地址 效果圖 tab頁由來 甲方爸爸的更改需求,無力反抗 分析代碼 懶的寫,直接擼就行 參考文章 點我

原创 多窗口中數據共享

多窗口中數據共享 場景 某個頁面中實現右擊打開新頁面跳入到相同頁面,並保持數據一致 MDN 中指出 在新選項卡或窗口中打開頁面將創建具有頂級瀏覽上下文值的新會話,這與會話 Cookie 的工作方式不同 sessionStorage參考M

原创 vue中elementui組件el-dialog拖拽(已處理邊界情況)

全局註冊 Vue.directive("elDialogDrag", (el) => { const header = el.querySelector(".el-dialog__header"); const main = el.

原创 vscode中Vetur插件關閉組件自動導入路徑

vscode配置項中加入 "vetur.completion.autoImport": false, 或者,將圖中4處勾去掉即可

原创 elementui樹形表格分頁

效果圖 如果你剛好需求中需要如上效果那麼只需要吧代碼複製過去直接用即可,注意寫在nextTick中 前提是vue加elementui 代碼如下 /**    *  樹形表格分頁    * @param {Object} page 

原创 js判斷對象數組等是否爲空

//是否爲空 /** * null undefined NaN false " " {} [] 爲空 * 爲空 true 不爲空 false * @param {*} value 參數 * */