v-show или v-if div сместил остальные div в родительский контейнер - PullRequest
Новая
       7

v-show или v-if div сместил остальные div в родительский контейнер

0 голосов
/ 06 февраля 2019

Я хотел бы динамически добавить изображение (проверить стрелку) в div, который содержит другую информацию о div (image + texte).

Это добавление означает, что пользователи владели этим «объектом» в приложении.Он может добавить или отменить выбор этого объекта на лету.

Результатом этого действия является появление или исчезновение стрелки на лету.

Этот процесс отлично работает в моем компоненте vue.js.Но я могу видеть смещение каждый раз, когда появляется такая стрелка:

enter image description here

Я пытаюсь использовать v-if или v-showдирективы vue.js, но результат тот же.

Я не хочу, чтобы новое смещение появлялось при запуске действия с проверенным элементом.

это шаблон HTML : 

<div id="container">

    <div @click="checkedItem(key.id)" class="container-item" v-for="(key, value) in objects">
        <div class="check" v-show="checked[key.id]">
            <img height="35" width="35" src="../../../static/checked.png"></img>
        </div>
        <div class="image">
            <img src="https://picsum.photos/75/75/?image=25" alt="logo"></img>
        </div>
        <div class="name">{{ key.name }}</div>
    </div>

</div>

Это компонент таблицы стилей CSS : 

<style scoped>

    #container
    {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .container-item
    {
        display: flex;
        flex-direction: row;
        margin: 30px 30px 30px 30px;
    }

    .container-item div.check
    {
        z-index: 3;
        position: relative;
        left: 20px;
        bottom: 15px;
    }
    .container-item div.check > img
    {
        height: 35px;
        width: 35px;
    }

    .container-item div.image
    {
        z-index: 2;
        border: 1px solid blue;
    }

    .container-item div.name
    {
        z-index: 1;
        position: relative;
        top: 12px;
        right: 10px;
        text-align: center;
        line-height: 45px;
        width: 150px;
        max-height: 50px;
        border: 1px solid blue;
        background-color: yellow;
    }

</style>

И компонент метода checkedItem : 

    checkedItem: function (id)
    {
        let isChecked = this.checked[id] ? true : false
        isChecked ? this.checked[id] = false : this.checked[id] = true
    },

Как можно "добавить" HTML-узел DOM в компонент шаблона HTML vue.js без создания нового смещения на лету?

1 Ответ

0 голосов
/ 06 февраля 2019

Как мы уже обсуждали в комментариях, это чисто CSS.Вы хотите извлечь div.check из потока макетов, чтобы он не влиял на расположение других элементов.Это можно сделать, добавив position: absolute к своему набору правил.Чтобы это работало, не забудьте также добавить position: relative к своему родителю: 

.container-item {
    display: flex;
    flex-direction: row;
    margin: 30px 30px 30px 30px;

    /* Allow div.check to be positioned relative to its parent */
    position: relative;
}

.container-item div.check {
    z-index: 3;
    left: 20px;
    bottom: 15px;

    /* Take the check icon out of layout flow */
    position: absolute;
}
...