perf: scroll to bottom when append item in new key dialog

This commit is contained in:
Lykin 2024-01-06 23:06:29 +08:00
parent ed1b9d9b54
commit 0d6765a757
7 changed files with 64 additions and 13 deletions

View File

@ -64,6 +64,7 @@ const defaultValue = {
}
const dialogStore = useDialog()
const scrollRef = ref(null)
watchEffect(() => {
if (dialogStore.newKeyDialogVisible) {
const { prefix, server, db } = dialogStore.newKeyParam
@ -106,6 +107,12 @@ const renderTypeLabel = (option) => {
)
}
const onAppend = () => {
nextTick(() => {
scrollRef.value?.scrollTo({ position: 'bottom' })
})
}
const onChangeType = () => {
newForm.value = null
}
@ -181,7 +188,7 @@ const onClose = () => {
transform-origin="center"
@positive-click="onAdd"
@negative-click="onClose">
<n-scrollbar style="max-height: 500px">
<n-scrollbar ref="scrollRef" style="max-height: 500px">
<n-form
ref="newFormRef"
:model="newForm"
@ -219,7 +226,11 @@ const onClose = () => {
</n-button>
</n-input-group>
</n-form-item>
<component :is="newValueComponent[newForm.type]" ref="subFormRef" v-model:value="newForm.value" />
<component
:is="newValueComponent[newForm.type]"
ref="subFormRef"
v-model:value="newForm.value"
@append="onAppend" />
<!-- TODO: Add import from txt file option -->
</n-form>
</n-scrollbar>

View File

@ -3,7 +3,7 @@ import { computed, reactive, ref, watchEffect } from 'vue'
import useDialog from 'stores/dialog'
import useBrowserStore from 'stores/browser.js'
import { useI18n } from 'vue-i18n'
import { isEmpty, size } from 'lodash'
import { isEmpty } from 'lodash'
import TtlInput from '@/components/common/TtlInput.vue'
const ttlForm = reactive({

View File

@ -8,7 +8,7 @@ import IconButton from '@/components/common/IconButton.vue'
const props = defineProps({
value: Array,
})
const emit = defineEmits(['update:value'])
const emit = defineEmits(['update:value', 'append'])
/**
* @typedef Hash
@ -46,7 +46,15 @@ defineExpose({
@update:value="onUpdate">
<template #action="{ index, create, remove, move }">
<icon-button v-if="kvList.length > 1" :icon="Delete" size="18" @click="() => remove(index)" />
<icon-button :icon="Add" size="18" @click="() => create(index)" />
<icon-button
:icon="Add"
size="18"
@click="
() => {
create(index)
emit('append')
}
" />
</template>
</n-dynamic-input>
</n-form-item>

View File

@ -8,7 +8,7 @@ import IconButton from '@/components/common/IconButton.vue'
const props = defineProps({
value: Array,
})
const emit = defineEmits(['update:value'])
const emit = defineEmits(['update:value', 'append'])
const list = ref([''])
const onUpdate = (val) => {
@ -28,7 +28,15 @@ defineExpose({
<n-dynamic-input v-model:value="list" :placeholder="$t('dialogue.field.enter_elem')" @update:value="onUpdate">
<template #action="{ index, create, remove, move }">
<icon-button v-if="list.length > 1" :icon="Delete" size="18" @click="() => remove(index)" />
<icon-button :icon="Add" size="18" @click="() => create(index)" />
<icon-button
:icon="Add"
size="18"
@click="
() => {
create(index)
emit('append')
}
" />
</template>
</n-dynamic-input>
</n-form-item>

View File

@ -8,7 +8,7 @@ import IconButton from '@/components/common/IconButton.vue'
const props = defineProps({
value: Array,
})
const emit = defineEmits(['update:value'])
const emit = defineEmits(['update:value', 'append'])
const set = ref([''])
const onUpdate = (val) => {
@ -28,7 +28,15 @@ defineExpose({
<n-dynamic-input v-model:value="set" :placeholder="$t('dialogue.field.enter_elem')" @update:value="onUpdate">
<template #action="{ index, create, remove, move }">
<icon-button v-if="set.length > 1" :icon="Delete" size="18" @click="() => remove(index)" />
<icon-button :icon="Add" size="18" @click="() => create(index)" />
<icon-button
:icon="Add"
size="18"
@click="
() => {
create(index)
emit('append')
}
" />
</template>
</n-dynamic-input>
</n-form-item>

View File

@ -12,7 +12,7 @@ defineOptions({
inheritAttrs: false,
})
const id = ref('*')
const emit = defineEmits(['update:value'])
const emit = defineEmits(['update:value', 'append'])
/**
* @typedef Hash
@ -52,7 +52,15 @@ defineExpose({
@update:value="onUpdate">
<template #action="{ index, create, remove, move }">
<icon-button v-if="kvList.length > 1" :icon="Delete" size="18" @click="() => remove(index)" />
<icon-button :icon="Add" size="18" @click="() => create(index)" />
<icon-button
:icon="Add"
size="18"
@click="
() => {
create(index)
emit('append')
}
" />
</template>
</n-dynamic-input>
</n-form-item>

View File

@ -8,7 +8,7 @@ import IconButton from '@/components/common/IconButton.vue'
const props = defineProps({
value: Array,
})
const emit = defineEmits(['update:value'])
const emit = defineEmits(['update:value', 'append'])
/**
* @typedef ZSetItem
@ -57,7 +57,15 @@ defineExpose({
</template>
<template #action="{ index, create, remove, move }">
<icon-button v-if="zset.length > 1" :icon="Delete" size="18" @click="() => remove(index)" />
<icon-button :icon="Add" size="18" @click="() => create(index)" />
<icon-button
:icon="Add"
size="18"
@click="
() => {
create(index)
emit('append')
}
" />
</template>
</n-dynamic-input>
</n-form-item>