【新增功能】CSS 内联样式权重同级别

最新推荐文章于 2024-06-20 10:44:48 发布

是炎炎哦（谁的小马甲）

最新推荐文章于 2024-06-20 10:44:48 发布

阅读量670

点赞数

文章标签：前端 vue.js Modal

本文链接：https://blog.youkuaiyun.com/weixin_45650440/article/details/121529727

版权

本文介绍了如何通过CSS调整Vue组件Iview的Select选择框样式，包括解决tag位置过高问题、设置CSS权重、处理同级别class冲突以及调整display属性以实现多选显示和布局优化。示例代码展示了如何使用inline-style和!important来覆盖原有样式，以及如何调整width以适应不同元素的尺寸需求。

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

一，tag 在input里面位置过高
在这里插入图片描述
对应ivu-tag ivu-tag-checked

<Select 
                                    @on-change="selectchange"
                                    v-model="adddata.designee"
                                    label-in-value
                                    filter-by-label
                                    :max-tag-count="0"
                                    :max-tag-placeholder="maxTagPlaceholder"
                                    multiple
                                    clearable
                                    filterable
                                    class="searchSelect searchDisplay inlineStyle"
                                >

//内联样式.ivu-tag 是iview组件封装的 前面要添加父级的 myClass 此处为.inlineStyle

.inlineStyle .ivu-tag{
 position: relative; /*定位 相对父级*/
 top:1px;
}

二 css权重！important；

在这里插入图片描述

//由于原样式是写在element上的，权重比class高,所以添加 !important;（注意有空格）

.inlineStyle .ivu-select-input{
 width: 160px !important;
}

在这里插入图片描述

三同级别class

在这里插入图片描述

同级别class

 <div class="searchSelect searchDisplay inlineStyle ivu-select ivu-select-visible ivu-select-multiple ivu-select-default">

.selectDisplay .ivu-select-multiple{
    width: 330px !important;
}

四 display

.selectBody{
   display: flex; 
   justify-content: space-between;//让人员和已选人员 统一被大的div包裹
}
.selectdisplay {
  width:340px !important;//
}
.selectDisplay .ivu-select-multiple{
    width: 330px !important;//
}
.inlineStyle .ivu-select-selection{
 width: 300px !important;//
}
.inlineStyle .ivu-select-input{
 width: 160px !important; //搜索的placeholder
}

select 多选并显示选中的选项

//label-in-value:   filter-by-label:
<Select 
                                    @on-change="selectchange"
                                    v-model="adddata.designee"
                                    label-in-value
                                    filter-by-label
                                    :max-tag-count="0"
                                    :max-tag-placeholder="maxTagPlaceholder"
                                    multiple
                                    clearable
                                    filterable 
                                    class="searchSelect searchDisplay inlineStyle"
                                >
                                    <Option
                                        
                                        v-for="item in userList"
                                        :value="item.id"
                                        :key="item.id"
                                        :label="item.sectiontitle + '-' + item.name + '(' + item.work_code + ')'"
                                        ></Option
                                    >
                                </Select>