（组件）vue3封装高度过渡组件

最新推荐文章于 2024-05-16 23:40:36 发布

次顶级

最新推荐文章于 2024-05-16 23:40:36 发布

阅读量368

点赞数 1

分类专栏： less 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_42681555/article/details/121920008

版权

less 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

创建transitionH.vue文件

<template>
  <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
    >
      <slot></slot>
  </transition>
</template>
<script>
export default {
  name: "h-transitionH",
  props: {
    time: {    //过渡时间可自定义
      type: String,
      default: "0.3s",
    },
  },
  setup(props) {
    // 过渡值初始化
    const transitionStyle = props.time + " height ease-in-out";
    // 进入前 设置el元素的transition,高度0
    const beforeEnter = function (el) {
      el.style.transition = transitionStyle;
      el.style.height = 0;
    };
    // 进入中
    const enter = function (el) {
      // 获取元素显示的高度
      if (el.scrollHeight !== 0) {
        el.style.height = `${el.scrollHeight}px`;
      } else {
        //没有高度就不显示
        el.style.height = "";
      }
      el.style.overflow = "hidden";
    };
    // 进入结束
    const afterEnter = function (el) {
      // 清除过度样式
      // el.style.transition = ''
      el.style.height = "";
    };

    // 离开前
    const beforeLeave = function (el) {
      el.style.height = `${el.scrollHeight}px`;
      el.style.overflow = "hidden";
    };
    // 离开中
    const leave = function (el) {
      if (el.scrollHeight !== 0) {
        el.style.transition = transitionStyle;
        el.style.height = 0;
      }
    };
    // 离开结束
    const afterLeave = function (el) {
      el.style.transition = "";
      el.style.height = "";
    };
    return {
      beforeEnter,
      enter,
      afterEnter,
      beforeLeave,
      leave,
      afterLeave,
    };
  },
};
</script>
<style lang="less" scoped></style>

组件使用，直接引入注册使用即可

<template>
  <div id="TransitionHeight" class="layout">
    <h-button :butContent="'过渡'" :width="'100px'" @click="show = !show">
    </h-button>
    <div class="box_w w50">
      <transitionH>
        <ul v-show="show">
          <li>过渡效果展示</li>
          <li>过渡效果展示</li>
          <li>过渡效果展示</li>
          <li>过渡效果展示</li>
          <li>过渡效果展示</li>
          <li>过渡效果展示</li>
          <li>过渡效果展示</li>
        </ul>
      </transitionH>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import transitionH from '../../../components/component_module/transitionHeight/transitionH.vue'
export default {
  components:{
    transitionH
  },
  setup() {
    const show = ref(false);
    return {
      show,
    };
  },
};
</script>
<style lang="less" scoped>
ul {
  background: rgb(245, 245, 245);
  li {
    color: @ZC;
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
  }
}
</style>