widget-gsidebar通用侧边栏

widget-gsidebar通用侧边栏、底部出栏，可配置

html：

        <div class="gsidebar gsidebar-widget" v-show="isShow">
            <div class="gsidebar-dialog">
                <div class="gsidebar-hd" v-if="this.$slots.head">
                    <!-- gsidebar头部标题区域  S  -->
                    <slot name="head"></slot>
                    <!-- gsidebar头部标题区域  E  -->
                </div>
                <div class="gsidebar-bd">
                    <div class="gsidebar-scroll">
                        <!-- gsidebar 内容  S  -->
                        <slot name="cont"></slot>
                        <!-- gsidebar 内容  S  -->
                    </div>
                </div>
                <div class="gsidebar-ft" v-if="this.$slots.operation">
                    <div class="gsidebar-operation">
                        <div class="gsidebar-operation-inner">
                            <!-- gsidebar 操作栏  S  -->
                            <slot name="operation"></slot>
                            <!-- gsidebar 操作栏  E  -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- gsidebar mask  S  -->
            <div class="gmask" @click="onCloseHandler"></div>
            <!-- gsidebar mask  E  -->
        </div>
    </transition>

css：

.gsidebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
}

.gsidebar .gsidebar-dialog {
  width: 80%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 50;
}

.gsidebar-toollink {
  text-align: right;
  height: 0.84rem;
}

.toollink {
  height: 0.84rem;
  line-height: 0.84rem;
  padding: 0 0.24rem 0 0.26rem;
  display: inline-block;
  position: relative;
  color: #757e7f;
  font-size: 0.42rem;
}

.toollink:last-child {
  padding-right: 0;
}

.toollink::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.03rem;
  height: 0.36rem;
  margin-top: -0.18rem;
  background-color: #757e7f;
}

.toollink:first-child::before {
  display: none;
}

.toollink.cur {
  color: #1c1c1c;
  font-weight: bold;
}

.gsidebar-hd {
  padding: 1.02rem 0.72rem 0 0.72rem;
}

.gsidebar-bd {
  height: calc(100vh - 1.02rem - 0.84rem - (env(safe-area-inset-bottom) + 2.16rem));
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.gsidebar-bd:first-child {
  height: calc(100vh - (env(safe-area-inset-bottom) + 2.16rem));
}

.gsidebar-bd:first-child .label-group:first-child {
  margin-top: 0.6rem;
}

.gsidebar-bd:only-child {
  height: 100vh;
}

.gsidebar-bd:only-child .label-group:first-child {
  margin-top: 0.6rem;
}

.gsidebar-ft {
  padding: 0 0.72rem;
}

.gsidebar-operation {
  padding-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.gsidebar-button {
  height: 2.16rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.gsidebar-button .mwe-button {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-right: 0.3rem;
}

.gsidebar-button .mwe-button:last-child {
  margin-right: 0;
}

.gsidebar-scroll {
  overflow: auto;
  overflow-x: hidden;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
  height: 100%;
  padding: 0 0.3rem 0 0.72rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.gsidebar-enter-active {
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
}

.gsidebar-enter-active .gsidebar-dialog {
  -webkit-animation: slideIn 0.3s cubic-bezier(0, 0.5, 0.2, 1) 0s 1 both;
          animation: slideIn 0.3s cubic-bezier(0, 0.5, 0.2, 1) 0s 1 both;
}

.gsidebar-enter-active .gmask {
  -webkit-animation: fadeIn 0.2s linear 0s 1 both;
          animation: fadeIn 0.2s linear 0s 1 both;
}

.gsidebar-leave-active {
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
}

.gsidebar-leave-active .gsidebar-dialog {
  -webkit-animation: slideOut 0.2s cubic-bezier(0, 0.5, 0.2, 1) 0s 1 both;
          animation: slideOut 0.2s cubic-bezier(0, 0.5, 0.2, 1) 0s 1 both;
}

.gsidebar-leave-active .gmask {
  -webkit-animation: fadeOut 0.2s linear 0s 1 both;
          animation: fadeOut 0.2s linear 0s 1 both;
}