feat: 更换字体v，以及页面加载之前就设置字体 #96
This commit is contained in:
LOG1997
@@ -1,76 +1,110 @@
|
||||
<script setup lang='ts'>
|
||||
import { ChevronDown, ChevronUp } from 'lucide-vue-next'
|
||||
import { refDebounced } from '@vueuse/core'
|
||||
import { ChevronRight, ChevronsUpDownIcon } from 'lucide-vue-next'
|
||||
import { PopoverArrow } from 'reka-ui'
|
||||
import { ref } from 'vue'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { useLocalFonts } from '@/hooks/useLocalFonts'
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from '@/components/ui/command'
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover'
|
||||
|
||||
const inputRef = ref()
|
||||
import { useLocalFonts } from '@/hooks/useLocalFonts'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const { getFonts, disabled, fonts } = useLocalFonts()
|
||||
const open = ref(false)
|
||||
const activeKey = ref('Arial')
|
||||
const debouncedActiveKey = refDebounced(activeKey, 20)
|
||||
const selectedFont = ref('')
|
||||
|
||||
function selectFont(selectedValue: any) {
|
||||
open.value = false
|
||||
activeKey.value = ''
|
||||
selectedFont.value = selectedValue
|
||||
}
|
||||
|
||||
function handelActiveKey(val: string) {
|
||||
activeKey.value = val
|
||||
}
|
||||
|
||||
function handleScroll() {
|
||||
activeKey.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="text-2xl">
|
||||
code
|
||||
</div>
|
||||
<div class="text-2xl" style="font-family: 'Consolas Bold Italic';">
|
||||
code
|
||||
</div>
|
||||
<font-select id="font-select-1" value="" style="display: initial;" />
|
||||
</div>
|
||||
<div class="w-full h-full flex justify-center items-center">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<label class="input cursor-default!" @click="getFonts">
|
||||
<input ref="inputRef" type="search" class="grow" placeholder="Search">
|
||||
<ChevronDown class="cursor-default" @click="inputRef.focus()" />
|
||||
<ChevronUp class="cursor-default" @click="inputRef.focus()" />
|
||||
</label>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent class="w-56" align="start">
|
||||
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||
<DropdownMenuGroup>
|
||||
<!-- <DropdownMenuItem v-for="[key, value] in Array.from(fonts)" :key="key" :style="{ fontFamily: `${key}` }">
|
||||
{{ key }}
|
||||
</DropdownMenuItem> -->
|
||||
<DropdownMenuSub v-for="[key, children] in Array.from(fonts)" :key="key">
|
||||
<DropdownMenuSubTrigger>
|
||||
<span :style="{ fontFamily: `${key}` }">{{ key }}</span>
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuSubContent>
|
||||
<DropdownMenuItem v-for="child in children" :key="child.value">
|
||||
<span :style="{ fontFamily: `${child.value}` }">{{ child.name }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenuSub>
|
||||
<DropdownMenuItem>
|
||||
New Team
|
||||
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>GitHub</DropdownMenuItem>
|
||||
<DropdownMenuItem>Support</DropdownMenuItem>
|
||||
<DropdownMenuItem disabled>
|
||||
API
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>
|
||||
Log out
|
||||
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<Popover v-model:open="open">
|
||||
<PopoverTrigger as-child :disabled="disabled">
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
:aria-expanded="open"
|
||||
class="w-[200px] justify-between"
|
||||
@click="getFonts"
|
||||
>
|
||||
{{ selectedFont || "选择字体..." }}
|
||||
<ChevronsUpDownIcon class="opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-[200px] p-0">
|
||||
<Command>
|
||||
<CommandInput class="h-9" placeholder="Search framework..." />
|
||||
<CommandList @scroll="handleScroll">
|
||||
<CommandEmpty>No framework found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
v-for="[key, value] in fonts"
|
||||
:key="key"
|
||||
:value="key"
|
||||
class="w-full hover:bg-gray-200/50"
|
||||
@select="selectFont(key)"
|
||||
>
|
||||
<Popover :open="debouncedActiveKey === key" class="w-full">
|
||||
<PopoverTrigger class="w-full">
|
||||
<div :style="{ fontFamily: `${key}` }" class="w-full flex justify-between items-center" @mouseleave="handelActiveKey('')" @mouseenter="handelActiveKey(key)">
|
||||
{{ key }}
|
||||
<ChevronRight
|
||||
:class="cn(
|
||||
'ml-auto',
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="p-2" side="right" @mouseleave="handelActiveKey('')" @mouseenter="handelActiveKey(key)">
|
||||
<PopoverArrow />
|
||||
<Command>
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
v-for="child in value"
|
||||
:key="child.value"
|
||||
:value="child.value"
|
||||
class="w-full hover:bg-gray-200/50"
|
||||
:style="{ fontFamily: `${key}` }"
|
||||
@select="selectFont(child.value)"
|
||||
>
|
||||
{{ child.name }}
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user