mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-30 12:52:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): should focus on mousedown

Browse Source
This commit is contained in:
07akioni 2020-02-28 14:13:05 +08:00
parent 128cc9f3c3
commit 3faa75d856
2 changed files with 22 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/documentation/landing/index.vue
View File

@ -8,7 +8,7 @@
},
"en-US": {
"start": "Getting Start",
"intro1": "An experimental Vue UI Framework",
"intro1": "An Experimental Vue UI Framework",
"intro2": "Caring About Styles, Themed, Batteries Included, Fast",
"intro3": "Intresting Somehow"
}

59
src/Button/src/Button.vue
View File

@ -19,6 +19,7 @@
:tabindex="syntheticFocusable ? 0 : -1"
@click="handleClick"
@blur="handleBlur"
@mousedown="handleMouseDown"
@keyup.enter="handleKeyUpEnter"
@keydown.enter="handleKeyDownEnter"
>
@ -37,7 +38,7 @@
:style="{
transition: hollowOutColorTransitionDisabled ? 'none' : null
}"
:stroke="simulateHollowOut ? ascendantBackgroundColor : null"
:stroke="hollowText ? ascendantBackgroundColor : null"
:stroke-width="24"
/>
<n-icon
@ -45,8 +46,8 @@
key="icon"
:style="{
transition: hollowOutColorTransitionDisabled ? 'none' : null,
fill: simulateHollowOut ? ascendantBackgroundColor : null,
stroke: simulateHollowOut ? ascendantBackgroundColor : null
fill: hollowText ? ascendantBackgroundColor : null,
stroke: hollowText ? ascendantBackgroundColor : null
}"
class="n-icon-slot"
>
@ -62,7 +63,7 @@
class="n-button__content"
:style="{
transition: hollowOutColorTransitionDisabled ? 'none' : null,
color: simulateHollowOut ? ascendantBackgroundColor : null
color: hollowText ? ascendantBackgroundColor : null
}"
>
<slot />
@ -83,7 +84,7 @@
:style="{
transition: hollowOutColorTransitionDisabled ? 'none' : null
}"
:stroke="simulateHollowOut ? ascendantBackgroundColor : null"
:stroke="hollowText ? ascendantBackgroundColor : null"
:stroke-width="24"
/>
<n-icon
@ -92,8 +93,8 @@
class="n-icon-slot"
:style="{
transition: hollowOutColorTransitionDisabled ? 'none' : null,
fill: simulateHollowOut ? ascendantBackgroundColor : null,
stroke: simulateHollowOut ? ascendantBackgroundColor : null
fill: hollowText ? ascendantBackgroundColor : null,
stroke: hollowText ? ascendantBackgroundColor : null
}"
>
<slot
@ -191,6 +192,10 @@ export default {
validator (iconPlacement) {
return ['left', 'right'].includes(iconPlacement)
}
},
hollowText: {
type: Boolean,
default: false
}
},
data () {
@ -210,24 +215,8 @@ export default {
noTextContent () {
return this.circle || !this.$slots.default
},
avoidHollowOut () {
return true
// return (
// this.text ||
// this.ghost ||
// !['primary', 'link', 'info', 'success', 'warning', 'error'].includes(
// this.type
// )
// )
},
simulateHollowOut () {
if (this.ghost) return false
if (this.text) return false
if (
['primary', 'link', 'info', 'success', 'warning', 'error'].includes(
this.type
)
) { return true } else return false
avoidHollowout () {
return !this.hollowText
},
syntheticFocusable () {
return this.focusable && !this.disabled
@ -239,23 +228,17 @@ export default {
return this.iconPlacement === 'right'
}
},
watch: {
type (value) {
if (
['primary', 'link', 'info', 'success', 'warning', 'error'].includes(
value
)
) {
if (!this.cssNode) {
// TODO: something
}
}
}
},
beforeDestroy () {
window.clearTimeout(this.rippleTimer)
},
methods: {
handleMouseDown (e) {
if (this.disabled) return
if (this.syntheticFocusable) {
e.preventDefault()
this.$el.focus()
}
},
handleClick (e) {
if (!this.disabled) {
this.$emit('click', e)