el-select实现自适应宽度（思路可用于原生input自适应宽度）
我忘了是哪个小伙伴给我评论
还是私信来着？
他说想把这个 el-select（口误）
做成动态的宽度
里边选的内容越宽
这个el-select（口误）他自动就变宽
那我们先来看一下
为什么他不会自动变宽
好我们检查一下这个元素
大家看
他里边实际上套了一个input
比如说他选择的这个label（的文字）
会放到input里面
所以我们要想让整个组件变宽
要想办法让这input的变宽
但是这个就好玩了
input 默认没有这个功能
所以这种情况我们通常都会利用
宽度是百分之百这个CSS来实现
比如说这是一个普通的input框
然后呢他在一个外部容器里
他的宽度是这个外部容器的百分之百
那我们通过修改外部容器的宽度
来让里边input动态的变宽
怎么修改呢
我们就在里边同步这个文本框的内容
文本框内容越多呢他自然就撑宽了
所以呢再回到刚才这个例子
我们就要想办法
在这个input的同级
我们再放一个普通的元素来撑宽它
那我们怎么放呢
我们可以利用这个praise这个插槽
也就是说，我们在这
加一个叉槽
slot
prefix
好我们在这写123先看一下效果
大家看 123上来了
那我把它写多点哈
看能不能把它撑宽
没有撑宽！
那
原因是啊
el-select（口误）的默认把这个prefix
设置成了position的absolute
我把它勾掉
大家看 就撑宽了
但是呢撑的特别宽
原因是（除了prefix）input的还有个宽度
他俩都撑宽了
所以我们把input
把它设置成
position: absolute
让他不撑
好
然后呢我们来简单写一下这个样式
我们首先在这
定义一个class
比如就叫 autowidth-sel
好
然后呢我们在下边这
写一个样式
我们这块呢把这个拿过来 prefix
先把他的position设置成relative
然后呢
我们再把刚才这个input它设置成absolute
还是我们这样
input
position 等于
absolute
好我们来看一下刷新
大家看！这回就可以了
然后呢我们再把里边123替换成
同步的内容
我们这块这样写
从options里面去找
找这个选中的元素的label
点value
等于value 找到的话呢我们点label
报错了！ 原因是这个
有可能没找到
他默认上来是空的没选择任何数据
所以这块
如果用vue3的话可以用这个可选链
那我这个不是vue
可以这样
把它 || 一个空的对象
大家看 它就过来了
然后这个宽度不够宽
我们可以把它加一个默认的宽度
最小宽度
在这
min-width
等于
好大家看 这样
然后接下来我们让这个prefix
跟这个input的
对齐
我们先来检查一下input这个元素的
布局
大家看！padding左右是30然后还有一个border
但是注意：它这块
box-sizing 是 border-box
box-sizing: border-box
然后呢，我们写一个边框
solid然后呢
颜色的话我们用一个透明吧
这个是透明
然后呢我们再来左右的padding
上下是0左右是
然后呢高度高度是
包括line-height
line-height 也是
好我们来看一下
哎差点我们来看一下啊
这个span错位了
看一下
它有一个position（left）是
所以我们把这个position
left改为
差不多对齐了我们再来看啊
好差不多就可以了
然后我们再把这个元素隐藏起来，注意：
不能用display none
因为我们要让他占位
所以得用 visibility 等于 hidden
我们再来看一下
好这样就可以了
最后更新于