美文网首页
vue select下拉框的 clearable清空选项,解决多

vue select下拉框的 clearable清空选项,解决多

作者: 逐梦少年丿 | 来源:发表于2020-06-15 20:13 被阅读0次

    在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;

    }

    ```

    第一次在博客上面发布文章,如果有不对的地方请各位大佬支出 !!!

    相关文章

      网友评论

          本文标题:vue select下拉框的 clearable清空选项,解决多

          本文链接:https://www.haomeiwen.com/subject/aaihxktx.html