Question

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

一切正常。伟大。我可以将标签贴在页面底部-点击事件也可以很好地发挥作用。

我遇到的问题是我需要计算制表符（和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">

     ...
</div>

style.css

[v-cloak] {
    display: none;
}

...

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

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

任何建议都将不胜感激！

Answer 1

我认为您可以使用CSS来解决此问题，无需使用任何Vue的生命周期挂钩，我用香草JS示例制作了一支笔：

https://codepen.io/kfedorov91/pen/rrxLpx

基本上，诀窍是将calc和top一起使用-100%而不是bottom和public delegate void EventDelegate(); //dictionary of events supported by this class protected Dictionary<EventName, EventDelegate> events = new Dictionary<EventName, EventDelegate>(); public void AddListener(EventName name, EventDelegate listener) { if (!events.ContainsKey(name)) { events[name] = listener; } else { events[name] += listener; } } protected virtual void OnPickup(EventName name) { if (events.ContainsKey(name) && events[name] != null) { events[name](); } }进行定位，然后您的标签页最初会显示在正确的位置，不必担心访问者第一次加载您的页面时它会错位。

Vue.js：在正确位置之前不显示元素

1 个答案: