perf: scroll to bottom when append item in new key dialog
This commit is contained in:
parent
ed1b9d9b54
commit
0d6765a757
|
@ -64,6 +64,7 @@ const defaultValue = {
|
||||||
}
|
}
|
||||||
|
|
||||||
const dialogStore = useDialog()
|
const dialogStore = useDialog()
|
||||||
|
const scrollRef = ref(null)
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
if (dialogStore.newKeyDialogVisible) {
|
if (dialogStore.newKeyDialogVisible) {
|
||||||
const { prefix, server, db } = dialogStore.newKeyParam
|
const { prefix, server, db } = dialogStore.newKeyParam
|
||||||
|
@ -106,6 +107,12 @@ const renderTypeLabel = (option) => {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const onAppend = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
scrollRef.value?.scrollTo({ position: 'bottom' })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const onChangeType = () => {
|
const onChangeType = () => {
|
||||||
newForm.value = null
|
newForm.value = null
|
||||||
}
|
}
|
||||||
|
@ -181,7 +188,7 @@ const onClose = () => {
|
||||||
transform-origin="center"
|
transform-origin="center"
|
||||||
@positive-click="onAdd"
|
@positive-click="onAdd"
|
||||||
@negative-click="onClose">
|
@negative-click="onClose">
|
||||||
<n-scrollbar style="max-height: 500px">
|
<n-scrollbar ref="scrollRef" style="max-height: 500px">
|
||||||
<n-form
|
<n-form
|
||||||
ref="newFormRef"
|
ref="newFormRef"
|
||||||
:model="newForm"
|
:model="newForm"
|
||||||
|
@ -219,7 +226,11 @@ const onClose = () => {
|
||||||
</n-button>
|
</n-button>
|
||||||
</n-input-group>
|
</n-input-group>
|
||||||
</n-form-item>
|
</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 -->
|
<!-- TODO: Add import from txt file option -->
|
||||||
</n-form>
|
</n-form>
|
||||||
</n-scrollbar>
|
</n-scrollbar>
|
||||||
|
|
|
@ -3,7 +3,7 @@ import { computed, reactive, ref, watchEffect } from 'vue'
|
||||||
import useDialog from 'stores/dialog'
|
import useDialog from 'stores/dialog'
|
||||||
import useBrowserStore from 'stores/browser.js'
|
import useBrowserStore from 'stores/browser.js'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { isEmpty, size } from 'lodash'
|
import { isEmpty } from 'lodash'
|
||||||
import TtlInput from '@/components/common/TtlInput.vue'
|
import TtlInput from '@/components/common/TtlInput.vue'
|
||||||
|
|
||||||
const ttlForm = reactive({
|
const ttlForm = reactive({
|
||||||
|
|
|
@ -8,7 +8,7 @@ import IconButton from '@/components/common/IconButton.vue'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
value: Array,
|
value: Array,
|
||||||
})
|
})
|
||||||
const emit = defineEmits(['update:value'])
|
const emit = defineEmits(['update:value', 'append'])
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @typedef Hash
|
* @typedef Hash
|
||||||
|
@ -46,7 +46,15 @@ defineExpose({
|
||||||
@update:value="onUpdate">
|
@update:value="onUpdate">
|
||||||
<template #action="{ index, create, remove, move }">
|
<template #action="{ index, create, remove, move }">
|
||||||
<icon-button v-if="kvList.length > 1" :icon="Delete" size="18" @click="() => remove(index)" />
|
<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>
|
</template>
|
||||||
</n-dynamic-input>
|
</n-dynamic-input>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
|
|
|
@ -8,7 +8,7 @@ import IconButton from '@/components/common/IconButton.vue'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
value: Array,
|
value: Array,
|
||||||
})
|
})
|
||||||
const emit = defineEmits(['update:value'])
|
const emit = defineEmits(['update:value', 'append'])
|
||||||
|
|
||||||
const list = ref([''])
|
const list = ref([''])
|
||||||
const onUpdate = (val) => {
|
const onUpdate = (val) => {
|
||||||
|
@ -28,7 +28,15 @@ defineExpose({
|
||||||
<n-dynamic-input v-model:value="list" :placeholder="$t('dialogue.field.enter_elem')" @update:value="onUpdate">
|
<n-dynamic-input v-model:value="list" :placeholder="$t('dialogue.field.enter_elem')" @update:value="onUpdate">
|
||||||
<template #action="{ index, create, remove, move }">
|
<template #action="{ index, create, remove, move }">
|
||||||
<icon-button v-if="list.length > 1" :icon="Delete" size="18" @click="() => remove(index)" />
|
<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>
|
</template>
|
||||||
</n-dynamic-input>
|
</n-dynamic-input>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
|
|
|
@ -8,7 +8,7 @@ import IconButton from '@/components/common/IconButton.vue'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
value: Array,
|
value: Array,
|
||||||
})
|
})
|
||||||
const emit = defineEmits(['update:value'])
|
const emit = defineEmits(['update:value', 'append'])
|
||||||
|
|
||||||
const set = ref([''])
|
const set = ref([''])
|
||||||
const onUpdate = (val) => {
|
const onUpdate = (val) => {
|
||||||
|
@ -28,7 +28,15 @@ defineExpose({
|
||||||
<n-dynamic-input v-model:value="set" :placeholder="$t('dialogue.field.enter_elem')" @update:value="onUpdate">
|
<n-dynamic-input v-model:value="set" :placeholder="$t('dialogue.field.enter_elem')" @update:value="onUpdate">
|
||||||
<template #action="{ index, create, remove, move }">
|
<template #action="{ index, create, remove, move }">
|
||||||
<icon-button v-if="set.length > 1" :icon="Delete" size="18" @click="() => remove(index)" />
|
<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>
|
</template>
|
||||||
</n-dynamic-input>
|
</n-dynamic-input>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
|
|
|
@ -12,7 +12,7 @@ defineOptions({
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
})
|
})
|
||||||
const id = ref('*')
|
const id = ref('*')
|
||||||
const emit = defineEmits(['update:value'])
|
const emit = defineEmits(['update:value', 'append'])
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @typedef Hash
|
* @typedef Hash
|
||||||
|
@ -52,7 +52,15 @@ defineExpose({
|
||||||
@update:value="onUpdate">
|
@update:value="onUpdate">
|
||||||
<template #action="{ index, create, remove, move }">
|
<template #action="{ index, create, remove, move }">
|
||||||
<icon-button v-if="kvList.length > 1" :icon="Delete" size="18" @click="() => remove(index)" />
|
<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>
|
</template>
|
||||||
</n-dynamic-input>
|
</n-dynamic-input>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
|
|
|
@ -8,7 +8,7 @@ import IconButton from '@/components/common/IconButton.vue'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
value: Array,
|
value: Array,
|
||||||
})
|
})
|
||||||
const emit = defineEmits(['update:value'])
|
const emit = defineEmits(['update:value', 'append'])
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @typedef ZSetItem
|
* @typedef ZSetItem
|
||||||
|
@ -57,7 +57,15 @@ defineExpose({
|
||||||
</template>
|
</template>
|
||||||
<template #action="{ index, create, remove, move }">
|
<template #action="{ index, create, remove, move }">
|
||||||
<icon-button v-if="zset.length > 1" :icon="Delete" size="18" @click="() => remove(index)" />
|
<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>
|
</template>
|
||||||
</n-dynamic-input>
|
</n-dynamic-input>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
|
|
Loading…
Reference in New Issue