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 | 点击取消按钮触发 | 无 |