多行

src/pages/nft/add.vue

@@ -47,7 +47,7 @@
                 <div class="input"><input type="text" maxlength="30" v-model="projectName" placeholder="Your NFT Project Name" /></div>
 
                 <div class="name">Project Description</div>
-                <div class="input"><input type="text" maxlength="100" v-model="projectDesc" placeholder="Your NFT Project Description" /></div>
+                <div class="textarea"><textarea placeholder="Your NFT Project Description" maxlength="100" v-model="projectDesc"></textarea></div>
 
                 <div class="name">Collection Size</div>
                 <div class="input"><input type="text" v-model="projectSize" placeholder="0" /></div>
@@ -275,9 +275,15 @@ const feedback = () => {
     })
 }
 
+let timer = ref(0);
+
 watchEffect(() => {
-    projectName.value = String(projectName.value).trim()
-    projectDesc.value = String(projectDesc.value).trim()
+    projectName.value = projectName.value.trim()
+    // setTimeout
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => {
+        projectDesc.value = projectDesc.value.trim()
+    }, 400)
 
     // 数量
     let num = projectSize.value;
@@ -551,6 +557,29 @@ onMounted(() => {
                     }
                 }
             }
+            .textarea {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 88px;
+                margin-bottom: 22px;
+                border-radius: 5px;
+                background: #FFFFFF;
+                border: 1px solid #E0E0E0;
+                textarea {
+                    border: 0;
+                    height: 70px;
+                    outline: none;
+                    color: #777;
+                    font-size: 16px;
+                    font-weight: 500;
+                    letter-spacing: 0.3px;
+                    width: calc(100% - 24px);
+                    &::placeholder {
+                        color: rgba(0, 0, 0, .3);
+                    }
+                }
+            }
             .price {
                 position: relative;
                 display: flex;