【sgCollapseBtn】自定义组件:底部折叠/展开按钮

简介: 【sgCollapseBtn】自定义组件:底部折叠/展开按钮


特性:

  1. 支持自定义折叠状态
  2. 支持自定义标签名称

sgCollapseBtn源码

<template>
  <div :class="$options.name" @click="show = !show" :placement="placement">
    <div class="collapse-btns">
      <div class="collapse-btn" v-if="show">
        <i class="el-icon-caret-top"></i>
        <div class="label">折叠{{ collapseLabel || expandLabel || `` }}</div>
      </div>
      <div class="collapse-btn" v-else>
        <i class="el-icon-caret-bottom"></i>
        <div class="label">展开{{ expandLabel || collapseLabel || `` }}</div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "sgCollapseBtn",
  components: {},
  data() {
    return {
      show: false,
    };
  },
  props: ["data", "value", "collapseLabel", "expandLabel", "placement"],
  watch: {
    value: {
      handler(d) {
        this.show = d;
      },
      deep: true,
      immediate: true,
    },
    show(d) {
      this.$emit("input", d);
    },
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {},
};
</script>
 
<style lang="scss" scoped>
.sgCollapseBtn {
  position: relative;
  z-index: 1;
  /*禁止选中文本*/
  user-select: none;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: white;
  cursor: pointer;
  
  &[placement="bottom"] {
    position: absolute;
    top: revert;
    bottom: 0;
    left: 0;
    right: 0;
  }
 
  .collapse-btns {
    width: 100%;
    $side: 20%; //渐变边界
    /*左右渐变遮罩(兼容IOS)*/
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      white $side,
      white calc(100% - #{$side}),
      transparent
    );
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    background-color: white;
    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: linear-gradient(white, #e2f0ff);
      opacity: 0;
      transition: 1s ease !important;
      z-index: -1;
    }
    .collapse-btn {
      transition: 0.4s !important;
      display: flex;
      align-items: center;
      transform: translateX(40%);
      i {
        transition: 0.4s !important;
        color: #d3dce6;
      }
      .label {
        transition: 0.2s !important;
        margin-left: 25px;
        color: #409eff;
        opacity: 0;
      }
    }
  }
 
  &:active,
  &:hover {
    .collapse-btns {
      &::after {
        opacity: 1;
      }
      .collapse-btn {
        transform: translateX(0%);
 
        i {
          color: #409eff;
        }
        .label {
          margin-left: 5px;
          color: #409eff;
          opacity: 1;
          // width: 100%;
        }
      }
    }
  }
}
</style>

应用

<template>
  <div :class="$options.name">
    <!-- 折叠按钮 -->
    <sgCollapseBtn v-model="expandSearch" :placement="`bottom`" :collapseLabel="``" />
  </div>
</template>
<script>
import sgCollapseBtn from "@/vue/components/admin/sgCollapseBtn";
export default {
  name: "sgComponent",
  components: { sgCollapseBtn },
  data() {
    return {
      expandSearch: false,
    };
  },
  props: ["value"],
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
  destroyed() {},
};
</script>
<style lang="scss" scoped>
.sgComponent {
}
</style>


相关文章
|
4月前
|
前端开发
导航条下拉菜单的实现及思路
本文介绍了导航条下拉菜单的实现方法和思路,包括HTML结构的搭建和CSS样式的编写,通过使用hover伪类来控制下拉菜单的显示与隐藏。
导航条下拉菜单的实现及思路
|
5月前
|
前端开发 JavaScript
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
本文介绍了如何在Vue3项目中实现一个鼠标拖动调整元素宽度的功能,并展示了点击按钮收起或展开侧边栏的效果,提供了完整的实现代码和操作演示。
1002 0
|
6月前
|
前端开发 JavaScript
纯css动画 —— 展开、收起
纯css动画 —— 展开、收起
501 2
|
前端开发
css动画效果代码淡入淡出折叠展开点击悬浮
css动画效果代码淡入淡出折叠展开点击悬浮
解决uviewui向下展开菜单u-dropdown组件收起样式层叠问题
解决uviewui向下展开菜单u-dropdown组件收起样式层叠问题
展开&收起,使用SwiftUI搭建一个侧滑展开页面交互
展开&收起,使用SwiftUI搭建一个侧滑展开页面交互
285 0
15EasyUI 布局- 创建折叠面板
15EasyUI 布局- 创建折叠面板
68 0
element-plus菜单折叠以后图标消失
element-plus菜单折叠以后图标消失
178 0
|
JavaScript
vue里怎么实现右侧悬浮,并且能上下拖拽的按钮功能?
vue里怎么实现右侧悬浮,并且能上下拖拽的按钮功能?
781 0
vue里怎么实现右侧悬浮,并且能上下拖拽的按钮功能?
|
容器
使用导航菜单如何实现在多个页面下左边导航菜单右边内容的效果
使用导航菜单如何实现在多个页面下左边导航菜单右边内容的效果
211 0