vue 中使用Odometer「建议收藏」

vue • 2024-07-03 15:32 • 阅读 34

大家好，我是知秋君，一个会写博客吟诗的知秋码农。今天说一说vue 中使用Odometer「建议收藏」,希望能够帮助大家进步!!!

<template> <div> <IOdometer class="iOdometer" :value="num" format="(ddd).dd" /> </div> </template> <script> import IOdometer from "vue-odometer"; import "odometer/themes/odometer-theme-default.css"; export default { 
 components: { 
 IOdometer, }, data() { 
 return { 
 num: 99.99, }; }, mounted() { 
 const that = this; setInterval(function () { 
 that.num += 1; }, 3000 * 30); }, }; </script> <style lang='scss' scoped > .iOdometer { 
 font-size: 2em; margin: 0; ::v-deep .odometer-digit { 
 display: inline-block; width: 28px; height: 34px; background: linear-gradient(0deg, #0e2f6d, rgba(6, 41, 106, 0)); border: 1px solid; border-image: linear-gradient( 0deg, rgba(0, 182, 255, 0.8), rgba(0, 182, 255, 0.8) ); font-family: "DigifaceWide"; text-align: center; color: #fff; margin-left: 4px; border-radius: 3px; } ::v-deep .odometer-formatting-mark {  display: inline-block; width: 28px; height: 34px; background: linear-gradient(0deg, #0e2f6d, rgba(6, 41, 106, 0)); border: 1px solid; border-image: linear-gradient( 0deg, rgba(0, 182, 255, 0.8), rgba(0, 182, 255, 0.8) ); font-family: "DigifaceWide"; text-align: center; color: #fff; margin-left: 4px; border-radius: 3px; } } </style>

只听到从知秋君办公室传来知秋君的声音:

梁鸿不肯仕，孟光甘布裙。有谁来对上联或下联?

具体使用可以关注https://www.npmjs.com/package/vue-odometer
然后参考https://github.hubspot.com/odometer/

vue 中使用Odometer「建议收藏」

知秋君

相关推荐