vue开发常用css，js 篇2（持续更新）

发布时间：2026/10/10 1:16:23

vue开发常用cssjs 篇1已完结了总共有37个知识点有需要的小伙伴可以点击链接跳转过去开发常用cssjs 篇1、contenteditable 属性的标签中获取光标的位置2、解决node-sass4.14.1 安装失败问题3、css 实现毛玻璃效果4、解决 warning Delete XXX4、mac下运行npm run build 出现Permission denied如何解决5、git 操作正在开发新功能进度50%突然紧急要给生产环境先上一个功能该怎么处理多人共同开发的情况6、git 不跟踪文件夹或者文件名大小写问题7、实现知识图谱的节点和连线实现效果代码8、判断当前浏览器情况1、contenteditable 属性的标签中获取光标的位置篇1中第37个点也是实现这个问题但是比较复杂所以优化迭代了一版现在一起来看看吧直接获取 innerHtml 中range.startContainer.data 的位置加上startOffset 的位置即可获取位置exportfunctiongetCursorPosition(domId){varcursorPos0;varselectionwindow.getSelection();consteldocument.getElementById(domId);lethtmlCharsel.innerHTML;cursorPosselection.focusOffset;if(selection.rangeCount0){constrangeselection.getRangeAt(0);letposhtmlChars.indexOf(range.startContainer.data);cursorPosposrange.startOffset;}console.log(光标位置,cursorPos);returnsplitHtmlStringAtPosition(el.innerHTML,cursorPos);}exportfunctionsplitHtmlStringAtPosition(inputString,position){return[inputString.slice(0,position),inputString.slice(position)];}2、解决node-sass4.14.1 安装失败问题3、css 实现毛玻璃效果定义概念毛玻璃效果是一种设计风格模仿玻璃表面上的毛糙、模糊的外观。这种效果通常通过模糊或半透明的元素来实现使得背景图像或内容在视觉上呈现一种模糊的、微粒状的质感。毛玻璃效果能够使背景元素以一种柔和的方式穿透前层从而在不同的设计元素之间创造出细微的层次感和深度。代码实现backdrop-filter:blur(5px);效果呈现底部的内容会随着 blur(5px) 的变大而更加模糊这就实现了毛玻璃的效果。4、解决 warning Delete XXX问题每次保存出现一系列的这个警告解决方案npm run lint --fix4、mac下运行npm run build 出现Permission denied如何解决问题执行 npm run build 报错/node_modules/.bin/vue-cli-service:Permission denied解决方法chmod 777 node_modules/.bin/vue-cli-service5、git 操作正在开发新功能进度50%突然紧急要给生产环境先上一个功能该怎么处理多人共同开发的情况使用git stash命令临时保存工作目录中的更改以便你切换分支或进行其他操作扩展1保存并附带自定义信息git stash save message2查看所有的 stashgit stash list3查看某个 stash 的内容git stash show stash{0}4查看详细的差异git stash show -p stash{0}5恢复应用stashgit stash apply stash{0}如果你不指定 stash{0}它会默认恢复最近一次的 stash。6恢复并删除 stashgit stash pop stash{0}7清空所有 stashgit stash clear8忽略暂存的文件(如果你只想保存工作目录的更改而忽略暂存区的更改)git stash -k # 或 git stash --keep-index9恢复文件并保持其他文件的更改如果你只想恢复某些特定文件而保持其他文件的更改可以在 apply 或 pop 后指定文件git stash apply stash{0} -- path/to/file10删除一个 stash如果你想删除某个 stash而不应用它git stash drop stash{0}6、git 不跟踪文件夹或者文件名大小写问题当大写改为小写的时候git 不跟踪的问题设置以下规则就行git config core.ignorecase false7、实现知识图谱的节点和连线实现效果代码!DOCTYPEhtmlhtmlheadtitleKnowledge Graph Demo/title!-- 引入依赖 --scriptsrchttps://unpkg.com/vis-network/standalone/umd/vis-network.min.js/scriptstyle#network-container{width:100vw;height:100vh;border:1px solid #ccc;}.node-tooltip{position:absolute;background:rgba(255,255,255,0.9);padding:10px;border-radius:5px;box-shadow:0 2px 5pxrgba(0,0,0,0.2);}/style/headbodydividnetwork-container/divscript// 初始化数据constnodesnewvis.DataSet([{id:1,label:AIGC,group:domain,title:Artificial Intelligence},{id:2,label:ML,group:method,title:Machine Learning},{id:3,label:CNN,group:model,title:Convolutional Neural Network},{id:4,label:NLP,group:method,title:Natural Language Processing}]);constedgesnewvis.DataSet([{from:1,to:2,label:contains},{from:2,to:3,label:includes},{from:2,to:4,label:includes},{from:4,to:3,dashes:true}]);// 配置选项constoptions{nodes:{shape:box,font:{size:16},margin:10,shadow:true},edges:{arrows:to,smooth:{type:dynamic}},physics:{stabilization:true,barnesHut:{gravitationalConstant:-2000,springLength:200}},interaction:{hover:true,tooltipDelay:200},groups:{domain:{color:#FF6B6B},method:{color:#4ECDC4},model:{color:#45B7D1}}};// 创建网络constcontainerdocument.getElementById(network-container);constdata{nodes,edges};constnetworknewvis.Network(container,data,options);// 交互事件处理network.on(click,(params){if(params.nodes.length){constnodeIdparams.nodes[0];constnodeDatanodes.get(nodeId);showTooltip(nodeData);}});network.on(hoverNode,(params){network.canvas.body.container.style.cursorpointer;});// 工具提示函数functionshowTooltip(node){consttooltipdocument.createElement(div);tooltip.classNamenode-tooltip;tooltip.innerHTMLh3${node.label}/h3 p${node.title}/p;document.body.appendChild(tooltip);constdispose(){tooltip.remove();document.removeEventListener(click,dispose);};document.addEventListener(click,dispose);}/script/body/html8、判断当前浏览器情况constisWindowAwailabletypeofwindow!undefined;constenv{isIE:isWindowAwailable(navigator.userAgent.indexOf(MSIE)0||navigator.userAgent.indexOf(Trident)0),isIE6:isWindowAwailable!XMLHttpRequestnavigator.userAgent.indexOf(MSIE)0,isIE7:isWindowAwailablenavigator.userAgent.indexOf(MSIE 7.0)0navigator.userAgent.indexOf(Trident)0,isIE8:isWindowAwailablenavigator.userAgent.indexOf(MSIE 8.0)0navigator.userAgent.indexOf(Trident)0,isOpera:isWindowAwailablenavigator.userAgent.indexOf(Opera)0,isChrome:isWindowAwailablenavigator.userAgent.indexOf(Chrome)0,isKHTML:isWindowAwailable(navigator.userAgent.indexOf(Safari)0||navigator.userAgent.indexOf(Konqueror)0),isFF:isWindowAwailablenavigator.userAgent.indexOf(Firefox)0,isIPad:isWindowAwailablenavigator.userAgent.search(/iPad/gi)0,isEdge:isWindowAwailablenavigator.userAgent.indexOf(Edge)!-1,isNode:!isWindowAwailable||typeofnavigatorundefined};module.exportsenv;