mirror of
https://example.com
synced 2024-11-24 06:56:41 +09:00
refactor(client): use setup syntax
This commit is contained in:
syuilo
parent
9db2380c20
commit
eff9cdd8a7
4 changed files with 89 additions and 163 deletions
|
|
@ -3,7 +3,7 @@
|
|||
v-if="!link" class="bghgjjyj _button"
|
||||
:class="{ inline, primary, gradate, danger, rounded, full }"
|
||||
:type="type"
|
||||
@click="$emit('click', $event)"
|
||||
@click="emit('click', $event)"
|
||||
@mousedown="onMousedown"
|
||||
>
|
||||
<div ref="ripples" class="ripples"></div>
|
||||
|
|
@ -24,114 +24,77 @@
|
|||
</MkA>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted } 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: true,
|
||||
},
|
||||
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();
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onMousedown(evt: MouseEvent) {
|
||||
function distance(p, q) {
|
||||
return Math.hypot(p.x - q.x, p.y - q.y);
|
||||
}
|
||||
const props = defineProps<{
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
primary?: boolean;
|
||||
gradate?: boolean;
|
||||
rounded?: boolean;
|
||||
inline?: boolean;
|
||||
link?: boolean;
|
||||
to?: string;
|
||||
autofocus?: boolean;
|
||||
wait?: boolean;
|
||||
danger?: boolean;
|
||||
full?: boolean;
|
||||
}>();
|
||||
|
||||
function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY) {
|
||||
const origin = { x: circleCenterX, y: circleCenterY };
|
||||
const dist1 = distance({ x: 0, y: 0 }, origin);
|
||||
const dist2 = distance({ x: boxW, y: 0 }, origin);
|
||||
const dist3 = distance({ x: 0, y: boxH }, origin);
|
||||
const dist4 = distance({ x: boxW, y: boxH }, origin);
|
||||
return Math.max(dist1, dist2, dist3, dist4) * 2;
|
||||
}
|
||||
const emit = defineEmits<{
|
||||
(ev: 'click', payload: MouseEvent): void;
|
||||
}>();
|
||||
|
||||
const rect = evt.target.getBoundingClientRect();
|
||||
let el = $ref<HTMLElement | null>(null);
|
||||
let ripples = $ref<HTMLElement | null>(null);
|
||||
|
||||
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);
|
||||
|
||||
const circleCenterX = evt.clientX - rect.left;
|
||||
const circleCenterY = evt.clientY - rect.top;
|
||||
|
||||
const scale = calcCircleScale(evt.target.clientWidth, evt.target.clientHeight, circleCenterX, circleCenterY);
|
||||
|
||||
window.setTimeout(() => {
|
||||
ripple.style.transform = 'scale(' + (scale / 2) + ')';
|
||||
}, 1);
|
||||
window.setTimeout(() => {
|
||||
ripple.style.transition = 'all 1s ease';
|
||||
ripple.style.opacity = '0';
|
||||
}, 1000);
|
||||
window.setTimeout(() => {
|
||||
if (this.$refs.ripples) this.$refs.ripples.removeChild(ripple);
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
onMounted(() => {
|
||||
if (props.autofocus) {
|
||||
nextTick(() => {
|
||||
el!.focus();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function distance(p, q): number {
|
||||
return Math.hypot(p.x - q.x, p.y - q.y);
|
||||
}
|
||||
|
||||
function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY): number {
|
||||
const origin = { x: circleCenterX, y: circleCenterY };
|
||||
const dist1 = distance({ x: 0, y: 0 }, origin);
|
||||
const dist2 = distance({ x: boxW, y: 0 }, origin);
|
||||
const dist3 = distance({ x: 0, y: boxH }, origin);
|
||||
const dist4 = distance({ x: boxW, y: boxH }, origin);
|
||||
return Math.max(dist1, dist2, dist3, dist4) * 2;
|
||||
}
|
||||
|
||||
function onMousedown(evt: MouseEvent): void {
|
||||
const target = evt.target! as HTMLElement;
|
||||
const rect = target.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';
|
||||
|
||||
ripples!.appendChild(ripple);
|
||||
|
||||
const circleCenterX = evt.clientX - rect.left;
|
||||
const circleCenterY = evt.clientY - rect.top;
|
||||
|
||||
const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
|
||||
|
||||
window.setTimeout(() => {
|
||||
ripple.style.transform = 'scale(' + (scale / 2) + ')';
|
||||
}, 1);
|
||||
window.setTimeout(() => {
|
||||
ripple.style.transition = 'all 1s ease';
|
||||
ripple.style.opacity = '0';
|
||||
}, 1000);
|
||||
window.setTimeout(() => {
|
||||
if (ripples) ripples.removeChild(ripple);
|
||||
}, 2000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -21,50 +21,37 @@
|
|||
</form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import MkButton from '@/components/ui/button.vue';
|
||||
import MkInput from '@/components/form/input.vue';
|
||||
import { host } from '@/config';
|
||||
import * as os from '@/os';
|
||||
import { login } from '@/account';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
MkInput,
|
||||
},
|
||||
let username = $ref('');
|
||||
let password = $ref('');
|
||||
let submitting = $ref(false);
|
||||
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
submitting: false,
|
||||
host,
|
||||
};
|
||||
},
|
||||
function submit() {
|
||||
if (submitting) return;
|
||||
submitting = true;
|
||||
|
||||
methods: {
|
||||
submit() {
|
||||
if (this.submitting) return;
|
||||
this.submitting = true;
|
||||
os.api('admin/accounts/create', {
|
||||
username: username,
|
||||
password: password,
|
||||
}).then(res => {
|
||||
return login(res.token);
|
||||
}).catch(() => {
|
||||
submitting = false;
|
||||
|
||||
os.api('admin/accounts/create', {
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
}).then(res => {
|
||||
return login(res.token);
|
||||
}).catch(() => {
|
||||
this.submitting = false;
|
||||
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: this.$ts.somethingHappened
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: i18n.ts.somethingHappened,
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -31,14 +31,4 @@ defineProps<{
|
|||
const emit = defineEmits<{
|
||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
||||
}>();
|
||||
|
||||
/*
|
||||
export default defineComponent({
|
||||
methods: {
|
||||
focus() {
|
||||
this.$children[0].focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
*/
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -52,20 +52,6 @@ const menu = [{
|
|||
text: i18n.ts.selectList,
|
||||
action: setList,
|
||||
}];
|
||||
|
||||
/*
|
||||
function focus() {
|
||||
timeline.focus();
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
watch: {
|
||||
mediaOnly() {
|
||||
(this.$refs.timeline as any).reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
*/
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in a new issue