Question

我想在包含其他div信息（图像+文字）的div中动态添加图像（选中箭头）。

此添加表示用户在应用程序中拥有此“对象”。他可以动态添加或取消选择该对象。

此操作的结果是实时显示或消失箭头。

此过程在我的vue.js组件中完美运行。但是每次箭头出现时，我都可以查看出现偏移量：

我尝试使用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
    },

如何将DOM节点HTML“添加”到HTML模板组件vue.js中，从而动态地创建新的偏移量？

Answer 1

正如我们在评论中讨论的，这纯粹是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;
}

v-show或v-if div将其他div移入了父容器

1 个答案: