Skip to content

Commit

Permalink
feat(ui/button): optimize hover effect (#881)
Browse files Browse the repository at this point in the history 
* feat(button): 为button按钮实现hover效果

* fix(button): fix comment,The mask layer is implemented using a dynamic class,fix func name

* test(snap): update snapshots
  • Loading branch information
@tiny-dust
tiny-dust authored Mar 7, 2023
1 parent c85f137 commit fd69f23
Show file tree
Hide file tree
Showing 8 changed files with 181 additions and 1 deletion.
12 changes: 11 additions & 1 deletion packages/varlet-ui/src/button/Button.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
[states.outline, n('--outline')]
)
"
v-hover:desktop="handleHover"
:style="{
color: states.textColor,
background: states.color,
Expand All @@ -39,6 +40,7 @@
<div :class="classes(n('content'), [loading || pending, n('--hidden')])">
<slot />
</div>
<div :class="classes(n('overlay'), [hovering, n('--hovering')])"></div>
</button>
</template>

Expand All @@ -49,6 +51,7 @@ import { computed, defineComponent, ref, type Ref } from 'vue'
import { props } from './props'
import { call, createNamespace } from '../utils/components'
import { useButtonGroup } from './provide'
import Hover from '../hover'
import { isArray } from '@varlet/shared'
const { n, classes } = createNamespace('button')
Expand All @@ -58,10 +61,11 @@ export default defineComponent({
components: {
VarLoading,
},
directives: { Ripple },
directives: { Ripple, Hover },
props,
setup(props) {
const pending: Ref<boolean> = ref(false)
const hovering: Ref<boolean> = ref(false)
const { buttonGroup } = useButtonGroup()
const states = computed(() => {
Expand Down Expand Up @@ -126,11 +130,17 @@ export default defineComponent({
attemptAutoLoading(call(onTouchstart, e))
}
const handleHover = (isHover: boolean) => {
hovering.value = isHover
}
return {
n,
classes,
pending,
states,
hovering,
handleHover,
handleClick,
handleTouchstart,
}
Expand Down
18 changes: 18 additions & 0 deletions packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,76 +4,94 @@ exports[`test button group color and text-color 1`] = `
"<div class=\\"var-button-group var--box var-button-group--mode-normal var-button-group--horizontal var-elevation--2\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--0\\" style=\\"color: red; background: yellow;\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--0\\" style=\\"color: red; background: yellow;\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--0\\" style=\\"color: red; background: yellow;\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button></div>"
`;
exports[`test button group default slots 1`] = `
"<div class=\\"var-button-group var--box var-button-group--mode-normal var-button-group--horizontal var-elevation--2\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--0\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--0\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--0\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button></div>"
`;
exports[`test button group elevation 1`] = `
"<div class=\\"var-button-group var--box var-button-group--mode-normal var-button-group--horizontal var-elevation--10\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--0\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--0\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--0\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button></div>"
`;
exports[`test button group outline mode 1`] = `
"<div class=\\"var-button-group var--box var-button-group--mode-outline var-button-group--horizontal\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--outline\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--outline\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--outline\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button></div>"
`;
exports[`test button group text mode 1`] = `
"<div class=\\"var-button-group var--box var-button-group--mode-text var-button-group--horizontal\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button></div>"
`;
exports[`test button group type and size 1`] = `
"<div class=\\"var-button-group var--box var-button-group--mode-normal var-button-group--horizontal var-elevation--2\\"><button class=\\"var-button var--box var-button--large var--inline-flex var-button--primary var-elevation--0\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button><button class=\\"var-button var--box var-button--large var--inline-flex var-button--primary var-elevation--0\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button><button class=\\"var-button var--box var-button--large var--inline-flex var-button--primary var-elevation--0\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\"></div>
<div class=\\"var-button__overlay\\"></div>
</button></div>"
`;
17 changes: 17 additions & 0 deletions packages/varlet-ui/src/button/button.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,23 @@
transform: translate(-50%, -50%);
}

&__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
background-color: currentColor;
opacity: 0;
transition: opacity 0.25s;
will-change: opacity;
}

&--hovering {
opacity: 0.2;
}

&--default {
color: inherit;
background-color: var(--button-default-color);
Expand Down
2 changes: 2 additions & 0 deletions packages/varlet-ui/src/checkbox-group/__tests__/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,11 @@ exports[`test checkbox example 1`] = `
</div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2 button\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\">全选</div>
<div class=\\"var-button__overlay\\"></div>
</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2 button\\" type=\\"button\\">
<!--v-if-->
<div class=\\"var-button__content\\">反选</div>
<div class=\\"var-button__overlay\\"></div>
</button>
</div>
<transition-stub>
Expand Down
Loading

0 comments on commit fd69f23

Please sign in to comment.