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(confirm): 添加副标题

Browse Source
This commit is contained in:
BTMuli
2023-04-25 22:30:33 +08:00
parent c442a1c5eb
commit 501f6bfa0e
1 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,9 @@
<div class="confirm-title"> <div class="confirm-title">
{{ title }} {{ title }}
</div> </div>
<div v-show="subtitle!==''" class="confirm-subtitle">
{{ subtitle }}
</div>
<div class="confirm-btn-box"> <div class="confirm-btn-box">
<button class="confirm-btn" @click="onCancel"> <button class="confirm-btn" @click="onCancel">
<img class="btn-icon" src="../assets/icons/circle-cancel.svg" alt="cancel"> <img class="btn-icon" src="../assets/icons/circle-cancel.svg" alt="cancel">
@@ -30,6 +33,7 @@ import { computed } from "vue";
interface TConfirmProps { interface TConfirmProps {
title: string; title: string;
subtitle?: string;
cancel?: string; cancel?: string;
confirm?: string; confirm?: string;
/** 此值为 true 时显示对话框 */ /** 此值为 true 时显示对话框 */
@@ -46,6 +50,7 @@ interface TConfirmEmits {
const emits = defineEmits<TConfirmEmits>(); const emits = defineEmits<TConfirmEmits>();
const props = withDefaults(defineProps<TConfirmProps>(), { const props = withDefaults(defineProps<TConfirmProps>(), {
title: "确认", title: "确认",
subtitle: "",
cancel: "取消", cancel: "取消",
confirm: "确定", confirm: "确定",
}); });
@@ -93,12 +98,24 @@ const onConfirm = () => {
height: 20%; height: 20%;
width: 100%; width: 100%;
color: var(--content-text-2); color: var(--content-text-2);
margin: 20px; margin: 10px;
font-size: 30px; font-size: 30px;
} }
.confirm-subtitle {
border-top: 1px solid var(--btn-bg-2);
font-family: Genshin-Light, serif;
text-align: center;
height: 20%;
width: 100%;
color: var(--content-text-2);
font-size: 20px;
}
.confirm-btn-box { .confirm-btn-box {
height: 60%; position: absolute;
bottom: 0;
height: 40%;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;