Le contenu se rétrécit et s'agrandit à gauche et à droite
Réaliser les exigences
Le contenu de la page est disposé à gauche et à droite. Vous devez réduire le contenu du côté gauche, puis afficher l'intégralité du contenu sur le côté droit. Au départ, j'avais pensé à écrire un jugement dynamique natif css+v-show, mais j'ai ensuite pensé que la bibliothèque de composants d'éléments avait un tiroir (el-drawer). Au fait, je voulais essayer si je pouvais personnaliser la position d'extension du tiroir, donc J'ai trouvé cet article.
obtenir un effet
Personnaliser la position d'extension du tiroir (el-tiroir)
<template>
<div>
<el-row style="margin-top: 1%" :gutter="20">
<!-- 左侧 列表 -->
<el-col style="height: 350px;" :span="span" :class="[span != '8' ? 'span1' : 'span1']">
<div style="position: relative; width: 100%; height: 100%">
<el-drawer
class="drawerClass"
style="position: absolute"
:append-to-body="false"
:modal="false"
:show-close="false"
:wrapperClosable="false"
size="100%"
:visible.sync="drawer"
direction="ltr"
>
<el-card class="box-card" style="position: relative">
<div>左侧内容</div>
</el-card>
</el-drawer>
<div
style="
position: absolute;
z-index: 999999999;
cursor: pointer;
top: 30%;
"
:class="[drawer ? 'imgright' : 'imgright1']"
@click="clickImg"
>
<img
v-show="!drawer"
style="height: 40px; width: 25px"
:src="require('@/assets/image/zhankai.png')"
alt=""
/>
<img
v-show="drawer"
style="height: 40px; width: 25px"
:src="require('@/assets/image/shousuo.png')"
alt=""
/>
</div>
</div>
</el-col>
<!-- 右侧 用户列表 -->
<el-col :span="span1" :class="[span1 != '15' ? 'span1' : 'span1']">
<el-card class="box-card">
<div>右侧内容</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
Principe de mise en œuvre
Ajouter une position : par rapport à la balise parent el-drawer ;
ajustement de l'attribut el-drawer :
:append-to-body="false" Si le calque de masque est inséré dans l'élément body,
:modal="false" Si le calque de masque est obligatoire
: show-close="false" S'il faut afficher le bouton de fermeture
: wrapperClosable="false" Si le tiroir peut être fermé en cliquant sur le calque de masque
js, lorsque vous cliquez dessus, le tiroir s'agrandit et s'agrandit, et la largeur correspondant au contenu à gauche et à droite est donnée.
export default {
data() {
return {
span: 8,
span1: 15,
drawer: true,
};
},
methods: {
clickImg() {
this.drawer = !this.drawer;
if (this.drawer) {
this.span = 8;
this.span1 = 15;
} else {
this.span = 1;
this.span1 = 23;
}
},
},
};
<style lang="scss" scoped>
.span1 {
transition: all 0.2s;
}
.imgright {
right: 0;
background-color: #f5f5f5;
transition: all 0.2s;
}
.imgright1 {
left: 0;
background-color: #fff;
transition: all 0.2s;
}
.drawerClass ::v-deep .el-drawer__container .el-drawer .el-drawer__header {
display: none;
}
</style>
Ce qui précède vise simplement à essayer si le tiroir peut être agrandi et agrandi dans une position personnalisée. Bien sûr, il existe un moyen plus simple d'écrire du CSS pour déterminer dynamiquement la largeur.
La deuxième méthode
<el-row style="margin-top: 1%">
<div style="display: flex; align-items: center">
<!-- 左侧 列表 -->
<div :class="[drawer ? 'left' : 'left1']">
<el-card class="box-card">
<div>左侧内容</div>
</el-card>
</div>
<!-- 折叠展开图片-->
<div
style="cursor: pointer; width: 5%"
:class="[drawer ? 'imgright' : 'imgright1']"
@click="clickImg"
>
<img
v-show="!drawer"
style="height: 40px; width: 25px"
:src="require('@/assets/image/zhankai.png')"
/>
<img
v-show="drawer"
style="height: 40px; width: 25px"
:src="require('@/assets/image/shousuo.png')"
/>
</div>
<!-- 右侧 用户列表 -->
<div :class="[drawer ? 'right' : 'right1']">
<el-card class="box-card">
<div>右侧内容</div>
</el-card>
</div>
</div>
</el-row>
methods: {
clickImg() {
this.drawer = !this.drawer;
},
},
.left {
width: 35%;
transition: all 0.2s;
}
.left1 {
width: 0%;
transition: all 0.2s;
}
.right {
width: 65%;
transition: all 0.2s;
}
.right1 {
width: 95%;
transition: all 0.2s;
}
.box-card {
height: 350px;
background-color: #ff6e6e;
}