Custom Styles
Custom Colors
To make it easier to observe the color changes, the font size has been increased.
0110110440,,055011044
你还可以将下列属性作为文本颜色：
Click to view code
vue
<script setup>
import { ref } from "vue";
const number = ref(114514);
function switchNumber() {
number.value = Math.floor(Math.random() * 1000000);
}
const color = ref(
"#" +
Math.floor(Math.random() * 16777215)
.toString(16)
.padStart(6, "0")
);
</script>
<template>
<div class="text-center">
<vue-to-counter-number
class="!text-8xl font-bold"
:value="number"
:color="color"
locale-number
/>
</div>
<hr />
<div class="flex gap-4">
<input class="border border-solid p-1" v-model="number" type="number" />
<button class="border border-solid p-1" @click="switchNumber">切换</button>
<span class="flex-auto" />
<input class="border border-solid p-1" v-model="color" type="color" />
</div>
<div class="flex flex-col mt-4">
<div>你还可以将下列属性作为文本颜色：</div>
<ol>
<li>
<label>
<input
type="radio"
name="color"
value="linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)"
v-model="color"
/>
CSS 渐变属性
</label>
</li>
<li>
<label>
<input
type="radio"
name="color"
value="url('https://picsum.photos/400/300')"
v-model="color"
/>
CSS 图片属性（加载图片时会有一段空白时间）
</label>
</li>
<li>
<label>
<input
type="radio"
name="color"
value="linear-gradient(rgba(255, 0, 0, 0.4), rgba(0, 0, 255, 0.4)), url('https://picsum.photos/400/300')"
v-model="color"
/>
CSS 渐变属性 + 图片属性
</label>
</li>
</ol>
</div>
<div class="flex gap-4"></div>
</template>
<style scoped></style>vue
<script setup>
import StackblitzLogo from "../assets/stackblitz-logo.svg";
import { ref, toRefs } from "vue";
import { getCodeStackblitzParams } from "./generate-stackblitz-params";
import sdk from "@stackblitz/sdk";
import packageInfo from "../../vue-to-counter/package.json";
const props = defineProps({
title: {
type: String,
required: true,
},
});
const { title } = toRefs(props);
const containerRef = ref();
function handleStackblitz() {
if (!containerRef.value) return;
const tabs = containerRef.value.querySelectorAll(".tabs > label");
const blocks = containerRef.value.querySelectorAll(".blocks > div code");
if (tabs.length !== blocks.length) {
window.alert("The number of tabs and code blocks should be the same.");
return;
}
const files = Array.from(tabs).map((tab, index) => ({
filename: tab.textContent.trim(),
content: blocks[index].textContent,
}));
const params = getCodeStackblitzParams(files, {
title: `${title.value} - vue-to-counter@${packageInfo.version}`,
});
sdk.openProject(params, {
openFile: "src/demo.vue",
});
}
</script>
<template>
<div ref="containerRef" class="demo-container">
<div class="flex relative">
<span class="flex-auto" />
<span
title="Open In Stackblitz"
class="inline-block p-1 cursor-pointer hover:outline hover:outline-[#1389FD] outline-1"
@click="handleStackblitz"
>
<img
class="h-4 w-4 pointer-events-none"
:src="StackblitzLogo"
alt="CodeSandbox Logo"
/>
</span>
</div>
<hr />
<slot />
</div>
</template>
<style lang="scss">
.demo-container {
@apply flex flex-col justify-center border p-4 rounded-lg mt-4 text-sm;
.vue-to-counter {
@apply font-mono text-4xl;
}
.custom-block {
@apply m-0;
}
}
</style>Custom Fonts
You can directly customize various font properties by setting CSS properties.
0110110440,,055011044
Roboto
Open Sans
Google Sans
Noto Sans JP
Montserrat
Inter
Poppins
Lato
Material Icons
Roboto Condensed
Arimo
Roboto Mono
Noto Sans
Oswald
Raleway
Nunito Sans
Nunito
Playfair Display
Ubuntu
Noto Sans KR
Rubik
Roboto Slab
DM Sans
Merriweather
Work Sans
Material Symbols Outlined
Kanit
PT Sans
Lora
Quicksand
Mulish
Noto Sans TC
Manrope
IBM Plex Sans
Fira Sans
Outfit
Inconsolata
Figtree
Barlow
Material Symbols Rounded
Source Sans 3
Bebas Neue
Karla
Titillium Web
PT Serif
Noto Serif
Noto Sans SC
Material Icons Outlined
Prompt
Heebo
Roboto Flex
Jost
Archivo
Hind Siliguri
Dancing Script
Saira
Libre Baskerville
Source Code Pro
Noto Color Emoji
Noto Sans Arabic
Nanum Gothic
Libre Franklin
Josefin Sans
EB Garamond
Plus Jakarta Sans
Anton
Noto Sans Thai
Barlow Condensed
Schibsted Grotesk
Cairo
Smooch Sans
Noto Serif JP
Dosis
Cabin
Archivo Black
Public Sans
Bitter
Noto Sans Symbols
Mukta
Assistant
Space Grotesk
Ramabhadra
Noto Sans Telugu
Material Icons Round
Pacifico
Noto Sans Devanagari
Anek Telugu
Exo 2
Lobster
Crimson Text
Oxygen
Tinos
Red Hat Display
Hind
Urbanist
M PLUS Rounded 1c
Inter Tight
Lexend
Changa One
Arvo
Alfa Slab One
Cormorant Garamond
Comfortaa
Slabo 27px
Caveat
DM Serif Display
PT Sans Narrow
Bricolage Grotesque
Overpass
Fira Sans Condensed
IBM Plex Sans JP
Fjalla One
Sora
Tajawal
Rajdhani
Material Icons Sharp
Abel
Satisfy
STIX Two Text
Merriweather Sans
Almarai
Teko
Shadows Into Light
Bungee
Asap
Varela Round
Source Serif 4
Barlow Semi Condensed
Lexend Deca
Material Icons Two Tone
Domine
Maven Pro
Lilita One
Indie Flower
Abril Fatface
M PLUS 1p
Play
IBM Plex Mono
Orbitron
Questrial
Chakra Petch
Cinzel
Be Vietnam Pro
Bodoni Moda
Zilla Slab
Nanum Myeongjo
Instrument Serif
Kalam
Titan One
IBM Plex Serif
Great Vibes
Marcellus
ABeeZee
Exo
IBM Plex Sans Arabic
Archivo Narrow
Cormorant
Noto Serif KR
Catamaran
Spectral
Instrument Sans
Zen Kaku Gothic New
Google Sans Flex
Albert Sans
Fredoka
Unbounded
Saira Condensed
Frank Ruhl Libre
Permanent Marker
League Spartan
Rowdies
Signika
Geologica
Google Sans Code
Nanum Gothic Coding
Vollkorn
Sanchez
Sarabun
Alegreya Sans
Comic Neue
Unna
Noto Sans Display
Noto Kufi Arabic
Luckiest Guy
Bree Serif
Noto Serif TC
Newsreader
Alegreya
Montserrat Alternates
Sofia Sans
Signika Negative
DM Mono
Creepster
Acme
JetBrains Mono
Hind Madurai
Oleo Script
Encode Sans
Lobster Two
Yanone Kaffeesatz
Amatic SC
Cardo
Roboto Serif
Space Mono
Antic Slab
Amiri
Geist
Libre Caslon Text
Advent Pro
Russo One
Chivo
Prata
Hanken Grotesk
Zen Maru Gothic
Paytone One
Rubik Mono One
Bangers
Yellowtail
Righteous
Kumbh Sans
Changa
News Cycle
Passion One
Patua One
Gothic A1
Onest
Noto Sans HK
Rethink Sans
Delius
Atkinson Hyperlegible
Eczar
Asap Condensed
Rokkitt
Noticia Text
Courgette
Crete Round
Crimson Pro
Courier Prime
Fugaz One
Syne
Baskervville
Andada Pro
DM Serif Text
Old Standard TT
Cantarell
Hammersmith One
Fraunces
Tenor Sans
Literata
Press Start 2P
Alata
Sawarabi Mincho
Allura
Gruppo
Aleo
Noto Serif SC
PT Sans Caption
Alumni Sans
Readex Pro
Encode Sans Condensed
Gloria Hallelujah
Josefin Slab
Red Hat Text
Francois One
Libre Barcode 39
BIZ UDPGothic
Quattrocento
Mitr
Shippori Mincho
Sawarabi Gothic
Philosopher
Commissioner
Didact Gothic
Kaushan Script
Patrick Hand
Berkshire Swash
Sen
El Messiri
Macondo
Martel
League Gothic
Viga
Libre Bodoni
Sacramento
Actor
Quattrocento Sans
Zeyada
Ubuntu Condensed
Special Elite
Material Symbols Sharp
Taviraj
Oxanium
Rammetto One
Rock Salt
Pridi
Monoton
Fira Code
Noto Sans Mono
Playfair
Zen Old Mincho
IBM Plex Sans Condensed
Jura
Epilogue
Baloo 2
Neuton
Concert One
Cookie
Architects Daughter
Antonio
Playfair Display SC
Sorts Mill Goudy
Noto Sans Tamil
Noto Naskh Arabic
Gilda Display
Vazirmatn
Golos Text
Parisienne
Bai Jamjuree
Poiret One
Amaranth
Alexandria
Sofia Sans Condensed
VT323
Lexend Giga
Tangerine
Staatliches
Audiowide
Noto Sans Bengali
Khand
Black Han Sans
Forum
Kosugi Maru
Handlee
Pathway Gothic One
Quantico
Homemade Apple
Radio Canada
Blinker
PT Mono
Krub
Ropa Sans
Gelasio
Geist Mono
Yeseva One
Alice
Anuphan
Merienda
Ultra
Chango
Lusitana
Italianno
Anonymous Pro
Caveat Brush
Dela Gothic One
Alex Brush
Eater
Noto Serif Bengali
Amita
Arsenal
M PLUS 1
Unica One
Reenie Beanie
Abhaya Libre
Saira Semi Condensed
Hind Guntur
Saira Extra Condensed
Cuprum
Lustria
Itim
Ubuntu Mono
Volkhov
Noto Sans Hebrew
Istok Web
Monda
Faustina
Andika
Calistoga
Mada
Balsamiq Sans
Nanum Pen Script
Goldman
Petrona
Pinyon Script
Caladea
Nothing You Could Do
Gabarito
Yrsa
Pangolin
Fira Mono
Vidaloka
Cormorant Infant
Cinzel Decorative
GFS Didot
Hind Vadodara
Sriracha
Mukta Malar
Syncopate
Tilt Warp
Mr Dafoe
Pontano Sans
Cousine
Bad Script
Leckerli One
Playball
Sofia
Cabin Condensed
Carter One
Six Caps
Fira Sans Extra Condensed
Gudea
Ruda
Cutive Mono
Belleza
Economica
Arapey
Noto Serif Display
Just Another Hand
Boogaloo
Racing Sans One
Julius Sans One
Afacad
Michroma
Black Ops One
Chewy
Varela
Mona Sans
Sarala
Belanosima
Lateef
Marck Script
MuseoModerno
Gochi Hand
Bevan
Martel Sans
Georama
Covered By Your Grace
Londrina Solid
Damion
Spline Sans
Pragati Narrow
Noto Sans Malayalam
BenchNine
Sansita
Niramit
Gravitas One
Electrolize
IBM Plex Sans Thai
Averia Serif Libre
Alegreya Sans SC
Reddit Sans
Zen Kaku Gothic Antique
Overpass Mono
Mrs Saint Delafield
Jua
Tomorrow
Ms Madi
Reem Kufi
Alef
Rochester
Atkinson Hyperlegible Next
Pirata One
Gloock
Nixie One
Lalezar
Proza Libre
Wix Madefor Text
Kaisei Decol
Cedarville Cursive
Shrikhand
Wix Madefor Display
Shippori Mincho B1
Adamina
Biryani
Basic
Corben
Squada One
Rufina
Material Symbols
Murecho
Fredericka the Great
Coda
Kreon
Sofia Sans Extra Condensed
Charm
Do Hyeon
Khula
Besley
La Belle Aurore
Palanquin
Anton SC
Tektur
Parkinsans
Grandstander
Neucha
Days One
Lemonada
Glegoo
Baloo Da 2
Palanquin Dark
Secular One
Bungee Spice
Cabin Sketch
Judson
Akshar
Hachi Maru Pop
Montagu Slab
Laila
Darker Grotesque
K2D
Potta One
Chonburi
Yuji Mai
Yatra One
Stardos Stencil
Athiti
Aboreto
Allerta Stencil
Limelight
Inria Serif
Fustat
Bona Nova SC
Kiwi Maru
Noto Nastaliq Urdu
Livvic
Mali
Marcellus SC
Caprasimo
Nanum Brush Script
Rye
Ovo
Aclonica
Pattaya
M PLUS 2
Shadows Into Light Two
Fahkwang
Italiana
Alatsi
Antic
Averia Libre
Castoro
Sintony
Rozha One
Jomhuria
Funnel Sans
BIZ UDGothic
Kameron
Host Grotesk
Sevillana
Karma
Mandali
Nova Square
Spinnaker
Lexend Exa
Aldrich
Hepta Slab
Allison
Koulen
Spectral SC
Herr Von Muellerhoff
Radley
PT Serif Caption
Armata
Bellota Text
SUSE
Candal
Contrail One
Krona One
Caudex
Rosario
Nobile
Gowun Batang
Annie Use Your Telescope
Schoolbell
Enriqueta
Stack Sans Text
Young Serif
Stack Sans Headline
Fjord One
Amiko
REM
Graduate
Protest Revolution
Podkova
Cormorant Upright
Stack Sans Notch
Petit Formal Script
Bowlby One SC
Style Script
Kosugi
Oooh Baby
Trirong
Ma Shan Zheng
Bellefair
Maitree
Mountains of Christmas
Oranienbaum
Geo
Libre Caslon Display
UnifrakturMaguntia
Red Rose
Arbutus Slab
Klee One
Dongle
Cantata One
Yesteryear
Rakkas
Coming Soon
Anek Bangla
Mate
Brygada 1918
Suez One
Solway
Arizonia
Sofia Sans Semi Condensed
Ubuntu Sans
IM Fell English
Wallpoet
Fondamento
Metrophobic
BioRhyme
Alegreya SC
Monsieur La Doulaise
Gantari
Glory
Waiting for the Sunrise
Rancho
Knewave
Tilt Neon
Goudy Bookletter 1911
Noto Serif Hebrew
Oxygen Mono
Norican
Honk
Kristi
Azeret Mono
Skranji
Jockey One
Silkscreen
McLaren
Grand Hotel
Mansalva
Familjen Grotesk
Anek Latin
Manjari
Telex
Average Sans
Encode Sans Expanded
Marmelad
Croissant One
Love Ya Like A Sister
Lexend Zetta
Funnel Display
Libre Barcode 39 Text
Halant
DynaPuff
Fragment Mono
Markazi Text
Overlock
DotGothic16
Cormorant SC
Calligraffitti
Allerta
Hahmlet
Baloo Bhaijaan 2
Dawning of a New Day
Bentham
Irish Grover
Sniglet
Niconne
Sigmar One
Agbalumo
Chivo Mono
Rampart One
Encode Sans Semi Condensed
Antic Didone
Mochiy Pop One
Trocchi
Carlito
Bungee Inline
Noto Sans Sinhala
Faster One
Libre Barcode 128
Bowlby One
Modak
Mouse Memoirs
Turret Road
Vina Sans
Pixelify Sans
Charis SIL
Fresca
Carrois Gothic
ZCOOL QingKe HuangYou
Bubblegum Sans
Scada
Hina Mincho
IBM Plex Sans KR
Grenze Gotisch
Kantumruy Pro
Major Mono Display
IM Fell English SC
Lekton
Meddon
Licorice
Inria Sans
Gemunu Libre
Over the Rainbow
Jaldi
ZCOOL XiaoWei
Copse
Fanwood Text
RocknRoll One
Megrim
Euphoria Script
Della Respira
Syne Mono
BIZ UDPMincho
Odibee Sans
Corinthia
Vibur
Marvel
Baloo Thambi 2
Kelly Slab
Gurajada
Bayon
Hurricane
Pathway Extreme
Rambla
Yusei Magic
David Libre
Sansita Swashed
Pompiere
Noto Emoji
Ibarra Real Nova
Kadwa
Lexend Peta
Cherry Bomb One
ADLaM Display
Gabriela
KoHo
Gluten
Iceland
Tiro Bangla
Red Hat Mono
Birthstone
Recursive
Piazzolla
Aguafina Script
Cambay
Quintessential
Tienne
Alike
IBM Plex Sans Hebrew
Amarante
Saira Stencil One
Mr De Haviland
Magra
Barriecito
Qwigley
Baloo Chettan 2
Bungee Shade
Average
Fauna One
Aref Ruqaa
Nova Mono
Agdasima
Meie Script
Qwitcher Grypen
Short Stack
Zen Dots
Raleway Dots
Sunflower
Happy Monkey
Capriola
Inknut Antiqua
Cormorant Unicase
Metamorphous
Kufam
B612 Mono
Gotu
Noto Sans Math
Asul
Radio Canada Big
Notable
Bigshot One
Coiny
Rouge Script
Kaisei Opti
Anek Devanagari
Julee
Rasa
Atma
Encode Sans Semi Expanded
Vast Shadow
Baloo Tamma 2
Miriam Libre
Bakbak One
Ruslan Display
IM Fell DW Pica
Mukta Mahee
Battambang
Fuzzy Bubbles
Kurale
Farro
Coustard
Chelsea Market
Voltaire
Crafty Girls
Noto Serif Georgian
Bitcount Grid Double
Vujahday Script
Gamja Flower
Thasadith
Libre Barcode 39 Extended Text
Sue Ellen Francisco
Hi Melody
Noto Serif Devanagari
WindSong
Aladin
Mina
Hanuman
Kalnia
Henny Penny
Shantell Sans
Allan
Slackey
Prosto One
Noto Serif Khojki
Quando
B612
Poly
Kode Mono
Viaoda Libre
Baloo Paaji 2
AR One Sans
Seaweed Script
Truculenta
Noto Sans Myanmar
Tac One
Elsie
Whisper
Noto Sans Georgian
Give You Glory
Noto Sans Lao Looped
Original Surfer
Fascinate
Zen Antique
Expletus Sans
Mukta Vaani
Ephesis
Noto Sans Khmer
Holtwood One SC
Vesper Libre
Codystar
Fuggles
Jaro
Big Shoulders
Esteban
Bilbo Swash Caps
Federo
Iceberg
Kablammo
Monomaniac One
Walter Turncoat
Supermercado One
Freeman
Afacad Flux
Noto Serif HK
Cutive
MedievalSharp
Molengo
Imprima
Sofadi One
Arima
Buenard
Nosifer
Anybody
TikTok Sans
Kodchasan
Salsa
Wendy One
Sometype Mono
Anek Malayalam
Oregano
Balthazar
Numans
Kenia
League Script
Delicious Handrawn
Mallanna
Shojumaru
Puritan
Shippori Antique
Ribeye
Rubik Glitch
Brawler
Sarina
Just Me Again Down Here
ZCOOL KuaiLe
Wire One
Goblin One
Lacquer
Unkempt
Sarpanch
Cairo Play
Gowun Dodum
Oleo Script Swash Caps
Meow Script
Rubik Bubbles
Inder
The Girl Next Door
Platypi
Square Peg
Averia Sans Libre
Libre Barcode 128 Text
Zen Antique Soft
Zen Kurenaido
Playpen Sans
Charmonman
Fontdiner Swanky
Kranky
Gaegu
Cherry Swash
Mirza
Finger Paint
NTR
Doppio One
Mako
Orelega One
Cambo
Noto Sans Meetei Mayek
Sunshiney
Lily Script One
Xanh Mono
Martian Mono
Loved by the King
New Rocker
Rubik Dirt
Poller One
Arya
Grape Nuts
Madimi One
Bellota
Redressed
Train One
Galada
Flow Circular
Moul
Tiro Devanagari Hindi
Montez
Clicker Script
Suranna
Slabo 13px
Gentium Plus
Tenali Ramakrishna
Artifika
Noto Sans Kannada
Beth Ellen
Anaheim
Alike Angular
IM Fell Double Pica
Baloo Bhai 2
Freehand
Spicy Rice
Almendra
Baloo Tammudu 2
Amethysta
Voces
Nerko One
Rosarivo
Reddit Sans Condensed
Noto Sans Armenian
Ysabeau Office
Edu SA Beginner
Mogra
Doto
Cherry Cream Soda
Monofett
Sigmar
Sancreek
Nova Round
Noto Sans Gujarati
Vollkorn SC
Baumans
Nokora
Angkor
Sedgwick Ave
Uncial Antiqua
Sedgwick Ave Display
Padauk
Hedvig Letters Serif
Patrick Hand SC
Kaisei Tokumin
Asar
Bubbler One
Shanti
Chicle
Zain
M PLUS 1 Code
Scheherazade New
Geom
Life Savers
Prociono
Maiden Orange
Waterfall
Road Rage
Sumana
Bokor
Special Gothic
Noto Sans Thai Looped
Vampiro One
Metal Mania
Dokdo
Zalando Sans
Dynalight
Carattere
Poetsen One
Cal Sans
Comic Relief
Peralta
Miniver
Fenix
MonteCarlo
Denk One
Teachers
UnifrakturCook
Grenze
Special Gothic Condensed One
Crushed
Phudu
Gayathri
Modern Antiqua
Jersey 25
Germania One
Bona Nova
Trade Winds
The Nautigal
IM Fell Great Primer
Sour Gummy
Abyssinica SIL
Swanky and Moo Moo
Emilys Candy
Stick No Bills
Eagle Lake
Duru Sans
Convergence
Noto Sans Warang Citi
Manuale
Stick
Benne
Tiny5
Gupter
Baloo Bhaina 2
Mochiy Pop P One
Atomic Age
Timmana
Reggae One
Hedvig Letters Sans
Rubik Moonrocks
Underdog
Orienta
Pavanam
Bodoni Moda SC
Homenaje
Montaga
Genos
Yuji Syuku
Borel
IM Fell DW Pica SC
Carme
Erica One
Kavivanar
BhuTuka Expanded One
Macondo Swash Caps
Akatab
Lumanosimo
Noto Serif Thai
Lemon
Varta
Harmattan
Freckle Face
Delius Unicase
Kdam Thmor Pro
Delius Swash Caps
Inclusive Sans
Cantora One
Noto Sans Cypro Minoan
Sansation
Solitreo
Rhodium Libre
Headland One
Ceviche One
IM Fell French Canon
Tourney
Gwendolyn
Song Myung
Hubot Sans
Zhi Mang Xing
Sail
Sulphur Point
Belgrano
Nova Slim
Lilex
Sono
Imbue
Nova Flat
Frijole
Moon Dance
Jersey 10
Aoboshi One
Autour One
Protest Strike
Akaya Kanadaka
Scope One
Protest Riot
Amarna
Barrio
Mooli
Single Day
Kulim Park
Yomogi
Mohave
Lavishly Yours
Piedra
Ysabeau SC
Londrina Outline
Akronim
Nata Sans
Katibeh
Englebert
Medula One
Gugi
Noto Sans Ethiopic
Anta
Gulzar
Special Gothic Expanded One
IM Fell Double Pica SC
Birthstone Bounce
Playwrite HU
Ledger
Caesar Dressing
Imperial Script
Stylish
Khmer
Joan
Keania One
Anek Tamil
Liu Jian Mao Cao
Miltonian Tattoo
Asset
Long Cang
Jolly Lodger
Habibi
Karantina
Overlock SC
Tauri
Smythe
Stalemate
Poltawski Nowy
Alkatra
Trispace
Gafata
Noto Sans Gurmukhi
Akaya Telivigala
Noto Music
Gentium Book Plus
Astloch
Rubik Doodle Shadow
Rationale
Alkalami
Chau Philomene One
IM Fell Great Primer SC
Edu TAS Beginner
Mystery Quest
Gorditas
IM Fell French Canon SC
Winky Sans
Almendra Display
Sree Krushnadevaraya
East Sea Dokdo
Vend Sans
Cute Font
Noto Sans Canadian Aboriginal
IBM Plex Sans Thai Looped
Spline Sans Mono
Nova Script
Strait
Noto Sans Oriya
Bungee Tint
Comme
Zilla Slab Highlight
Sekuya
Miltonian
Noto Sans Symbols 2
Nova Cut
Jersey 15
Lexend Mega
Comforter Brush
Rum Raisin
Redacted
Shalimar
Island Moments
Nova Oval
Lovers Quarrel
Mynerve
Fasthand
Noto Sans Thaana
Kavoon
Beau Rivage
Margarine
Jomolhari
Victor Mono
Engagement
Dorsa
Zalando Sans SemiExpanded
Girassol
Flamenco
Spirax
Fascinate Inline
Sonsie One
Anek Gujarati
Ruthie
Noto Serif Malayalam
Comforter
Ranchers
Meera Inimai
Faculty Glyphic
BIZ UDMincho
Srisakdi
Chocolate Classical Sans
Zen Tokyo Zoo
Unlock
Stint Ultra Condensed
Handjet
Noto Sans Lao
Mate SC
Noto Serif Kannada
Seymour One
Playwrite US Trad
Risque
Stint Ultra Expanded
Passions Conflict
Kaisei HarunoUmi
Almendra SC
Alan Sans
Rubik Scribble
Carrois Gothic SC
Tillana
Texturina
Cactus Classical Serif
Port Lligat Slab
Kapakana
Ballet
Gideon Roman
Simonetta
Suwannaphum
Luxurious Script
Farsan
Climate Crisis
Qahiri
Dekko
Bonheur Royale
Braah One
Boldonse
Junge
Devonshire
Trykker
Tilt Prism
Noto Sans Osmanya
Paprika
Milonga
Linden Hill
Glass Antiqua
Smooch
Ojuju
Noto Sans Tagalog
Ysabeau Infant
Noto Sans Tai Viet
Tiro Devanagari Sanskrit
Playwrite VN Guides
Londrina Shadow
Stoke
Sura
Ramaraja
Festive
Edu AU VIC WA NT Hand
Rubik Wet Paint
Nabla
Shippori Antique B1
Text Me One
Cagliostro
Donegal One
Dangrek
My Soul
Kite One
Noto Serif Lao
Libre Barcode 39 Extended
Baskervville SC
Koh Santepheap
Noto Sans Buhid
Bagel Fat One
Chilanka
Oi
Ysabeau
Playwrite CU
Offside
Anek Kannada
Water Brush
Content
Marhey
Inika
Castoro Titling
Noto Sans Gothic
Stalinist One
Elsie Swash Caps
Romanesco
IBM Plex Sans Devanagari
Kotta One
Plaster
Bitcount Prop Single
Playwrite DE Grund
Bilbo
Lexend Tera
Jacquard 12
Yeon Sung
Chela One
Galindo
Mea Culpa
Condiment
Jacques Francois
Odor Mean Chey
Edu NSW ACT Cursive
Noto Rashi Hebrew
Chathura
Alumni Sans Pinstripe
Poor Story
Playwrite AU NSW
Gidugu
Arbutus
Noto Serif Telugu
Preahvihear
New Tegomin
Averia Gruesa Libre
Sedan SC
Princess Sofia
Jacques Francois Shadow
Ga Maamli
Darumadrop One
Fruktur
Liter
Asta Sans
Marko One
Playwrite IS
Metal
Sirin Stencil
Kumar One
Lunasima
Noto Sans Samaritan
Playwrite AU QLD
Jersey 20
Playwrite PL
Ruluko
Aref Ruqaa Ink
Smokum
Finlandica
Bungee Hairline
Encode Sans SC
LXGW WenKai TC
Noto Serif Ahom
Monomakh
Joti One
Montserrat Underline
Bruno Ace SC
Beiruti
Siemreap
Buda
Molle
New Amsterdam
Yaldevi
Twinkle Star
Moderustic
Lancelot
Federant
Bigelow Rules
Geostar Fill
Sahitya
Bitcount Grid Single
Sixtyfour
Amiri Quran
Passero One
Reddit Mono
Nuosu SIL
Noto Sans Sora Sompeng
Rubik Iso
Gasoek One
Micro 5
Caramel
Updock
Flow Rounded
Lugrasimo
Griffy
Big Shoulders Stencil
Orbit
Ribeye Marrow
Rubik Gemstones
Lakki Reddy
Bruno Ace
Galdeano
Hubballi
Reem Kufi Ink
Playwrite IN
Port Lligat Sans
Rubik Distressed
Luxurious Roman
Noto Sans NKo Unjoined
Tiro Devanagari Marathi
Grey Qo
Libre Barcode EAN13 Text
Miss Fajardose
Tulpen One
Ewert
Felipa
Anek Odia
Wellfleet
Cause
Reem Kufi Fun
Bungee Outline
Mr Bedfort
Inspiration
Anek Gurmukhi
Playwrite NO
Science Gothic
Bonbon
Praise
Purple Purse
Gidole
Yuji Boku
Ranga
Playwrite HR
Londrina Sketch
Bacasime Antique
Rubik Vinyl
Mrs Sheppards
Dr Sugiyama
Libertinus Sans
Noto Sans Tangsa
Explora
Langar
Fleur De Leah
Trochut
Butcherman
Chiron Sung HK
Arsenal SC
Noto Serif Tamil
Tiro Telugu
Manufacturing Consent
Diplomata SC
Bahiana
Babylonica
Noto Serif Armenian
Noto Serif Sinhala
Konkhmer Sleokchher
Hanalei Fill
Noto Serif Khmer
Kumar One Outline
Kirang Haerang
Noto Serif Gujarati
Blaka
Neonderthaw
Diplomata
Noto Sans Syloti Nagri
Alumni Sans Collegiate One
BioRhyme Expanded
Dai Banna SIL
Edu AU VIC WA NT Pre
Ravi Prakash
Peddana
Revalia
Rubik Glitch Pop
LXGW WenKai Mono TC
Noto Sans Javanese
Moulpali
Ruwudu
Uchen
Edu VIC WA NT Beginner
Ponomar
Agu Display
Dhurjati
Cascadia Code
Tiro Gurmukhi
Snippet
Flavors
Momo Signature
Epunda Sans
Iansui
Zalando Sans Expanded
Wittgenstein
Jim Nightshade
National Park
Playwrite AU SA
Chenla
Momo Trust Display
Tiro Kannada
GFS Neohellenic
Libertinus Serif
Diphylleia
Tsukimi Rounded
Bitcount Prop Double Ink
Chiron GoRound TC
Send Flowers
Zen Loop
Rubik Burned
Noto Sans Glagolitic
Oldenburg
Jacquard 24
Playwrite US Modern
Story Script
Bahianita
Noto Serif Tibetan
Butterfly Kids
TASA Orbiter
Ponnala
Huninn
Triodion
Emblema One
Foldit
BBH Hegarty
BBH Bartle
Ancizar Sans
Redacted Script
BBH Bogle
Alumni Sans Inline One
Love Light
Atkinson Hyperlegible Mono
Ole
Estonia
Are You Serious
Playwrite HR Lijeva
Mozilla Text
Noto Serif Tangut
Cascadia Mono
Edu NSW ACT Foundation
Noto Sans Anatolian Hieroglyphs
Kings
Rubik Microbe
Momo Trust Sans
Suravaram
Grechen Fuemen
Noto Sans Mongolian
Flow Block
Chiron Hei HK
Rubik Beastly
Sedan
Sassy Frass
Snowburst One
Noto Sans Coptic
TASA Explorer
Libertinus Math
WDXL Lubrifont JP N
Danfo
Playpen Sans Arabic
Combo
Ubuntu Sans Mono
Vibes
Matemasie
Playwrite GB S
Edu AU VIC WA NT Dots
Splash
Noto Serif Vithkuqi
Chokokutai
Workbench
Cherish
Playwrite DK Loopet
Black And White Picture
Labrada
Rubik 80s Fade
Rubik Puddles
Noto Sans Adlam
Ruge Boogie
Tapestry
Tiro Tamil
Tai Heritage Pro
Mozilla Headline
Hind Mysuru
Badeen Display
Cossette Titre
Protest Guerrilla
Rubik Spray Paint
Aubrey
Taprom
WDXL Lubrifont SC
Warnes
Noto Serif Balinese
Ancizar Serif
Libertinus Serif Display
Annapurna SIL
Elms Sans
Playwrite DE SAS
Bitcount Prop Single Ink
WDXL Lubrifont TC
Mingzat
Noto Sans Duployan
Noto Sans Hanunoo
Edu QLD Beginner
Geostar
M PLUS Code Latin
Rubik Marker Hatch
Moo Lah Lah
Jacquarda Bastarda 9
Alumni Sans SC
Rock 3D
Bitcount
Libertinus Mono
Petemoss
Noto Sans Old North Arabian
Noto Sans Carian
Playwrite BE VLG
Shizuru
Syne Tactile
Noto Sans Yi
Kolker Brush
Sixtyfour Convergence
Winky Rough
SUSE Mono
Noto Sans Batak
Noto Serif Khitan Small Script
Noto Serif Ethiopic
Noto Sans Takri
Kalnia Glaze
Noto Traditional Nushu
Noto Sans Old Italic
Kedebideri
Slackside One
LXGW Marker Gothic
Hanalei
Noto Sans Balinese
Phetsarath
Playwrite CA
Grandiflora One
Playwrite DE LA
Rubik Doodle Triangles
Playwrite NZ
Rubik Broken Fax
Playwrite MX Guides
Tagesschrift
Palette Mosaic
Playwrite NL
Moirai One
Puppies Play
Noto Serif Toto
Noto Sans Old Hungarian
Noto Sans Syriac
Tuffy
Parastoo
Sirivennela
Rubik Pixels
Playwrite IT Moderna
Edu AU VIC WA NT Guides
Noto Serif NP Hmong
Noto Sans Nag Mundari
Asimovian
Playwrite ZA
Noto Sans Brahmi
Noto Serif Yezidi
Noto Sans Cherokee
Shafarik
Noto Sans Nandinagari
Noto Sans Syriac Eastern
Intel One Mono
Noto Sans Cham
Noto Sans Indic Siyaq Numbers
Noto Sans Linear A
Noto Serif Oriya
Rubik Maps
Ingrid Darling
Yuji Hentaigana Akari
Playwrite CZ
Playpen Sans Hebrew
Playwrite DK Uloopet
Playwrite MX
Playwrite AR
Noto Sans Shavian
Playpen Sans Thai
Epunda Slab
Coral Pixels
Playwrite BE WAL
Noto Serif Myanmar
UoqMunThenKhung
Playpen Sans Deva
Noto Sans Avestan
Blaka Hollow
Edu SA Hand
Menbere
Rubik Maze
Namdhinggo
Bytesized
Linefont
Playwrite ES
Big Shoulders Inline
Noto Serif Dogra
Lisu Bosa
Savate
Noto Sans Palmyrene
Noto Sans Bamum
Noto Sans Adlam Unjoined
Edu NSW ACT Hand Pre
Playwrite VN
Playwrite CO
Playwrite AU TAS
Noto Serif Makasar
Exile
Noto Sans Gunjala Gondi
Jersey 20 Charted
Noto Sans Multani
Noto Sans Tifinagh
Noto Sans Lisu
Noto Serif Old Uyghur
Rubik Lines
Edu AU VIC WA NT Arrows
Noto Sans Khojki
Playwrite PT
Playwrite FR Moderne
Jaini
Noto Serif Ottoman Siyaq
Noto Sans Wancho
Noto Sans Mahajani
Blaka Ink
Noto Serif Grantha
Noto Sans Tai Le
Playwrite NG Modern
Noto Serif Hentaigana
Playwrite PE
Noto Sans Old Persian
Jacquard 12 Charted
Gajraj One
Noto Znamenny Musical Notation
Noto Sans Medefaidrin
Noto Sans Egyptian Hieroglyphs
Rubik Storm
Noto Sans Newa
Noto Sans Sogdian
Noto Sans Imperial Aramaic
Noto Sans Osage
Playwrite AU VIC
Noto Serif Todhri
Playwrite RO
Noto Sans Vithkuqi
Noto Serif Gurmukhi
Noto Sans Tai Tham
Noto Sans Mro
Noto Sans Inscriptional Pahlavi
Playwrite GB J
Noto Sans Miao
Karla Tamil Upright
Playwrite US Trad Guides
Noto Sans Bhaiksuki
Narnoor
Edu QLD Hand
Noto Sans Syriac Western
Noto Sans Cuneiform
Maname
Noto Sans Elbasan
Padyakke Expanded One
Noto Sans Sundanese
Playwrite CL
Matangi
Wavefont
Jaini Purva
Edu VIC WA NT Hand Pre
Noto Sans Tagbanwa
Playwrite ES Deco
Noto Sans New Tai Lue
Noto Sans PhagsPa
Noto Sans Lydian
Noto Sans Sharada
Noto Sans Ol Chiki
Sankofa Display
Edu VIC WA NT Hand
Noto Sans Tamil Supplement
Bitcount Grid Single Ink
Noto Sans Marchen
Noto Sans Zanabazar Square
Bitcount Single Ink
Noto Sans Saurashtra
Noto Sans Vai
Jacquard 24 Charted
Bitcount Prop Double
Noto Sans Kawi
Noto Sans Old Permic
Noto Sans Cypriot
Kay Pho Du
Noto Sans SignWriting
Playwrite CO Guides
Pochaevsk
Noto Sans Old South Arabian
Noto Sans Buginese
Bitcount Single
Noto Sans Runic
Jersey 15 Charted
Karla Tamil Inclined
Playwrite AT
Noto Sans Pahawh Hmong
Noto Sans NKo
Noto Sans Linear B
Noto Sans Mayan Numerals
Noto Sans Inscriptional Parthian
Noto Sans Elymaic
Noto Sans Psalter Pahlavi
Libertinus Keyboard
Playwrite IE
Noto Sans Chakma
Noto Sans Grantha
Noto Sans Nabataean
Kanchenjunga
Playwrite TZ
Noto Sans Hatran
Noto Sans Kaithi
Playwrite DE Grund Guides
Noto Sans Caucasian Albanian
Jersey 25 Charted
Bitcount Ink
Noto Sans Rejang
Noto Sans Soyombo
Noto Sans Hanifi Rohingya
Noto Sans Sunuwar
Playwrite DE VA
Jersey 10 Charted
Noto Sans Modi
Playwrite SK
Micro 5 Charted
Noto Sans Bassa Vah
Bitcount Grid Double Ink
Noto Sans Limbu
Playwrite ID
Yuji Hentaigana Akebono
Playwrite NZ Guides
Noto Sans Old Turkic
Noto Sans Ugaritic
Noto Sans Mandaic
Noto Sans Deseret
Noto Sans Chorasmian
Noto Sans Tirhuta
Playwrite PL Guides
Noto Sans Pau Cin Hau
Noto Serif Dives Akuru
Noto Sans Nushu
Playwrite PT Guides
Noto Sans Khudawadi
Noto Sans Ogham
Noto Sans Mende Kikakui
Playwrite PE Guides
Noto Sans Phoenician
Noto Sans Meroitic
Noto Sans Old Sogdian
Tirra
Yarndings 12
Noto Sans Manichaean
Noto Sans Kayah Li
Playwrite BR
Playwrite IT Trad
Yarndings 20
Noto Sans Lepcha
Noto Sans Kharoshthi
Noto Sans Masaram Gondi
Jacquarda Bastarda 9 Charted
Noto Sans Siddham
Playwrite FR Trad
Noto Sans Lycian
Cossette Texte
Yarndings 12 Charted
Playwrite IE Guides
Playwrite AU VIC Guides
Playwrite IT Moderna Guides
Playwrite BE WAL Guides
Playwrite TZ Guides
Playwrite DE VA Guides
Playwrite ZA Guides
Yarndings 20 Charted
Playwrite BR Guides
Playwrite ES Deco Guides
Playwrite FR Moderne Guides
Playwrite NL Guides
Playwrite US Modern Guides
Playwrite IT Trad Guides
Playwrite FR Trad Guides
Playwrite GB J Guides
Playwrite CL Guides
Playwrite ID Guides
Playwrite NG Modern Guides
Playwrite DK Loopet Guides
Playwrite AT Guides
Playwrite CA Guides
Playwrite CU Guides
Playwrite AU TAS Guides
Playwrite HU Guides
Playwrite AU SA Guides
Playwrite DK Uloopet Guides
Playwrite HR Lijeva Guides
Playwrite DE LA Guides
Playwrite AU NSW Guides
Playwrite GB S Guides
Playwrite HR Guides
Playwrite BE VLG Guides
Playwrite NO Guides
Playwrite SK Guides
Playwrite AU QLD Guides
Playwrite DE SAS Guides
Playwrite AR Guides
Playwrite IN Guides
Playwrite ES Guides
Playwrite RO Guides
Playwrite IS Guides
Playwrite CZ Guides
Click to view code
vue
<script setup>
import { ref } from "vue";
import GoogleFontPicker from "./GoogleFontPicker.vue";
const number = ref(114514);
function switchNumber() {
number.value = Math.floor(Math.random() * 1000000);
}
const italic = ref(false);
const fontSize = ref(64);
const color = ref(
"#" +
Math.floor(Math.random() * 16777215)
.toString(16)
.padStart(6, "0")
);
const fontFamily = ref("");
</script>
<template>
<div class="text-center">
<vue-to-counter-number
:value="number"
:color="color"
locale-number
:style="{
fontSize: fontSize + 'px',
lineHeight: 1.2,
fontStyle: italic ? 'italic' : 'normal',
fontFamily: fontFamily,
}"
/>
</div>
<hr />
<div class="flex gap-4">
<input class="border border-solid p-1" v-model="number" type="number" />
<button class="border border-solid p-1" @click="switchNumber">切换</button>
<span class="flex-auto" />
<input class="border border-solid p-1" v-model="color" type="color" />
</div>
<div class="flex gap-4 mt-4">
<label class="inline-flex gap-1 border border-solid p-1">
斜体
<input v-model="italic" type="checkbox" />
</label>
<label class="inline-flex gap-1 border border-solid p-1">
字号
<input v-model="fontSize" type="range" min="1" max="128" />
{{ fontSize }}px
</label>
</div>
<div class="flex gap-4 mt-4">
<google-font-picker v-model="fontFamily" />
</div>
</template>
<style scoped></style>vue
<script setup>
import StackblitzLogo from "../assets/stackblitz-logo.svg";
import { ref, toRefs } from "vue";
import { getCodeStackblitzParams } from "./generate-stackblitz-params";
import sdk from "@stackblitz/sdk";
import packageInfo from "../../vue-to-counter/package.json";
const props = defineProps({
title: {
type: String,
required: true,
},
});
const { title } = toRefs(props);
const containerRef = ref();
function handleStackblitz() {
if (!containerRef.value) return;
const tabs = containerRef.value.querySelectorAll(".tabs > label");
const blocks = containerRef.value.querySelectorAll(".blocks > div code");
if (tabs.length !== blocks.length) {
window.alert("The number of tabs and code blocks should be the same.");
return;
}
const files = Array.from(tabs).map((tab, index) => ({
filename: tab.textContent.trim(),
content: blocks[index].textContent,
}));
const params = getCodeStackblitzParams(files, {
title: `${title.value} - vue-to-counter@${packageInfo.version}`,
});
sdk.openProject(params, {
openFile: "src/demo.vue",
});
}
</script>
<template>
<div ref="containerRef" class="demo-container">
<div class="flex relative">
<span class="flex-auto" />
<span
title="Open In Stackblitz"
class="inline-block p-1 cursor-pointer hover:outline hover:outline-[#1389FD] outline-1"
@click="handleStackblitz"
>
<img
class="h-4 w-4 pointer-events-none"
:src="StackblitzLogo"
alt="CodeSandbox Logo"
/>
</span>
</div>
<hr />
<slot />
</div>
</template>
<style lang="scss">
.demo-container {
@apply flex flex-col justify-center border p-4 rounded-lg mt-4 text-sm;
.vue-to-counter {
@apply font-mono text-4xl;
}
.custom-block {
@apply m-0;
}
}
</style>