forked from FoundKeyGang/FoundKey
refactor: button.vue to composition api
Disabled require-default-prop for the to prop since it's only used when link is true. use null as default for props.to FoundKeyGang/FoundKey#79
This commit is contained in:
parent
6fde66df1a
commit
7621e5461f
GPG key ID:
9EE6577A2A06F8F1
1 changed files with 100 additions and 119 deletions
|
|
@ -1,18 +1,6 @@
|
|||
<template>
|
||||
<button
|
||||
v-if="!link" class="bghgjjyj _button"
|
||||
:class="{ inline, primary, gradate, danger, rounded, full }"
|
||||
:type="type"
|
||||
@click="$emit('click', $event)"
|
||||
@mousedown="onMousedown"
|
||||
>
|
||||
<div ref="ripples" class="ripples"></div>
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</button>
|
||||
<MkA
|
||||
v-else class="bghgjjyj _button"
|
||||
v-if="link && to" class="bghgjjyj _button"
|
||||
:class="{ inline, primary, gradate, danger, rounded, full }"
|
||||
:to="to"
|
||||
@mousedown="onMousedown"
|
||||
|
|
@ -22,82 +10,76 @@
|
|||
<slot></slot>
|
||||
</div>
|
||||
</MkA>
|
||||
<button
|
||||
v-else ref="button"
|
||||
class="bghgjjyj _button"
|
||||
:class="{ inline, primary, gradate, danger, rounded, full }"
|
||||
:type="type"
|
||||
@click="emit('click', $event)"
|
||||
@mousedown="onMousedown"
|
||||
>
|
||||
<div ref="ripples" class="ripples"></div>
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, nextTick } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
primary: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
gradate: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
rounded: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
link: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
to: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
autofocus: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
wait: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
danger: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
full: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['click'],
|
||||
mounted() {
|
||||
if (this.autofocus) {
|
||||
this.$nextTick(() => {
|
||||
this.$el.focus();
|
||||
const props = withDefaults(defineProps<{
|
||||
type?: 'button' | 'submit' | 'reset' | undefined;
|
||||
primary?: boolean;
|
||||
gradate?: boolean;
|
||||
rounded?: boolean;
|
||||
inline?: boolean;
|
||||
link?: boolean;
|
||||
to?: string | null;
|
||||
autofocus?: boolean;
|
||||
wait?: boolean;
|
||||
danger?: boolean;
|
||||
full?: boolean;
|
||||
}>(), {
|
||||
type: 'button',
|
||||
primary: false,
|
||||
gradate: false,
|
||||
rounded: false,
|
||||
inline: false,
|
||||
to: null,
|
||||
link: false,
|
||||
autofocus: false,
|
||||
wait: false,
|
||||
danger: false,
|
||||
full: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'click', mouseEvent: MouseEvent): void;
|
||||
}>();
|
||||
|
||||
let button: HTMLElement | null = $ref(null);
|
||||
let ripples: HTMLElement | null = $ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
if (props.autofocus) {
|
||||
nextTick(() => {
|
||||
button?.focus();
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onMousedown(evt: MouseEvent) {
|
||||
function distance(p, q) {
|
||||
});
|
||||
|
||||
type Point = {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
|
||||
function onMousedown(evt: MouseEvent): void {
|
||||
function distance(p: Point, q: Point): number {
|
||||
return Math.hypot(p.x - q.x, p.y - q.y);
|
||||
}
|
||||
|
||||
function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY) {
|
||||
function calcCircleScale(boxW: number, boxH: number, circleCenterX: number, circleCenterY: number): number {
|
||||
const origin = { x: circleCenterX, y: circleCenterY };
|
||||
const dist1 = distance({ x: 0, y: 0 }, origin);
|
||||
const dist2 = distance({ x: boxW, y: 0 }, origin);
|
||||
|
|
@ -106,18 +88,19 @@ export default defineComponent({
|
|||
return Math.max(dist1, dist2, dist3, dist4) * 2;
|
||||
}
|
||||
|
||||
const rect = evt.target.getBoundingClientRect();
|
||||
const targetEl = evt.target as HTMLElement;
|
||||
const rect = targetEl.getBoundingClientRect();
|
||||
|
||||
const ripple = document.createElement('div');
|
||||
ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
|
||||
ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
|
||||
|
||||
this.$refs.ripples.appendChild(ripple);
|
||||
ripples?.appendChild(ripple);
|
||||
|
||||
const circleCenterX = evt.clientX - rect.left;
|
||||
const circleCenterY = evt.clientY - rect.top;
|
||||
|
||||
const scale = calcCircleScale(evt.target.clientWidth, evt.target.clientHeight, circleCenterX, circleCenterY);
|
||||
const scale = calcCircleScale(targetEl.clientWidth, targetEl.clientHeight, circleCenterX, circleCenterY);
|
||||
|
||||
window.setTimeout(() => {
|
||||
ripple.style.transform = 'scale(' + (scale / 2) + ')';
|
||||
|
|
@ -127,11 +110,9 @@ export default defineComponent({
|
|||
ripple.style.opacity = '0';
|
||||
}, 1000);
|
||||
window.setTimeout(() => {
|
||||
if (this.$refs.ripples) this.$refs.ripples.removeChild(ripple);
|
||||
ripples?.removeChild(ripple);
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in a new issue