html - Vue.js:在元素处于正确位置之前不显示元素

Question

我正在学习 Vue，并且非常喜欢它。我有一个选项卡，我想在页面加载时将其固定在浏览器窗口的底部。当用户点击标签时，它会向上滑动以显示一些内容。

一切正常很好。我能够将选项卡固定在页面底部 - 并且点击事件也运行良好。

我遇到的问题是我需要计算制表符(和 div)的高度以正确设置 CSS 属性。当页面加载时，您可以看到选项卡向下滑动到位。我想隐藏选项卡，直到计算完所有内容并将其放在正确的位置。

这是我正在使用的:

app.js

new Vue({
    el: '#info',
    delimiters: ['${', '}'],
    data: {
        active: false,
        inactive: true,
        styles: {
            'bottom': 0
        },
    },
    methods() {
        toggle: function (event) {
            event.preventDefault();
            this.active = !this.active;
            this.inactive = !this.inactive;
        }
    },
    mounted() {
        let tabHeight = this.$refs.infoTab.clientHeight;
        let boxHeight = this.$refs.infoBox.clientHeight;  // 473px
    
        this.styles.bottom = -boxHeight + 'px';
    }
});

HTML

<div class="info not-active" id="info" @click="toggle" ref="infoTab"
     v-cloak
     v-bind:class="{ active: active }"
     v-bind:style="styles">
     <!-- content -->
</div>

样式.css

[v-cloak] {
    display: none;
}

/* more classes */

.info {
    width: 100%;
    position: fixed;
    &.inactive {
        bottom: -100%;
    }
    &.active {
        bottom: 0 !important;
    }
}

我知道我很接近，我只是不想让用户看到标签滑入到位。它应该就在那里。我尝试使用 created Hook ，但 clientHeight 不可用。

非常感谢任何建议!

Answer 1

我认为你可以只使用 CSS 解决这个问题，不需要使用任何 Vue 的生命周期钩子(Hook)，我用一个普通的 JS 例子做了一个笔:

let infoNode = document.getElementById('info');

infoNode.addEventListener('click', () => {
  if (infoNode.style.top) {
    // clear inline top style
    infoNode.style.top = '';
  } else {
    // set top to client height + 2 * border thickness
    infoNode.style.top = `calc(100% - ${infoNode.clientHeight}px - 4px)`;
  }
});

#info {
  font-size: 16px;
  width: 200px;
  border: 2px solid hsl(0, 0%, 80%);
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  position: fixed;
  /* 100% height of the viewport subtracting:
  tab height: padding, margin, & font size */
  top: calc(100% - (8px + 8px + 24px));
  /* we center the tab horizontally here using
  50% the width of the viewport - 50% the fixed
  width of the tab */
  left: calc(50% - 200px/2);
  transition: top 0.5s;
}

.title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

p {
  margin: 0;
}

<div id="info">
  <span class="title">Click on Me</span>
  <p>
    This is the content of the tab, isn't it great? I think so too, and it can be of any arbitrary length!
  </p>
</div>

基本上，技巧是使用 calc 和 top 而不是 -100% 和 bottom 来定位，那么您的选项卡最初会呈现在正确的位置，您不必担心当访问者首次加载您的页面时它会错位。