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:
parent
1c07508f39
commit
5c28f10921
|
@ -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)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue