mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
208 lines
4.7 KiB
Vue
208 lines
4.7 KiB
Vue
<template>
|
||
<VPopup
|
||
ref="popup"
|
||
v-model="isOpen"
|
||
class="like-black-list"
|
||
fixed
|
||
:lazy="false"
|
||
:trigger-element="triggerElement"
|
||
>
|
||
<div class="black-list-header">
|
||
<VIcon class="title-icon" icon="mdi-sort" :size="24"></VIcon>
|
||
<div class="title">添加黑名单</div>
|
||
<div class="close" @click="isOpen = false">
|
||
<VIcon icon="close" :size="18"></VIcon>
|
||
</div>
|
||
</div>
|
||
<div class="black-list-content">
|
||
<div class="black-list-section">
|
||
<div class="black-list-section-title">添加到黑名单</div>
|
||
<div class="black-list-section-input">
|
||
<TextBox :text="name" @change="changeName" />
|
||
<VButton @click="add">添加</VButton>
|
||
</div>
|
||
</div>
|
||
<div class="black-list-section">
|
||
<div class="black-list-section-title">黑名单列表</div>
|
||
<div class="black-list-section-description">点击×图标可以删除名单.</div>
|
||
<VLoading v-if="!isLoaded" />
|
||
<div
|
||
v-show="isLoaded"
|
||
ref="black-listSortList"
|
||
class="black-list-section-content black-list-sort-list"
|
||
>
|
||
<div v-for="item of list" :key="item" class="black-list-sort-item" :data-name="item">
|
||
<div class="item-name">
|
||
{{ item }}
|
||
</div>
|
||
<div class="toggle-visible">
|
||
<VIcon :size="18" icon="close" @click="toggleVisible(item)"></VIcon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</VPopup>
|
||
</template>
|
||
<script lang="ts">
|
||
import { VPopup, TextBox, VIcon, VButton } from '@/ui'
|
||
|
||
export default Vue.extend({
|
||
components: {
|
||
VPopup,
|
||
TextBox,
|
||
VIcon,
|
||
VButton,
|
||
},
|
||
props: {
|
||
triggerElement: {
|
||
type: HTMLElement,
|
||
default: null,
|
||
},
|
||
list: {
|
||
type: Array,
|
||
default: null,
|
||
},
|
||
titleName: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
isOpen: false,
|
||
isLoaded: false,
|
||
name: '',
|
||
}
|
||
},
|
||
async mounted() {
|
||
this.isLoaded = true
|
||
},
|
||
methods: {
|
||
toggle() {
|
||
this.$refs.popup.toggle()
|
||
},
|
||
changeName(val: string) {
|
||
this.name = val
|
||
},
|
||
add() {
|
||
if (this.name.length && !this.list.includes(this.name)) {
|
||
// eslint-disable-next-line vue/no-mutating-props
|
||
this.list.push(this.name)
|
||
}
|
||
this.name = ''
|
||
},
|
||
toggleVisible(item: string) {
|
||
// eslint-disable-next-line vue/no-mutating-props
|
||
this.list.splice(this.list.indexOf(item), 1)
|
||
},
|
||
},
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import 'common';
|
||
.like-black-list {
|
||
@include popup();
|
||
width: 400px;
|
||
font-size: 14px;
|
||
padding: 12px 12px 12px 18px;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translateX(-50%) translateY(-50%) scale(0.95);
|
||
transition: 0.2s ease-out;
|
||
z-index: 100002;
|
||
&.open {
|
||
transform: translateX(-50%) translateY(-50%) scale(1);
|
||
}
|
||
.black-list-header {
|
||
@include h-center();
|
||
justify-content: space-between;
|
||
.title {
|
||
margin-left: 6px;
|
||
font-size: 18px;
|
||
@include semi-bold();
|
||
}
|
||
.grow {
|
||
flex: 1;
|
||
}
|
||
.close {
|
||
padding: 6px;
|
||
cursor: pointer;
|
||
transition: 0.2s ease-out;
|
||
&:hover {
|
||
color: var(--theme-color);
|
||
}
|
||
}
|
||
}
|
||
.black-list-content {
|
||
.black-list-section {
|
||
margin-top: 12px;
|
||
> :not(:last-child) {
|
||
margin-bottom: 6px;
|
||
}
|
||
&-title {
|
||
font-size: 14px;
|
||
}
|
||
&-input {
|
||
display: flex;
|
||
div {
|
||
margin: 0 10px;
|
||
}
|
||
}
|
||
&-description {
|
||
font-size: 12px;
|
||
opacity: 0.6;
|
||
line-height: 1.5;
|
||
}
|
||
&-content {
|
||
@include h-center();
|
||
flex-wrap: wrap;
|
||
.be-slider {
|
||
margin: 0 4px;
|
||
flex: 1;
|
||
}
|
||
.padding-value {
|
||
margin-left: 12px;
|
||
width: 50px;
|
||
text-align: end;
|
||
}
|
||
.black-list-sort-item {
|
||
@include card();
|
||
@include h-center();
|
||
transition: none;
|
||
white-space: nowrap;
|
||
padding: 6px;
|
||
padding-left: 8px;
|
||
margin: 0 4px 4px 0;
|
||
cursor: move;
|
||
&:hover {
|
||
border-color: var(--theme-color);
|
||
}
|
||
&.black-list-hidden {
|
||
opacity: 0.5;
|
||
}
|
||
&.sortable-ghost {
|
||
opacity: 0;
|
||
}
|
||
&.sortable-chosen {
|
||
box-shadow: 0 4px 16px 0 rgb(0 0 0 / 16%);
|
||
transform: scale(1.05);
|
||
}
|
||
&.sortable-drag {
|
||
opacity: 1;
|
||
}
|
||
&.sortable-drag.black-list-hidden {
|
||
opacity: 0.5;
|
||
}
|
||
.toggle-visible {
|
||
margin-left: 6px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|