Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-12 09:18:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(props): 更优雅的代码

Browse Source
This commit is contained in:
BTMuli
2023-04-04 19:20:59 +08:00
parent cd819e0c59
commit 9b97fc84c2
3 changed files with 65 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/t-confirm.vue
View File

@@ -1,16 +1,16 @@
<template>
<v-overlay v-model="propsConfirm.show">
<div class="confirm-div" v-if="propsConfirm.show">
<v-overlay v-model="showVal">
<div class="confirm-div">
<div class="confirm-box">
<div class="confirm-title">{{ propsConfirm.title }}</div>
<div class="confirm-title">{{ title }}</div>
<div class="confirm-btn-box">
<button class="confirm-btn" @click="setCancel">
<img class="btn-icon" src="../assets/icons/circle-cancel.svg" alt="cancel" />
<span class="btn-text">{{ propsConfirm.cancel }}</span>
<span class="btn-text">{{ cancel }}</span>
</button>
<button class="confirm-btn" @click="setConfirm">
<img class="btn-icon" src="../assets/icons/circle-check.svg" alt="confirm" />
<span class="btn-text">{{ propsConfirm.confirm }}</span>
<span class="btn-text">{{ confirm }}</span>
</button>
</div>
</div>
@@ -19,53 +19,55 @@
</template>
<script lang="ts" setup>
// vue
import { defineProps, defineEmits } from "vue";
import { defineEmits, ref } from "vue";
// props
const propsConfirm = defineProps({
show: {
type: Boolean,
required: true,
default: false,
},
title: {
type: String,
required: true,
},
cancel: {
type: String,
default: "取消",
},
confirm: {
type: String,
default: "确定",
},
value: {
type: Boolean,
required: true,
},
});
withDefaults(
defineProps<{
title: string;
cancel?: string;
confirm?: string;
value: boolean;
}>(),
{
title: "确认",
cancel: "取消",
confirm: "确定",
value: false,
}
);
const showVal = ref(false);
// emits
const emitConfirm = defineEmits(["update:value", "update:show"]);
const emitConfirm = defineEmits(["update:value"]);
// expose
defineExpose({
showConfirm,
});
// methods
async function setCancel() {
await emitConfirm("update:show", false);
await emitConfirm("update:value", false);
function showConfirm() {
showVal.value = true;
}
async function setConfirm() {
await emitConfirm("update:show", false);
await emitConfirm("update:value", true);
function setCancel() {
emitConfirm("update:value", false);
showVal.value = false;
}
function setConfirm() {
emitConfirm("update:value", true);
showVal.value = false;
}
</script>
<style lang="css" scoped>
.confirm-div {
position: absolute;
width: 40vw;
height: 20vh;
margin-top: 40vh;
margin-left: 30vw;
top: 40vh;
left: 30vw;
background: #ffffff;
border-radius: 10px;
padding: 10px;

44
src/components/t-loading.vue
View File

@@ -2,41 +2,35 @@
<div class="loading-div">
<div class="loading-content">
<div class="loading-title">
{{ propsLoading.title }}
<v-progress-circular indeterminate color="#f4d8a8" v-show="!propsLoading.empty" />
{{ title }}
<v-progress-circular indeterminate color="#f4d8a8" v-show="!empty" />
</div>
<div class="loading-subtitle" v-show="propsLoading.subtitle">{{ propsLoading.subtitle }}</div>
<div class="loading-img" v-if="!propsLoading.empty">
<div class="loading-subtitle" v-show="subtitle">{{ subtitle }}</div>
<div class="loading-img" v-if="!empty">
<img src="/source/UI/loading.webp" alt="loading" />
</div>
<div class="loading-img" v-else>
<img src="/source/UI/empty.webp" alt="empty" />
</div>
<div class="loading-text" v-show="propsLoading.content">{{ propsLoading.content }}</div>
<div class="loading-text" v-show="content">{{ content }}</div>
</div>
</div>
</template>
<script lang="ts" setup>
const propsLoading = defineProps({
title: {
type: String,
default: "加载中",
},
subtitle: {
type: String,
},
content: {
type: String,
},
empty: {
type: Boolean,
default: false,
},
position: {
type: String,
default: "absolute",
},
});
withDefaults(
defineProps<{
title?: string;
subtitle?: string;
content?: string;
empty?: boolean;
position?: string;
}>(),
{
title: "加载中",
empty: false,
position: "absolute",
}
);
</script>
<style lang="css" scoped>
.loading-div {