gsferro/odometer-easy

在 Laravel 项目中使用 odometer 插件，便于易用

维护者

详细信息

github.com/GuilhermeFerro/laravel-odometer-easy

源代码

问题

安装: 15

依赖: 0

建议者: 0

安全性: 0

星级: 0

关注者: 1

分支: 0

语言:CSS

v1.0 2023-01-28 01:17 UTC

MIT ffed3f3a7ba43d1cbca1b6b137cd26a245f7dc50

  • Guilherme Ferro <gsferroti.woop@gmail.com>

This package is auto-updated.

Last update: 2024-09-28 23:35:07 UTC

README

Logo

安装

composer require gsferro/odometer-easy && php artisan vendor:publish --provider="Gsferro\OdometerEasy\Providers\OdometerEasyServiceProvider" --force

使用

  • 使用 $value 作为变量的基本调用

    <x-odometer-easy :value="$value" />

  • 传递额外的类

    <x-odometer-easy :value="$value" class="h3" />

  • 传递固定值

    <x-odometer-easy value="1000" />

  • 传递格式（默认为巴西货币格式，例如：1.000,00）

    <x-odometer-easy
    value="1000,00"
    format="<veja as opções na documentação oficial abaixo>" 
/>

需求

Jquery

一般说明

  1. 该组件是为 Laravel 8 设计的，但也可以通过手动修改组件来使用
    <span id="{{ $key }}" class="odometer-item {{ $class ?? "" }}" data-value="{{ $value ?? 0 }}">0</span>
  2. 默认情况下，动画计数可用于在屏幕上多次使用，如果没有它，则在屏幕上使用超过10个位置时会出现延迟
  3. 要增加字体大小，请封装组件并使用类来增加字体大小
  4. 组件加载后无法动态更新值，如果要在屏幕上更新，则需要手动执行实例
    <span id="odo">0</span>
    var odo = new Odometer( $('#odo') );
value=100;
odo.update( value );
value+=100;
odo.update( value );

待办事项

  1. 在插件实例化后动态更改值
  2. 创建其他组件以使用文本主题
  3. 创建巴西格式（例如：CPF / CNPJ / CEP）的格式化
    <x-odometer-easy value="123.456.789-10" format="(.ddd)-dd" animation="false" />
  4. 允许在旧版本的 Laravel 中安装

Odometer 文档链接

https://github.hubspot.com/odometer/

纯插件示例

http://jsfiddle.net/adamschwartz/rx6BQ/

许可

  • MIT 许可证