input输入框下拉el-popover,如何使得el-popover宽度和input保持一致
时间: 2024-05-30 20:06:08 浏览: 22
要使得el-popover宽度和input保持一致,需要设置el-popover的宽度为100%。具体实现方式如下:
1. 在el-popover组件中添加一个slot,用来放置需要被触发的组件,例如input。
2. 在slot中添加一个元素,例如div,然后给该元素设置一个固定宽度。
3. 在el-popover中设置popover的宽度为100%,并将该popover的样式设置为position: absolute,left: 0,top: 100%。
具体代码如下:
```
<template>
<div>
<el-input ref="input" v-model="inputValue" placeholder="请输入内容" @focus="showPopper"></el-input>
<el-popover ref="popper" placement="bottom-start" width="100%" trigger="manual">
<div slot="reference" style="width: 100%;">
<div style="width: 100%;"></div>
</div>
<div>这里是popover的内容</div>
</el-popover>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
},
methods: {
showPopper() {
this.$refs.popper.showPopper = true;
}
}
}
</script>
<style scoped>
.el-popover__popper {
position: absolute;
left: 0;
top: 100%;
}
</style>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)