feat: truncate long name

This commit is contained in:
Methapon2001 2023-11-29 15:27:25 +07:00
parent 6d8b8600ac
commit 8badbc4a22
No known key found for this signature in database
GPG key ID: 849924FEF46BD132

View file

@ -15,10 +15,8 @@ const props = withDefaults(
}>(), }>(),
{ {
level: 0, level: 0,
} },
) )
const MAX_NAME_LENGTH = 20
</script> </script>
<template> <template>
@ -39,14 +37,10 @@ const MAX_NAME_LENGTH = 20
level === 1 level === 1
? 'mdi-file-cabinet' ? 'mdi-file-cabinet'
: level === 2 : level === 2
? 'inbox' ? 'inbox'
: 'o_folder_open' : 'o_folder_open'
"
:label="
folder.name.length > MAX_NAME_LENGTH
? folder.name.slice(0, MAX_NAME_LENGTH) + '...'
: folder.name
" "
:label="folder.name"
class="text-overflow-handle" class="text-overflow-handle"
v-model="folder.status" v-model="folder.status"
> >
@ -60,16 +54,13 @@ const MAX_NAME_LENGTH = 20
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss" scoped>
.q-item[aria-expanded='true'] { :deep(.q-item[aria-expanded='true']) {
color: $primary; color: $primary;
} }
.q-item[aria-expanded='true'] .q-icon { .text-overflow-handle,
color: $primary; :deep(.q-item__label) {
}
.text-overflow-handle {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;