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