css中常用：获取元素样式；下拉菜单手风琴效果等；gerrit代码提交失败，miss change-Id（文末）

本文链接：https://blog.youkuaiyun.com/WANG944282/article/details/125474003

本文涵盖了Vue前端开发中的常见问题和解决方案，包括报错处理、组件标题插槽、SCSS样式穿透、复制URL、获取元素样式、下拉菜单手风琴效果、返回顶部功能实现、CSS居中技巧以及Gerrit代码提交中的change-Id问题。详细介绍了各个问题的解决思路和方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.一个报错

Failed at the @sentry/cli@1.74.4 install script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

解决方法：npm install @sentry/cli@1.74.4 --ignore-scripts

把报错的包ignore安装，但是我出现这个问题的根源是npm版本过低了，但是我用npm install -g npm@版本升级也并没有成功。

2. 在组件中增加标题——插槽

首先我们要清楚，如果在组件标签中写内容的话，理应被覆盖掉，只显示组件的内容，那么如果我们需要一个标题，该怎么办呢？就是插槽slot，在组件中用v-slot标签占位，调用子组件的时候，组件标签之间的文本就会显示到slot的位置，作为替换文本。

but，不要改原项目的组件这样的方法是不好的，可能会影响其他的组件。修改的方法还是有的，把原组件设置背景透明，然后弄个遮罩层，在遮罩层里面写内容和背景就好了。

3.关于scss修改vue获取到的v-html中的标签属性

给style加了scoped属性，修改获取到的v-html中的类的样式并没有生效，查阅到了几个样式穿透的方法：

```
.outer::v-deep .inter{}
```
```
.outer >>> .inter{}
```
```
.answer{
	/deep/ .text-title{}
} 
```

其中1对我有用，2没有反应，3会报错

4.还有关于复制当前网页url的问题

使用vue其实很简单

<button v-clipboard:copy="绑定的数据" v-clipboard:success="成功回调" v-clipboard:error="失败回调">复制</button>

windowUrl : window.location.href //当前网址的获取方式

但是，需要注意的是，如果这个是写在获取的数据中的v-html里面，是不生效的

5.获取当前元素样式

现在回看这里是真的傻，我只记得我看过getComputedStyle()这个函数，就直奔这个去了，现在看到发现其实其他方法才更适合我要获取rotate角度以及修改的情况JS如何获取元素样式? - 简书 (jianshu.com)

style、style.cssText和style.getPropertyValue()，获取标签上行内样式

<div id="box" style="width: 100px; background-color: #f00;"></div>

#box{ width: 200px; height: 200px; background-color: #0f0;}

var box = document.getElementById("box");
console.log(box.style.cssText);  // "width: 100px; background-color: rgb(255, 0, 0);"
console.log(box.style.width);    // "100px"
console.log(box.style.height);    // ""
console.log(box.style.getPropertyValue('background-color'));

cssRules，获取CSS样式表中定义的样式

var sheet = document.styleSheets[0];   // 获取页面中第一个样式表
var rules = sheet.cssRules;   // 获取页面中第一个样式表中定义的所有规则，rules[0]即代表第一条规则
console.log(rules[0].style.cssText);    // "width: 200px; height: 200px; background-color: rgb(0, 255, 0);"
console.log(rules[0].style.width);    // "200px"
console.log(rules[0].style.height);    // "200px"
console.log(rules[0].style.getPropertyValue('background-color'));

getComputedStyle()，获取当前元素的计算样式。获取所有样式表层叠而来的当前元素的样式，但是，这种方法获得的rotate是(-0.1,0.9,0.9,0.1,0,0)这样的结果，我不能直接修改，还要去自己计算。

console.log(getComputedStyle(box).cssText);    // 注意不仅仅只打印现有样式简单的叠加覆盖结果，而是还会有很多其他样式
console.log(getComputedStyle(box).width);    // "100px"
console.log(getComputedStyle(box).height);    // "200px"
console.log(getComputedStyle(box).getPropertyValue('background-color'));

6.关于下拉菜单手风琴效果的实现

这里需要加小三角作为icon使用，这就需要计算transform中rotate的角度，但是我这时脑子一团浆糊，想的是利用一个getComputedStyle()，得到当前样式，然后判断是否是点击的那个，是就改变角度，不是就不变，但是很麻烦，当然我也遇到了很多问题。

最后突然想起，为什么不设置个标志位加一个动态类名呢，被点击的加上类名，直接把标志位取反就好了啊，结果弄了半天也没出来结果。

后面有变成了图片，直接v-if和v-else实现就可以了。

7.vue中返回顶部功能

由于手风琴中有些内容很长，直接点击下一个的话，页面滚动条是直接在最底下的，这样体验很不好，所以希望可以在点击之后进行滚动条的上移或者说回0，

window.pageYOffset = 120;
document.documentElement.scrollTop = 120;
document.body.scrollTop = 120;

把他们写在点击函数里，并没有生效。原因有两个

滚动条并不是页面滚动条，而是某个区域的滚动条
滚动条有一部分被隐藏了，是我写错了位置，写到了外面的容器里，这导致在有的时候会产生滚动条和部分内容被绝对定位的组件遮盖的情况。

需求也是错的，这种情况下应该返回到可视窗口。用srollIntoView()方法。document.getElementById(id).scrollIntoView(true);

8. css中一些常用的知识

实现居中：

带绝对定位的居中

position:absolute;
top: 50%;
transform: translateY(-50%);//这样就实现了垂直居中，水平居中同理
left: 50%;
transform: translateX(-50%);

transform:translate(-50%,-50%)//或者直接这样，水平垂直居中

文字居中：行高等于盒子高

height = line-height = xx
悬浮样式不生效不要在类名和 :hover之间加空格！

9. gerrit提交缺少change-Id的问题

搜过很多解决方法，但是都没有效果，直到看到了这篇文章

https://www.cnblogs.com/yzhihao/p/8392704.html

里面的手动解决，可以产生changeID，按照上述解决方法修改文件内容后，git commit --amend可以看到里面有我们输入的和生成的changeid，我们只需要把自己输入的删掉，然后提交信息和changeId之间空一行就好了。

最近又看到了另一种，因为mac里面没找到git文件夹，所以按照git给的提示
gitdir=$(git rev-parse --git-dir); scp -p -P 29418 xxx@xxx:hooks/commit-msg ${gitdir}/hooks/
执行操作：

gitdir=$(git rev-parse --git-dir)
scp -O -P 29418 xxx@xxx:hooks/commit-msg ${gitdir}/hooks/
git commit --amend
重点在第二步，把git提示给我们的信息中的-p 改成-O（大写o），amend之后就可以生成了，如果再amend一次就可以在提交信息里面看到了。就可以提交成功了