在vue项目开发中,我们会遇到使用select的多选框,并且需要clearble的清空选项来提升用户体验,但是在下来框的选项比较多的时候,会把下拉框给撑开,在这个时候点击左侧的空白部分也会触发删除按钮,删除所有的选项如下图所示:
点击鼠标所指的空白部分也会删除所有的选项而用户所认知的应该是点击在 X 的图标位置才应该删除所有的选项。这是由于element 中select图标i高度所导致的。
```
.el-input__icon {
height: 100%;
width: 25px;
text-align: center;
line-height: 40px;
}
// 由于icon图标的高度设置成了100% 所以才会造成点击整个右侧空白部分都会删除所有的选项。
// 只需要修改特的样式就可以变成只能点击图标才能清空选项。
.el-input__icon {
height: 1rem;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0;
line-height: 0;
}
```
第一次在博客上面发布文章,如果有不对的地方请各位大佬支出 !!!
网友评论