Element表单提交按钮组件FormFooter

效果展示

• 默认按钮

  确定 取消

• 自定义文字

  提交 取消

• 按钮位置

  取消 确定

FormFooter.vue

<template>
  <div class="form-footer" :class="className">
    <el-button :size="size" @click="onCancel" v-if="showCancel && cancelPosition == 'left'">{{cancelText}}</el-button>
    <el-button type="primary" :size="size" @click="onSubmit" :disabled="disabled">{{submitText }}</el-button>
    <el-button :size="size" @click="onCancel" v-if="showCancel && cancelPosition == 'right'">{{cancelText}}</el-button>
  </div>
</template>

<script>
  export default {
    name: 'FormFooter',
    emits: ['submit', 'cancel'],
    props: {
      submitText: {
        type: String,
        default: '确定'
      },
      cancelText: {
        type: String,
        default: '取消'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      showCancel: {
        type: Boolean,
        default: true
      },
      cancelPosition: {
        type: String,
        default: 'right'
      },
      size: {
        type: String,
        default: ''
      },
      className: {
        type: String | Function
      }
    },
    data() {
      return {
      }
    },
    methods: {
      onSubmit() {
        this.$emit('submit')
      },
      onCancel() {
        this.$emit('cancel')
      }
   }
}
</script>

<style lang="scss" scoped>
  .form-footer {
    text-align: center;
    margin-top: 10px;
  }
</style>

Attributes - 属性

名称	说明	类型	默认值	可选
submitText	提交按钮文字	String	确定
cancelText	取消按钮文字	String	取消
disabled	提交按钮是否可用	Boolean	false	true | false
showCancel	是否显示取消按钮	Boolean	true	true | false
cancelPosition	取消按钮位置	String	right	right | left
size	按钮大小	String	''	large | medium | small
className	外层元素样式	String | Function

Events - 事件

名称	说明	参数
submit	点击提交按钮触发	无
cancel	点击取消按钮触发	无