使用router-link想给激活的那个li设置一个根据它定位的小图标

1.

<router-link tag="li" v-for="group in groupList"  :key='group.g_id'   :to="{ path: '/setting/group', query: { groupid: group.g_id,groupname:group.g_name }}"  exact active-class="active">
                                        <input type="text" @blur="reName" v-model="group.g_name">
                                        <img src="./icon_delete_select.svg"  alt="" class="deleteSelcet" >
                                    </router-link>

2.css

.active {
        border: 1px solid #2ac2f3;
        position: relative;

    }
    .active .deleteSelcet {
        display: block;
        position: absolute;
        left: 130px;
        top: 10px;
    }

3.
页面效果

clipboard.png

4.我的小图标只有在点击在那个激活的router-link的身上时,才应该显示,但是,现在是每一个router-link都有这个图标。求大神指点迷津~

回答:

你需要给未选中的img一个隐藏的属性啊,不然css默认 display 显示
增加这个css试试

.deleteSelcet {
        display: none;
}

深夜手机码子

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注