添加列表激活图标

This commit is contained in:
lyswhut
2022-11-14 20:22:35 +08:00
parent e79f8b357c
commit ab37817d26
7 changed files with 114 additions and 6 deletions
+29 -3
View File
@@ -21,14 +21,29 @@
:aria-label="defaultList.name" :aria-selected="defaultList.id == listId"
@contextmenu="handleListsItemRigthClick($event, -2)" @click="handleListToggle(defaultList.id)"
>
<span :class="$style.listsLabel">{{ defaultList.name }}</span>
<!-- <div v-if="defaultList.id == listId" :class="$style.activeIcon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="40%" viewBox="0 0 451.846 451.847" space="preserve">
<use xlink:href="#icon-right" />
</svg>
</div> -->
<span :class="$style.listsLabel">
<transition name="list-active">
<svg-icon v-if="defaultList.id == listId" name="angle-right-solid" :class="$style.activeIcon" />
</transition>
{{ defaultList.name }}
</span>
</li>
<li
class="default-list" :class="[$style.listsItem, {[$style.active]: loveList.id == listId}, {[$style.clicked]: rightClickItemIndex == -1}, {[$style.fetching]: fetchingListStatus[loveList.id]}]"
:aria-label="loveList.name" :aria-selected="loveList.id == listId"
@contextmenu="handleListsItemRigthClick($event, -1)" @click="handleListToggle(loveList.id)"
>
<span :class="$style.listsLabel">{{ loveList.name }}</span>
<span :class="$style.listsLabel">
<transition name="list-active">
<svg-icon v-if="loveList.id == listId" name="angle-right-solid" :class="$style.activeIcon" />
</transition>
{{ loveList.name }}
</span>
</li>
<li
v-for="(item, index) in userLists"
@@ -36,7 +51,12 @@
:class="[$style.listsItem, {[$style.active]: item.id == listId}, {[$style.clicked]: rightClickItemIndex == index}, {[$style.fetching]: fetchingListStatus[item.id]}]"
:data-index="index" :aria-label="item.name" :aria-selected="defaultList.id == listId" @contextmenu="handleListsItemRigthClick($event, index)"
>
<span :class="$style.listsLabel" @click="handleListToggle(item.id, index + 2)">{{ item.name }}</span>
<span :class="$style.listsLabel" @click="handleListToggle(item.id, index + 2)">
<transition name="list-active">
<svg-icon v-if="item.id == listId" name="angle-right-solid" :class="$style.activeIcon" />
</transition>
{{ item.name }}
</span>
<input
:class="$style.listsInput" type="text" :value="item.name"
:placeholder="item.name" @contextmenu.stop @keyup.enter="handleSaveListName(index, $event)" @blur="handleSaveListName(index, $event)"
@@ -341,6 +361,12 @@ export default {
}
}
}
.activeIcon {
height: .9em;
width: .9em;
margin-left: -0.45em;
vertical-align: -0.05em;
}
.listsLabel {
display: block;
height: @lists-item-height;