123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- <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>
|