组件用.vue还是.js_Vue.js 2.x动画按钮组件

组件用.vue还是.js

通知 (Notify)

A simple button that displays progress. Compatible with Vue 2.x

一个显示进度的简单按钮。 与Vue 2.x兼容

安装 (Install)

$ npm install vue-progress-button --save

用法 (Usage)

Inside your component:

在组件内部：

To get the most basic version of a progress button

获取进度按钮的最基本版本

<progress-button>Button</progress-button>

The progress can be configured with another filling color. Simply add the fill-color property to the progress button element and give a color to it.

可以用其他填充颜色配置进度。 只需将fill-color属性添加到进度按钮元素并为其提供颜色。

<progress-button name="fillColor" class="btn btn-primary mr-1 mb-1" fill-color="#fff">Other fill color</progress-button>

The progress also be modified in terms of duration of the progress, position of the progress line

还可以根据进度的持续时间，进度线的位置来修改进度

<progress-button name="duration" class="btn btn-info mr-1 mb-1" :duration="10000">10 second animation</progress-button>
<progress-button name="bottom" class="btn btn-success mr-1 mb-1" :height="5" position="bottom">Bottom fill</progress-button>
<progress-button name="bottom" class="btn btn-warning mr-1 mb-1" :height="5" position="top">Top fill</progress-button>

import Button from 'vue-progress-button'

export default {
  components: {
    'progress-button': Button
  }
}

配置选项 (Configuration options)

Option	Type	Default	Description
fillColor	String	'#555'	The color of the progress bar filling the button
duration	Number	2000	The duration of the progress bar filling the entire button in milliseconds
height	Number	100	The height of the progress bar in px
position	String	'fill'	The position of the progress bar in the button, currently possible: top, bottom. Defaults to fill that fills the entire button

选项	类型	默认	描述
填色	串	'＃555'	进度条填充按钮的颜色
持续时间	数	2000	进度条填充整个按钮的持续时间(以毫秒为单位)
高度	数	100	进度条的高度(以像素为单位)
位置	串	'填'	进度条在按钮中的位置，当前可能是：顶部，底部。 默认填充到整个按钮

翻译自: https://vuejsexamples.com/vue-js-2-x-animated-button-component/

组件用.vue还是.js