mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Fix popup overflow
This commit is contained in:
parent
ed4410c6aa
commit
e33a2c928d
@ -57,6 +57,11 @@ export default Vue.extend({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
maxColumnCount: {
|
||||||
|
type: Number,
|
||||||
|
// TODO: 在设置里其实可以直接列出来, 不用弹窗, 暂时先限制为 2 了
|
||||||
|
default: 2,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
const { componentName } = this.options
|
const { componentName } = this.options
|
||||||
@ -77,7 +82,10 @@ export default Vue.extend({
|
|||||||
methods: {
|
methods: {
|
||||||
updateColumnsCount() {
|
updateColumnsCount() {
|
||||||
const element = this.$el as HTMLElement
|
const element = this.$el as HTMLElement
|
||||||
const columns = Math.ceil(Object.keys(this.options.switches).length / 12)
|
const columns = Math.min(
|
||||||
|
Math.ceil(Object.keys(this.options.switches).length / 12),
|
||||||
|
this.maxColumnCount,
|
||||||
|
)
|
||||||
element.style.setProperty('--columns', columns.toString())
|
element.style.setProperty('--columns', columns.toString())
|
||||||
},
|
},
|
||||||
isDim(name: string) {
|
isDim(name: string) {
|
||||||
@ -87,7 +95,7 @@ export default Vue.extend({
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
@import 'common';
|
@import 'common';
|
||||||
.switch-options {
|
.switch-options {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -108,6 +116,7 @@ export default Vue.extend({
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
width: max-content;
|
||||||
grid-template-columns: repeat(var(--columns), auto);
|
grid-template-columns: repeat(var(--columns), auto);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: 1px solid #8882;
|
border: 1px solid #8882;
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
@previous-item="previousItem($event, index)"
|
@previous-item="previousItem($event, index)"
|
||||||
@next-item="nextItem($event, index)"
|
@next-item="nextItem($event, index)"
|
||||||
@delete-item="onDeleteItem($event, index)"
|
@delete-item="onDeleteItem($event, index)"
|
||||||
@action="(index === actions.length - 1) && onClearHistory()"
|
@action="(index === actions.length - 1) && onClearHistory(); onAction(a)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!isHistory" class="launch-bar-action-list">
|
<div v-if="!isHistory" class="launch-bar-action-list">
|
||||||
@ -52,6 +52,7 @@
|
|||||||
@previous-item="previousItem($event, index)"
|
@previous-item="previousItem($event, index)"
|
||||||
@next-item="nextItem($event, index)"
|
@next-item="nextItem($event, index)"
|
||||||
@delete-item="onDeleteItem($event, index)"
|
@delete-item="onDeleteItem($event, index)"
|
||||||
|
@action="onAction(a)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -227,6 +228,9 @@ export default Vue.extend({
|
|||||||
this.focus()
|
this.focus()
|
||||||
this.getActions()
|
this.getActions()
|
||||||
},
|
},
|
||||||
|
onAction() {
|
||||||
|
// this.focus()
|
||||||
|
},
|
||||||
focus() {
|
focus() {
|
||||||
this.$refs.input.focus()
|
this.$refs.input.focus()
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user