vueselect下拉框的clearable清空选项，解决多选框是点击右侧空
⽩部分也会清除选项
在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;
icon图标库bottom: 0;
margin: auto;
right: 0;
line-height: 0;
}
```
第⼀次在博客上⾯发布⽂章，如果有不对的地⽅请各位⼤佬⽀出

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。