Improve props handling for <once-button> component

now we use computed properties for some of the underlying button props.  this
also adds a "click" event for the element; callers should be able to add
handler for that which happens *in addition to* the button disabling.  it's
assumed that's always safe or else caller wouldn't use `<once-button>`
This commit is contained in:
Lance Edgar 2019-06-04 17:49:39 -05:00
parent 1c07508f39
commit 5c28f10921

View file

@ -8,10 +8,10 @@ const OnceButton = {
':tag="tag"', ':tag="tag"',
':href="href"', ':href="href"',
':title="title"', ':title="title"',
':disabled="disabled"', ':disabled="buttonDisabled"',
'@click="clicked"', '@click="clicked"',
'>', '>',
'{{ text }}', '{{ buttonText }}',
'</b-button>' '</b-button>'
].join(' '), ].join(' '),
@ -27,17 +27,39 @@ const OnceButton = {
disabled: Boolean disabled: Boolean
}, },
data() {
return {
currentText: null,
currentDisabled: null,
}
},
computed: {
buttonText: function() {
return this.currentText || this.text
},
buttonDisabled: function() {
if (this.currentDisabled !== null) {
return this.currentDisabled
}
return this.disabled
},
},
methods: { methods: {
clicked(event) { clicked(event) {
this.disabled = true this.currentDisabled = true
if (this.workingText) { if (this.workingText) {
this.text = this.workingText this.currentText = this.workingText
} else if (this.working) { } else if (this.working) {
this.text = this.working + ", please wait..." this.currentText = this.working + ", please wait..."
} else { } else {
this.text = "Working, please wait..." this.currentText = "Working, please wait..."
} }
this.$nextTick(function() {
this.$emit('click', event)
})
} }
} }