Vt button

基于 vue 2 封装出的 button 组件,提供了基本的样式和事件。

Version: 1.1.5 Updated: 03/28/2017

By: vue-tools License: MIT

Downloads Last 30 Days: 63

Install

npm i vt-button
yarn add vt-button

Repository: https://github.com/vue-tools/vt-button

CDNs

bundle.run: https://bundle.run/vt-button

jsDelivr: https://cdn.jsdelivr.net/npm/vt-button

unpkg: https://unpkg.com/vt-button

vt-button

基于 vue 2 封装出的 button 组件,提供了基本的样式和事件。

Install

npm i vt-button -S

import Buttons from 'vt-button'

// global install
Vue.component('Buttons', Buttons)

// scope install
export default {
    components: {
        Buttons
    }
}

Usage

<template>
    <Buttons @click="clickMe">click</Buttons>
    <Buttons disabled>disabled</Buttons>
    <Buttons html-type="submit" @click="submitMe">submit</Buttons>
    <Buttons size="small">small</Buttons>
    <hr />
    <Buttons type="primary">primary</Buttons>
    <Buttons type="success">success</Buttons>
    <Buttons type="loading">loading</Buttons>
    <Buttons type="warning">warning</Buttons>
    <Buttons type="info">info</Buttons>
    <Buttons type="danger">danger</Buttons>
</template>

<script>
    import Buttons from 'src'

    export default {
        methods: {
            clickMe() {
                alert('点击演示')
            },
            submitMe(event) {
                alert(event.target.type)
            }
        },
        components: {
            Buttons
        }
    }
</script>

Interface

props:
  type:
    type: String
    default: ''
    description: 按钮的类型,可选值: ``primary````success````loading````warning````info````danger``
  disabled:
    type: Boolean
    default: false
    description: 是否置灰按钮
  size:
    type: String
    default: ''
    description: 按钮的大小,可选值: ``small````large````mini``
  htmlType:
    type: String
    default: button
    description: 按钮原生的 Type 值,可选值: ``button````submit````reset``
slots:
  default:
    description: 按钮文字
events:
  click:
    description: 按钮点击事件,在移动端有 300ms 延迟
Categories: Vue js
Tags: