css实现div的隐藏

隐藏div的几种常见方法：

1.z-index:-1

2.给div一个margin负值，这个负值恰好等于div自身的高度或宽度

3. visibility。。。

参考：https://blog.csdn.net/fatansitic/article/details/50783640

<Icon :type="showRight ? 'ios-arrow-forward' : 'ios-arrow-back'" @click="showRight = !showRight" />

 实现Icon标签的切换。。

ionic icon(图标)：https://www.runoob.com/ionic/ionic-icon.html

标签跟着一起移动。。

 https://www.iviewui.com/components/icon

设置:type=

顺便监听showRight的变化：

      showRight(newV, oldV) {
            if (!newV) {
                this.right = -255;
            } else {
                this.right = 0;
            }
        },

div设置

<div class="panel panel-right" :style="'right:' + right + 'px'">

panel panel-right

// 左右信息面板
.panel {

// 右侧详情面板
  &.panel-right {
    width: 250px;
    transition: all 1s;
    left: inherit;

    // 切换显隐按钮
    .toggle-btn {
      position: absolute;
      top: 50%;
      left: -21px;
      width: 20px;
      transform: translateY(-50%);
      height: 50px;
      background-color: #002924;
      border: 1px solid @themeColor;
      border-right: none;
      line-height: 50px;
      text-align: center;
      cursor: pointer;

      i {
        font-size: 20px;
        color: white;
      }
    }
  }
}