feat: Add count-to demo

feat: Add useWatermark hook and add useWatermark demo

src/views/Components/CountTo.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { CountTo } from '@/components/CountTo'
+import { ElRow, ElCol, ElInputNumber, ElInput, ElButton } from 'element-plus'
+import { ref, unref } from 'vue'
+
+const { t } = useI18n()
+
+const countRef = ref<ComponentRef<typeof CountTo>>()
+
+const startVal = ref(0)
+
+const endVal = ref(1314512)
+
+const duration = ref(3000)
+
+const decimals = ref(0)
+
+const separator = ref(',')
+
+const prefix = ref('¥ ')
+
+const suffix = ref(' rmb')
+
+const autoplay = ref(false)
+
+const start = () => {
+  unref(countRef)?.start()
+}
+
+const pauseResume = () => {
+  unref(countRef)?.pauseResume()
+}
+</script>
+
+<template>
+  <ContentWrap :title="t('countToDemo.countTo')" :message="t('countToDemo.countToDes')">
+    <div class="text-center mb-40px">
+      <CountTo
+        ref="countRef"
+        :start-val="startVal"
+        :end-val="endVal"
+        :duration="duration"
+        :decimals="decimals"
+        :separator="separator"
+        :prefix="prefix"
+        :suffix="suffix"
+        :autoplay="autoplay"
+        class="text-30px font-bold text-[var(--el-color-primary)]"
+      />
+    </div>
+    <ElRow :gutter="20" justify="space-between">
+      <ElCol :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
+        <div class="flex mb-20px items-center">
+          <span class="min-w-90px text-right">{{ t('countToDemo.startVal') }}：</span>
+          <ElInputNumber v-model="startVal" :min="0" />
+        </div>
+      </ElCol>
+      <ElCol :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
+        <div class="flex mb-20px items-center">
+          <span class="min-w-90px text-right">{{ t('countToDemo.endVal') }}：</span>
+          <ElInputNumber v-model="endVal" :min="1" />
+        </div>
+      </ElCol>
+      <ElCol :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
+        <div class="flex mb-20px items-center">
+          <span class="min-w-90px text-right">{{ t('countToDemo.duration') }}：</span>
+          <ElInputNumber v-model="duration" :min="1000" />
+        </div>
+      </ElCol>
+      <ElCol :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
+        <div class="flex mb-20px items-center">
+          <span class="min-w-90px text-right">{{ t('countToDemo.separator') }}：</span>
+          <ElInput v-model="separator" />
+        </div>
+      </ElCol>
+      <ElCol :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
+        <div class="flex mb-20px items-center">
+          <span class="min-w-90px text-right">{{ t('countToDemo.prefix') }}：</span>
+          <ElInput v-model="prefix" />
+        </div>
+      </ElCol>
+      <ElCol :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
+        <div class="flex mb-20px items-center">
+          <span class="min-w-90px text-right">{{ t('countToDemo.suffix') }}：</span>
+          <ElInput v-model="suffix" />
+        </div>
+      </ElCol>
+      <ElCol :span="24">
+        <div class="text-center">
+          <ElButton type="primary" @click="start">{{ t('countToDemo.start') }}</ElButton>
+          <ElButton @click="pauseResume">
+            {{ t('countToDemo.pause') }}/{{ t('countToDemo.resume') }}
+          </ElButton>
+        </div>
+      </ElCol>
+    </ElRow>
+  </ContentWrap>
+</template>