【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>


目录
打赏
0
0
0
0
73
分享
相关文章
在CentOS上部署Minikube教程
至此,您已成功在CentOS上部署并使用Minikube。您可以自由探索Kubernetes的世界,熟练配置和管理Kubernetes集群。
180 20
ChatGPT 人工智能助理 Assistant
Assistants API 让你构建定制化的AI助手,通过指令引导助手运用模型、工具和知识回应查询。核心模块包括名称、指令、模型选择(如GPT-4)、工具(如Code Interpreter)及知识检索。需注意,免费账户限制较多,建议使用付费账户以获得完整体验。可通过界面操作或Python SDK实现助手创建、线程管理及信息交互等功能。相关资源包括官方文档和体验平台。
纯css动画 —— 展开、收起
纯css动画 —— 展开、收起
599 2
最佳实践:通义灵码生成单元测试,让单测更简单
本文首先讲述了什么是单元测试、单元测试的价值、一个好的单元测试所具备的原则,进而引入如何去编写一个好的单元测试,通义灵码是如何快速生成单元测试的。
Vue+ElementUI前端添加展开收起搜索框按钮
Vue+ElementUI前端添加展开收起搜索框按钮
628 0
一天一道Java面试题----第十二天(如何实现接口幂等性)
这篇文章探讨了实现Java接口幂等性的几种方法,包括使用唯一ID、服务端token、去重表、版本控制以及控制状态等策略。
解决uviewui向下展开菜单u-dropdown组件收起样式层叠问题
解决uviewui向下展开菜单u-dropdown组件收起样式层叠问题
在Ubuntu 18.04上安装Git的方法
在Ubuntu 18.04上安装Git的方法
164 0
实时计算 Flink版产品使用合集之直接将 JSON 字符串解析为数组的内置函数如何解决
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
Controller层代码这么写,简洁又优雅!
说到 Controller,相信大家都不陌生,它可以很方便地对外提供数据接口。它的定位,我认为是「不可或缺的配角」。 说它不可或缺是因为无论是传统的三层架构还是现在的 COLA 架构,Controller 层依旧有一席之地,说明他的必要性。 说它是配角是因为 Controller 层的代码一般是不负责具体的逻辑业务逻辑实现,但是它负责接收和响应请求。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问