我在Vue中有一个组件,我使用了提交按钮的替代品。我可以将一个处理程序传递给它,组件在禁用自身后调用它并将其状态设置为已加载,并且它可以在错误后恢复(再次启用)并显示一个漂亮的成功动画,如果一切顺利的话。这很好用,代码如下:
// Submit.vue
<template>
<button :type="type" :class="classes" :disabled="loading" @click="onClick">
<span class="flag" v-if="flag"></span>
<slot></slot>
</button>
</template>
<script>
import _ from 'lodash'
export default {
name: 'submit',
props: {
brand: {
type: String,
default: 'primary'
},
// If no handler is provided, will fallback to normal submit button
handler: {
type: Function,
required: false
},
flag: {
type: Boolean,
default: false
}
},
data () {
return {
loading: false,
success: false
}
},
computed: {
type () {
return typeof this.handler !== 'undefined' ? 'button' : 'submit'
},
classes () {
return [
`btn btn-${this.brand}`,
this.loading && !this.success ? 'loading' : null,
this.success ? 'success' : null
]
}
},
methods: {
onClick (event) {
if (this.success) {
event.preventDefault()
return
}
this.loading = true
if (typeof this.handler !== 'undefined') {
// Handler must return a Promise
this.handler.call()
.then(_.bind(() => {
this.onSuccess()
}, this))
.catch(() => {})
.then(_.bind(() => {
this.loading = false
}, this))
}
},
resetSuccess () {
this.success = false
},
onSuccess () {
this.success = true
setTimeout(this.resetSuccess, 2000)
}
}
}
</script>
如果没有传递处理程序,它会回退到正常的提交按钮,假设你想要的只是在提交表单时自动禁用按钮。当我点击从组件创建的按钮时,唯一的问题是表单未提交。
我认为通过JS使用onClick
方法强制提交是相当容易的,但我想理解为什么它没有。这是一个浏览器问题吗?安全问题?一个Vue问题?或者其他我想念的东西可能就在我面前?
这是一个快速测试的JSFiddle:https://jsfiddle.net/03fgwgy5/ 代码并不完全相同,因为我使用的是单文件组件,但要点是相同的,可以很容易地观察到行为。
答案 0 :(得分:2)
在检查是否存在loading
之前,您将handler
设置为false。由于您将按钮的disabled
属性绑定到loading
,因此您将禁用该按钮并阻止触发本机点击事件。
在检查处理程序后,只需设置loading
属性:
if (typeof this.handler !== 'undefined') {
this.loading = true;
...
}
答案 1 :(得分:1)
为了记录,这是我最终做的事情:
onClick (event) {
if (this.success) {
event.preventDefault()
return
}
this.loading = true
if (typeof this.handler !== 'undefined') {
// Handler must return a Promise
this.handler.call()
.then(_.bind(() => {
this.onSuccess()
}, this))
.catch(() => {})
.then(_.bind(() => {
this.loading = false
}, this))
} else {
this.$el.form.submit()
}
}
这允许我在点击时禁用表单并显示加载状态,但仍然强制提交。