我如何在 vuejs3 中实现淡入淡出和折叠？

Question

我想在vuejs中实现折叠和隐藏

但我认为，ref 它在 vue3 中不起作用

我收到这个错误 Header.vue?76f0:68 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'myText')

这是我的代码

<button class="border-0 navbar" @click="toggle()">

 <Links
        class="color-dark"
        ref="myText"
        :style="[isActive ? { height: computedHeight } : {}]"
      />

  function toggle() {
        this.isActive = !this.isActive
      }
      function initHeight() {
        this.$refs.myText.style.height = 'auto'
        this.$refs.myText.style.position = 'absolute'
        this.$refs.myText.style.visibility = 'hidden'
        this.$refs.myText.style.display = 'block'

        const height = getComputedStyle(this.$refs['myText']).height
        this.computedHeight = height

        this.$refs.myText.style.position = null
        this.$refs.myText.style.visibility = null
        this.$refs.myText.style.display = null
        this.$refs.myText.style.height = 0
      }

      watchEffect(async () => {
        initHeight()
      })

我正在将此代码复制到 vuejs3（这有效但我需要 vuejs3）

https://jsfiddle.net/rezaxdi/tgfabw65/9/

Answer 1

看起来它比代码中的内容更丰富。来自示例的简单 vue2=>vue3 转换工作正常

示例：

Vue.createApp({
  data() {
    return {
      isActive: false,
      computedHeight: 0
    }
  },
  methods: {
    toggle: function() {
      this.isActive = !this.isActive;
    },
    initHeight: function() {
      this.$refs['myText'].style.height = 'auto';
      this.$refs['myText'].style.position = 'absolute';
      this.$refs['myText'].style.visibility = 'hidden';
      this.$refs['myText'].style.display = 'block';

      const height = getComputedStyle(this.$refs['myText']).height;
      this.computedHeight = height;

      this.$refs['myText'].style.position = null;
      this.$refs['myText'].style.visibility = null;
      this.$refs['myText'].style.display = null;
      this.$refs['myText'].style.height = 0;

    }
  },
  mounted: function() {
    this.initHeight()
  }
}).mount("#app");

p {
  height: 0;
  overflow: hidden;
  transition: 1s;
}

<script src="https://unpkg.com/vue@3.2.31/dist/vue.global.prod.js"></script>
<div id="app">
  <p ref="myText" :style="[isActive ? { height : computedHeight } : {}]">
    Now it's smooth - getting closer to BS4 collapse, but now I need to know the exact height of each section at a particular screen size to set the max-height. Over-compensating max-width work ok, but is still a bit 'jerky'. Is there a way to calculate an
    elements height before starting the show/hide? If the max-height value is too small, elements overlap.
  </p>
  <button @click="toggle">Open / Close</button>
</div>

但是，我看到您正在使用 watchEffect，所以我推测您可能正在使用 (some‍♂️) 合成 API 功能。在这种情况下，监视将在挂载之前执行，因此它将运行 initHeight 失败。

如果您使用的是组合 api，则可能会导致它无法正常工作，因此您可能需要展示更多代码。或者，您可以坚持使用 Class API，它的工作方式与 vue2 中的相同。

我如何在 vuejs3 中实现淡入淡出和折叠？

How can i implement fade and collapse in vuejs3?

css

vuejs3