first
This commit is contained in:
8
packages/button/index.js
Normal file
8
packages/button/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import ElButton from './src/button';
|
||||
|
||||
/* istanbul ignore next */
|
||||
ElButton.install = function(Vue) {
|
||||
Vue.component(ElButton.name, ElButton);
|
||||
};
|
||||
|
||||
export default ElButton;
|
10
packages/button/src/button-group.vue
Normal file
10
packages/button/src/button-group.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div class="el-button-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ElButtonGroup'
|
||||
};
|
||||
</script>
|
78
packages/button/src/button.vue
Normal file
78
packages/button/src/button.vue
Normal file
@@ -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>
|
Reference in New Issue
Block a user