本周的error记录

1.element-ui组件el-select选定的项自定义选中标志

• 首先，要展示选中标志的话就需要改样式，加上伪元素，这是scss中的写法，其他的可以直接用url(‘…/image’)这样。还有就是如果用它作背景的话需要content，没有内容后就不显示背景了。

  .el-select-dropdown__list .selected{
    span::after{
      width: 24px;
      height: 24px;
      font-size: 24px;
      content: '';
      background: url('~@/images/select_icon.png') no-repeat center;
      background-size: contain;
      position: absolute;
      right: 16px;
    }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

• 我清楚的看到，刚进入页面时候，选中标志是展示的，但是改变了v-model绑定的值之后，就不显示了。原因是我改变它的时候用到了toFixed()，绑定值本身是Number。

  这我才了解toFixed()的四舍五入返回的竟然是字符串！在外面又套了层Number强转就好了。

2. 新窗口打开文件下载

​ 下载文件很简单，地址跳转到文件的路径就好了，新开窗口还是直接下载就有下载方式决定了。

• 当前窗口下载

  window.open(url, "_self");
  1

• 新窗口下载直接把打开方式换掉就好了

  window.open(item.downloadUrl, "_blank");
  1

3. 文本框自动获取焦点并全选所有内容

为了方便用户修改内容，当鼠标移动到输入框，获取焦点之后，自动全选输入框的内容，方便修改或删除。

在vue中，用this.$refs.xxx选取元素，跟document.getElementById(‘xxx’)是一样的。

inputFocus(){
    this.$refs.input.setSelectionRange(0, this.text.length)
}
1
2
3

4. 隐藏图片的一点点边框

我现在要求一张图，有个边框（这个边框是图片的一部分），当鼠标hover的时候出现双层边框效果，就是下方的border和outline。但是这时候不显示原图片中的虚线。

思路：给图片一个外包容器，图片宽高占满，当hover时候，就让容器半径减小1px，合到宽高上就是2px。图像中心显示，就是位置在中心，溢出隐藏嘛。边框加给容器就好啦

.img-container{
    width: 22px;
    height: 22px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;

    .img {
        width: 22px;
        height: 22px;
        object-fit: cover;//这个比较重要
        object-position: center;//这个也重要，图片中心显示
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);//这也可以让图片居中
    }
}
.button:hover{
    .img-container{
        width: 20px;
        height: 20px;
        border: 1px solid red;
        border-radius: 50%;
        outline: 3px solid pink;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

5. 提交gerrit失败，提示—(change xxx closed)

这个起因是我前面提交过一次，但是没有merge到远程仓库上，后面再次提交就报了这个提示

• girt log 查看一下提交日志，找到我们提交的上一个版本（就是别人的提交，已合并的版本），复制版本号
• 代码回滚：git reset --soft 版本号
• 然后可以看到代码的高亮等回到了未提交的状态，确认自己本次提交的代码，重新走提交流程。