v-uikit/src/components/UkButton.js

基于 UIKit 和 Vue2 开发的界面套件

import '../assets/common.less'
export default {
  name: 'UkButton',
  props: {
    active: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: ''
    },
    icon: {
      type: String
    },
    rightIcon:{
      type:String
    },
    size: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: ''
    }
  },
  render (h) {
    const data = {
      class: {
        'uk-button': true,
        'uk-active': this.active,
        [`uk-width-${this.width}`]: this.width,
        'uk-button-primary': this.color === 'primary',
        'uk-button-success': this.color === 'success',
        'uk-button-danger': this.color === 'danger',
        'uk-button-link': this.color === 'link',
        'uk-button-mini': this.size === 'mini',
        'uk-button-small': this.size === 'small',
        'uk-button-large': this.size === 'large'
      }
    }
    let clickHandler = (e) => {
      e.preventDefault()
      this.$emit('click')
    }
    const cssIcon = 'uk-icon-' + this.icon
    const _when = (condition, fn) => {
      if (condition) {
        return fn
      }
    }
    return (
      <button disabled={ this.disabled }
              on-click={ clickHandler }
              {...data}>
        <uk-icon name={this.icon}></uk-icon> { this.$slots.default } {this.rightIcon && <uk-icon name={this.rightIcon}></uk-icon>}
      </button>)
  }
}