css 实现相关案例

抽屉案例(带吸附箭头)

<template><div class="container"><div class="main-box"><div class="left-box">左边盒子</div><!--下面两种方式皆可实现展示和隐藏  --><div :style="{ flex: fontflag ? 1 : 0 }" class="right-box"><!-- <div :style="{ width: fontflag ? '300px' : 0 }" class="right-box"> --><div class="right-content" v-if="fontflag">将需要<b>动态展示的内容</b>放在该元素中</div><i @click="fontclickHandler" class="fontflag el-icon-caret-left"></i></div></div></div>
</template><script>export default {data() {return {fontflag: true,};},methods: {fontclickHandler() {this.fontflag = !this.fontflag;},},};
</script><style lang="scss" scoped>.main-box {display: flex;padding: 20px;height: 500px;.left-box {background-color: pink;flex: 5;margin-right: 20px;}.right-box {position: relative;background-color: tomato;transition: all 1s;.fontflag {display: inline-block;width: 15px;height: 60px;background-color: lightblue;text-align: center;line-height: 60px;border-radius: 10px 0 0 10px;position: absolute;left: -15px;top: calc(500px / 2);}}}
</style>