From 50f2305d5ec37afd3a315dcf90254a96fd974928 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Thu, 4 May 2023 20:04:56 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20feat(input):=20TConfirm=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=20input=20=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/t-confirm.vue | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/t-confirm.vue b/src/components/t-confirm.vue
index db270d55..bebb0636 100644
--- a/src/components/t-confirm.vue
+++ b/src/components/t-confirm.vue
@@ -5,9 +5,12 @@
         <div class="confirm-title">
           {{ title }}
         </div>
-        <div v-show="subtitle!==''" class="confirm-subtitle">
+        <div v-show="subtitle!=='' && !isInput" class="confirm-subtitle">
           {{ subtitle }}
         </div>
+        <div v-show="isInput" class="confirm-input">
+          <v-text-field v-model="inputVal" :label="subtitle" hide-details="auto" @keyup.enter="onConfirm" />
+        </div>
         <div class="confirm-btn-box">
           <button class="confirm-btn" @click="onCancel">
             <img class="btn-icon" src="../assets/icons/circle-cancel.svg" alt="cancel">
@@ -34,15 +37,18 @@ import { computed } from "vue";
 interface TConfirmProps {
   title: string;
   subtitle?: string;
+  isInput?: boolean;
   cancel?: string;
   confirm?: string;
   /** 此值为 true 时显示对话框 */
   modelValue: boolean;
+  modelInput: string;
 }
 
 interface TConfirmEmits {
   (e: "update:show", v: boolean): void;
   (e: "update:modelValue", v: boolean): void;
+  (e: "update:modelInput", v: string): void;
   (e: "confirm"): void;
   (e: "cancel"): void;
 }
@@ -51,6 +57,7 @@ const emits = defineEmits<TConfirmEmits>();
 const props = withDefaults(defineProps<TConfirmProps>(), {
   title: "确认",
   subtitle: "",
+  isInput: false,
   cancel: "取消",
   confirm: "确定",
 });
@@ -60,6 +67,11 @@ const visible = computed({
   set: (v) => emits("update:modelValue", v),
 });
 
+const inputVal = computed({
+  get: () => props.modelInput,
+  set: (v) => emits("update:modelInput", v),
+});
+
 const onCancel = () => {
   visible.value = false;
   emits("cancel");
@@ -68,6 +80,9 @@ const onCancel = () => {
 const onConfirm = () => {
   visible.value = false;
   emits("confirm");
+  if (props.isInput) {
+    inputVal.value = "";
+  }
 };
 </script>
 
@@ -112,14 +127,22 @@ const onConfirm = () => {
   font-size: 20px;
 }
 
+.confirm-input {
+  font-family: Genshin-Light, serif;
+  text-align: center;
+  height: 20%;
+  width: 100%;
+  color: var(--content-text-2);
+  font-size: 20px;
+}
+
 .confirm-btn-box {
   position: absolute;
-  bottom: 0;
   height: 40%;
   width: 100%;
   display: flex;
   justify-content: space-around;
-  align-items: center;
+  align-items: flex-end;
 }
 
 .confirm-btn {