vue开发常用css,js 篇1已完结了,总共有37个知识点,有需要的小伙伴可以点击链接跳转过去
开发常用css,js 篇
1、contenteditable 属性的标签中获取光标的位置
篇1中第37个点,也是实现这个问题,但是比较复杂,所以优化迭代了一版,现在一起来看看吧
直接获取 innerHtml 中range.startContainer.data 的位置 ,加上startOffset 的位置即可获取位置
export function getCursorPosition(domId) {
var cursorPos = 0;
var selection = window.getSelection();
const el = document.getElementById(domId);
let htmlChars = el.innerHTML;
cursorPos = selection.focusOffset;
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
let pos = htmlChars.indexOf(range.startContainer.data);
cursorPos = pos + range.startOffset;
}
console.log("光标位置:", cursorPos);
return splitHtmlStringAtPosition(el.innerHTML, cursorPos);
}
export function splitHtmlStringAtPosition(inputString, position) {
return [inputString.slice(0, position), inputString.slice(position)];
}
2、解决node-sass@4.14.1 安装失败问题
3、css 实现毛玻璃效果
定义概念:毛玻璃效果是一种设计风格,模仿玻璃表面上的毛糙、模糊的外观。 这种效果通常通过模糊或半透明的元素来实现,使得背景图像或内容在视觉上呈现一种模糊的、微粒状的质感。毛玻璃效果能够使背景元素以一种柔和的方式穿透前层,从而在不同的设计元素之间创造出细微的层次感和深度。
代码实现:
backdrop-filter: blur(5px);
效果呈现:
底部的内容会随着 blur(5px) 的变大而更加模糊,这就实现了毛玻璃的效果。
4、解决 warning Delete XXX
问题:每次保存,出现一系列的这个警告
解决方案:npm run lint --fix
4、mac下运行npm run build 出现Permission denied如何解决
问题 :执行 npm run build 报错:
/node_modules/.bin/vue-cli-service:Permission denied
解决方法:
chmod 777 node_modules/.bin/vue-cli-service