一、el-dialog
2024.06.20今天我学习了如何对el-dialog弹窗适配移动端展示,效果如下:
代码如下:
@media screen and (min-width: 220px) and (max-width: 600px) {
::v-deep .el-dialog {
width: 95% !important;
}
}
二、el-select
代码如下:
<template>
<el-select :popper-append-to-body="false" popper-class="my-select"></el-select>
</template>
<style>
::v-deep .el-select-dropdown {
max-width: 250px;
}
.my-select .el-select-dropdown__item {
width: 300px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.my-select .el-select-dropdown__list {
width: 300px;
}
.my-select {
left: 25% !important;
margin-top: -5% !important;
}
</style>