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

feat(confirm): 写了个确认组件，就不用 dialog.confirm 了

Browse Source
This commit is contained in:
BTMuli
2023-04-04 17:16:31 +08:00
parent acee353818
commit e8ac396ae1
2 changed files with 132 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/icons/circle-cancel.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg width="250.000000" height="250.000000" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>
Created with Pixso.
</desc>
<circle id="椭圆 3" cx="125.000000" cy="125.000000" r="125.000000" fill="#313131"/>
<path id="icon" d="M117.258 125L66.6035 175.654C64.4655 177.792 64.4655 181.259 66.6035 183.397C68.7415 185.535 72.2079 185.535 74.3458 183.397L125 132.742L175.654 183.397C177.792 185.535 181.259 185.535 183.397 183.397C185.535 181.259 185.535 177.792 183.397 175.654L132.742 125L183.397 74.3458C185.535 72.2079 185.535 68.7415 183.397 66.6035C181.259 64.4655 177.792 64.4655 175.654 66.6035L125 117.258L74.3458 66.6035C72.2079 64.4655 68.7415 64.4655 66.6035 66.6035C64.4655 68.7415 64.4655 72.2079 66.6035 74.3458L117.258 125Z" fill-rule="evenodd" fill="#38A2E4"/>
<defs/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 868 B

124
src/components/t-confirm.vue Normal file
View File

@@ -0,0 +1,124 @@
<template>
<v-overlay v-model="propsConfirm.show">
<div class="confirm-div" v-if="propsConfirm.show">
<div class="confirm-box">
<div class="confirm-title">{{ propsConfirm.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>
</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>
</button>
</div>
</div>
</div>
</v-overlay>
</template>
<script lang="ts" setup>
// vue
import { defineProps, defineEmits } 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,
},
});
// emits
const emitConfirm = defineEmits(["update:value", "update:show"]);
// methods
async function setCancel() {
await emitConfirm("update:show", false);
await emitConfirm("update:value", false);
}
async function setConfirm() {
await emitConfirm("update:show", false);
await emitConfirm("update:value", true);
}
</script>
<style lang="css" scoped>
.confirm-div {
width: 40vw;
height: 20vh;
margin-top: 40vh;
margin-left: 30vw;
background: #ffffff;
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.confirm-box {
border-radius: 10px;
width: 100%;
height: 100%;
}
.confirm-title {
font-family: Genshin, serif;
text-align: center;
height: 20%;
width: 100%;
color: #393b40;
margin: 20px;
font-size: 30px;
}
.confirm-btn-box {
height: 60%;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.confirm-btn {
width: 30%;
min-width: 150px;
min-height: 30px;
background: #4a5366;
color: #faf7e8;
border-radius: 50px;
display: flex;
align-items: center;
}
.btn-icon {
margin: 5px;
width: 25px;
height: 25px;
}
.btn-text {
width: calc(100% - 70px);
text-align: center;
font-family: Genshin-Light, serif;
font-size: 20px;
}
</style>