实现组件的隐藏与显示

组件收缩实现 —— 显示与隐藏

• 需要操作的组件和点击按钮都在一个 vue 的话：

<div ...... :style="{width: broadside?'200px':'0px'}">


const onCheckExpand = () => {  
    console.log("onCheckExpand点击事件");  
    broadside.value = !broadside.value;  
};

• 根据 broadside 的真假值来动态改变即可
• 若是不在一个 vue，而是存在父子、爷孙的关系的组件的话，就考虑跨组件操作
• 下述仅是一些场景的举例，并不是上述的完全改写

点子父方法响应

• 子用 emit：<custom-nav title="导航" @clickSingleWellNavigation1="$emit('clickSingleWellNavigation')">
• 也可以子孙连续：@click="$emit('...')" 直到父
• 父：<signle-well-nav @clickSingleWellNavigation="onClickSingleWellNavigation"></signle-well-nav>

父调子方法

• 父组件调用子组件（custom-nav）内的方法：

  // 父
  <custom-nav :title="xxx" ref="customNav" >
  	// handleNavClick方法自己找合适的地方@click
  
  const customNav = ref(null);
  const handleNavClick =()=> {
    // 在这里调用子组件的方法
    customNav.value.onCheckExpand();
  }
  
  // 子
  const onCheckExpand = () => {  
      console.log("onCheckExpand点击事件");  
      broadside.value = !broadside.value;  
  };  
  defineExpose({ onCheckExpand });
  

  • 别忘了加 value，否则点击后报错：customNav.onCheckExpand is not a function

爷孙跨辈（点孙变爷值）

• 方法一（简单直白，扩展性差点）：

  • 爷：

    <div :style="{width: divLeft}" style="float: left; height: 100%"></div>
    
    <div class="djksh-main" :style="{width: divMain}" style="height: 100%"></div>
    
    
    import {ref, provide} from "vue";
    const divLeft = ref('260px')
    const divMain = ref('calc(100% - 500px)')
    
    provide('changeDiv', (newSpan) => {
      divLeft.value = newSpan ? '260px':'0'
      divMain.value = newSpan ? 'calc(100% - 520px)':'calc(100% - 260px)'
    })
    

  • 孙：

    <div @click="onCheckExpand"></div>
    
    const broadside = ref(true);
    const changeDiv = inject('changeDiv')
    const onCheckExpand =()=> {
      broadside.value = !broadside.value;
      changeDiv(broadside.value);
    }
    
    // 有需要的话也可以不传值，只触发：
    const changeDiv = inject('changeDiv')
    const clickSingleWellNavigation =()=> {
      changeDiv()
    }
    

• 方法二（动态化 class）：

  • 爷：

    <div :class="{djkshDiv1:djkshDiv1,djkshDiv1Show: djkshDiv1Show}"></div>
    
    <div :class="{djkshDiv2:djkshDiv2,djkshDiv2Show: djkshDiv2Show}"></div>
    
    <div class="djkshDiv3">
    
    /**
     * 触发隐藏 显示 单井导航
     */
    const djkshDiv1 = ref(true);
    const djkshDiv1Show = ref(false);
    const djkshDiv2 = ref(true);
    const djkshDiv2Show = ref(false);
    function onClickSingleWellNavigation() {
      djkshDiv1.value = !djkshDiv1.value;
      djkshDiv1Show.value = !djkshDiv1Show.value;
    
      djkshDiv2.value = !djkshDiv2.value;
      djkshDiv2Show.value = !djkshDiv2Show.value;
    }
    </script>
    
    <style scoped>
    .djksh { // 总的
      width: 100%;
      height: 100%;
      background-color: #fff;
      padding-right: 5px;
      display: flex;
      flex-direction: row;
    }
    
    .djksh > .djkshDiv1 { // 左边
      width: 23%;
    }
    
    * {
      transition:All 1s ease-in-out;
      -webkit-transition:All 1s ease-in-out;
      -moz-transition:All 1s ease-in-out;
      -o-transition:All 1s ease-in-out;
    }
    *:hover {
      transform:translate(0,-10px);
      -webkit-transform:translate(0,0px);
      -moz-transform:translate(0,0px);
      -o-transform:translate(0,-10px);
      -ms-transform:translate(0,-10px);
    }
    
    .djksh > .djkshDiv1Show { // 隐藏左边
      width: 23%;
      margin-left: calc(-23% + 20px);
    }
    
    .djksh > .djkshDiv2 { // 中间
      width: 63%;
    }
    .djkshDiv2Show { // 展开中间
      width: calc(63% + 23% - 20px);
    }
    
    .djksh > .djkshDiv3 { // 右边不做展开收缩
      margin-top: 10px;
      width: 13%;
    }
    </style>
    

  • margin-left: calc(-23% + 20px);：这部分规则设置了左边距，整体上就是将元素向左偏移了（原宽度的负值 + 20px）。这个效果会使得元素看起来左移，并且一部分可能会超出其父容器，从而达到了隐藏的效果

    • 注意，这里一般做到隐藏的话是可以用类似 width: 0 来实现的，但是一些特殊情况下还是需要原有的一些间距格式、或者部分显露的话还是用偏移的方式比较稳妥

  • display: flex; flex-direction: row;

    • display: flex;：这一行设置了容器的显示方式为 Flex 布局。Flex 布局是一种灵活的布局方式，它使得容器内的子元素可以通过指定的属性（如 flex-grow、flex-shrink、flex-basis 等）自动调整，以适应不同屏幕尺寸或容器大小
      • flex-direction: row;：这一行设置了 Flex 容器内子元素的排列方向为水平方向（横向）。row 表示行方向，即子元素将水平排列，除了row，还有 column 表示列方向，即子元素垂直排列

  • *{} 和 *:hover {}

    • *{}：这是通用选择器，匹配所有 HTML 元素。该选择器将应用样式于文档中的所有元素，无论其是块级元素、内联元素还是其他类型的元素
      • transition: all 1s ease-in-out;：这行代码为所有元素设置了过渡效果。all 表示对所有属性进行过渡，1s 表示过渡时间为1秒，ease-in-out 表示过渡效果为先缓慢进入，然后缓慢退出
      • 浏览器前缀： -webkit-transition, -moz-transition, -o-transition 用于兼容不同浏览器
    • *:hover {}：这是伪类选择器，用于选择鼠标悬停在元素上的状态。在这个例子中，*:hover选择器将应用样式于文档中的所有元素在鼠标悬停时的状态
      • transform: translate(0, -10px);：当鼠标悬停在任何元素上时，将元素向上平移10像素。这会在悬停状态下产生一个向上的浮动效果
      • 浏览器前缀：用于兼容不同浏览器