当前位置: 首页 > 工具软件 > Ladda > 使用案例 >

ladda_不到90行代码即可轻松实现Ladda,无需依赖

耿运浩
2023-12-01

ladda

带内置进度指示器的“提交”按钮 ('Submit' button with built-in progress indicator)

Simple implementation of Ladda (1, 2) in less than 90 lines of code with no dependencies.

Ladda(1、2)的不到90行代码的简单实现,没有任何依赖关系。

It can use Bootstrap 3 button styles or you can style it yourself.

它可以使用Bootstrap 3按钮样式,也可以自己设置样式。

道具 (Props)

disabled - Boolean, works the same as regular "disabled" attribute. progress - Number, if (> 0 && < 100) the button will disable itself, and display progress bar and the spinning circle. autoProgress - Number, if > 0 the button will display fake automatic progress (similar to vue-top-progress-bar). autoProgress determines the time in milliseconds to reach 100%. You should set it to your typical response time. Default is 3000 ms.

disabled-布尔值,与常规的“ disabled”属性相同。 progress-数字,如果(> 0 && <100),该按钮将自行禁用,并显示进度条和旋转圆圈。 autoProgress-数字,如果> 0,该按钮将显示假的自动进度(类似于vue-top-progress-bar)。 autoProgress确定达到100%的时间(以毫秒为单位)。 您应该将其设置为典型的响应时间。 默认值为3000毫秒。

The progress bar will never reach 100%, however, and will be stuck at 95% until you set it manually to either 0 or 100, in which case the button will return to its normal state.

但是,进度条永远不会达到100%,并且会停留在95%,直到您将其手动设置为0或100,在这种情况下,按钮将返回其正常状态。

If autoProgress is set to 0, you should provide the progress values yourself via the progress prop.

如果autoProgress设置为0,则应通过进度道具自己提供进度值。

If you don't want the progress bar to be displayed, set the progress to 0.1 and don't update it until finished (then set it to 0).

如果您不希望显示进度条,请将进度设置为0.1,直到完成才进行更新(然后将其设置为0)。

The automatic progression is logarithmic; this means the progress bar will move slower and slower as it goes higher.

自动级数是对数的; 这意味着进度条将随着进度的增加而越来越慢。

现场演示 (Live Demo)

https://nxtchg.github.io/pieces/vue/vue-submit/

https://nxtchg.github.io/pieces/vue/vue-submit/

翻译自: https://vuejsexamples.com/simple-implementation-of-ladda-in-less-than-90-lines-of-code-with-no-dependencies/

ladda

 类似资料: