Custom Styles

Custom Colors

To make it easier to observe the color changes, the font size has been increased.

0110110440,,055011044

你还可以将下列属性作为文本颜色：

CSS 渐变属性
CSS 图片属性（加载图片时会有一段空白时间）
CSS 渐变属性 + 图片属性

Click to view code

ColorfulNumberDemo.vueDemoContainer.vue

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

斜体字号 64px

Data provided by Google Fonts API

Click to view code

PlayfulNumberDemo.vueDemoContainer.vue

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>

Custom Styles ​

Custom Colors ​

Custom Fonts ​

Custom Styles

Custom Colors

Custom Fonts