|
|
@@ -0,0 +1,78 @@
|
|
|
+<template>
|
|
|
+ <button
|
|
|
+ class="el-button"
|
|
|
+ @click="handleClick"
|
|
|
+ :disabled="buttonDisabled || loading"
|
|
|
+ :autofocus="autofocus"
|
|
|
+ :type="nativeType"
|
|
|
+ :class="[
|
|
|
+ type ? 'el-button--' + type : '',
|
|
|
+ buttonSize ? 'el-button--' + buttonSize : '',
|
|
|
+ {
|
|
|
+ 'is-disabled': buttonDisabled,
|
|
|
+ 'is-loading': loading,
|
|
|
+ 'is-plain': plain,
|
|
|
+ 'is-round': round,
|
|
|
+ 'is-circle': circle
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <i class="el-icon-loading" v-if="loading"></i>
|
|
|
+ <i :class="icon" v-if="icon && !loading"></i>
|
|
|
+ <span v-if="$slots.default"><slot></slot></span>
|
|
|
+ </button>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'ElButton',
|
|
|
+
|
|
|
+ inject: {
|
|
|
+ elForm: {
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ elFormItem: {
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ props: {
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ default: 'default'
|
|
|
+ },
|
|
|
+ size: String,
|
|
|
+ icon: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ nativeType: {
|
|
|
+ type: String,
|
|
|
+ default: 'button'
|
|
|
+ },
|
|
|
+ loading: Boolean,
|
|
|
+ disabled: Boolean,
|
|
|
+ plain: Boolean,
|
|
|
+ autofocus: Boolean,
|
|
|
+ round: Boolean,
|
|
|
+ circle: Boolean
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ _elFormItemSize() {
|
|
|
+ return (this.elFormItem || {}).elFormItemSize;
|
|
|
+ },
|
|
|
+ buttonSize() {
|
|
|
+ return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
|
|
+ },
|
|
|
+ buttonDisabled() {
|
|
|
+ return this.disabled || (this.elForm || {}).disabled;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ handleClick(evt) {
|
|
|
+ this.$emit('click', evt);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|