Vue按钮组件 - vue-button

2016-11-20      4      Vue
项目简介

vue-button

Vue.js v2.0.1+按钮组件

Installation

NPM (推荐)

$ npm install vue-button

手动

下载 dist/vue-button.js  并将它导入到你的HTML文件:

<script src="path/to/vue-button/dist/vue-button.js"></script>

或者你可以从unpkg中引用它:

<!--use the lastest release-->
<script src="https://unpkg.com/vue-button@lastest"></script>

使用方法

<!-- default button -->
<v-button>
  Button
</v-button>

<!-- disabled button -->
<v-button disabled>
  Button
</v-button>

<!-- large button -->
<v-button large>
  Button
</v-button>

<!-- markup button option: primary, success, warning, error -->
<v-button markup="success">
  Button
</v-button>

<!-- button with multiple attribute -->
<v-button markup="warning" large>
 Button
</v-button>

NPM & vue-loader的ES模块 (推荐)

import Vue from 'Vue'
import VueButton from 'vue-button'

// register component to use
Vue.component('v-button', VueButton)

参数

/**
 * Equivalent to the `id` attribute on an `<button>`.
 * @type {String}
 */
id: {
  type: String,
  default: null
},

/**
 * Attach your custom class on the compontent.
 * That means you can change the style if you want.
 * @type {String}
 */
customClass: {
  type: String,
  default: null
},

/**
 * Equivalent to the `name` attribute on an `<button>`.
 * @type {String}
 */
name: {
  type: String,
  default: null
},

/**
 * Equivalent to the `disabled` attribute on an `<button>`.
 * @type {Boolean}
 */
disabled: {
  type: Boolean,
  default: false
},

/**
 * If set enable button font size will be large.
 * @type {Boolean}
 */
large: {
  type: Boolean,
  default: false
},

/**
 * Markup button.
 * The value can be `default`, `primary`, `success`, `warning`, `error`.
 * @type {String}
 */
markup: {
  type: String,
  default: 'default'
},

/**
 * Set the click event on `<button>`.
 */
@click {
  type: Object,
  defalut: null
}