css 实现相关案例

css 实现相关案例

抽屉案例(带吸附箭头)

<template>
  <div class="container">
    <div class="main-box">
      <div class="left-box">左边盒子div>
      
      <div :style="{ flex: fontflag ? 1 : 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>