From 88015dfbe8523c22f829518c7aa9a4129afa268b Mon Sep 17 00:00:00 2001
From: mutoe <mutoe@foxmail.com>
Date: Fri, 14 Dec 2018 14:12:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(SPA):=20=E4=BF=AE=E5=A4=8D=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=E8=BE=93=E5=85=A5=E6=A1=86=E8=BE=93=E5=85=A5emoji?=
 =?UTF-8?q?=E5=AD=97=E7=AC=A6=E6=97=B6=E8=A2=AB=E7=AE=97=E4=BD=9C1?=
 =?UTF-8?q?=E4=B8=AA=E5=AD=97=E7=AC=A6=E7=9A=84=E9=97=AE=E9=A2=98=20(hack)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

issue #506
---
 .../src/components/common/TextareaInput.vue   | 51 ++++++++++---------
 .../spa/src/components/form/FormInputItem.vue |  2 +-
 resources/spa/src/page/UserInfo.vue           | 45 +++-------------
 resources/spa/src/page/post/PostImage.vue     | 21 ++++----
 resources/spa/src/page/post/PostNews.vue      | 22 +++-----
 resources/spa/src/page/post/PostText.vue      |  8 ++-
 .../spa/src/page/profile/Certificate.vue      | 28 ++++------
 7 files changed, 64 insertions(+), 113 deletions(-)

diff --git a/resources/spa/src/components/common/TextareaInput.vue b/resources/spa/src/components/common/TextareaInput.vue
index 7466c1bbc..8cdc7ff90 100644
--- a/resources/spa/src/components/common/TextareaInput.vue
+++ b/resources/spa/src/components/common/TextareaInput.vue
@@ -1,12 +1,6 @@
 <template>
-  <div
-    :class="{'auto-height': !rows}"
-    class="textarea-wrap"
-  >
-    <div
-      v-if="!rows"
-      class="textarea-shadow c-textarea-input"
-    >
+  <div :class="{'auto-height': !rows}" class="c-textarea-input">
+    <div v-if="!rows" class="textarea-shadow textarea">
       {{ value }}
     </div> <!-- 用于撑起文本框自适应高度 -->
     <textarea
@@ -16,13 +10,10 @@
       :maxlength="maxlength"
       :readonly="readonly"
       :rows="rows ? rows : 1"
-      class="c-textarea-input"
-      @input="$emit('input', $event.target.value)"
+      class="textarea"
+      @input="onInput"
     />
-    <span
-      v-show="maxlength && value.length > warnlength"
-      class="word-length"
-    >
+    <span v-show="maxlength && value.length > warnlength" class="word-length">
       {{ value.length }} / {{ maxlength }}
     </span>
   </div>
@@ -39,39 +30,48 @@ export default {
     placeholder: { type: String, default: '' },
     rows: { type: [Number, String], default: 0 },
   },
+  methods: {
+    onInput ($event) {
+      let content = $event.target.value
+      // 解决 emoji 字符被用于 maxlength 时被算作1个字符的问题（而'😫'.length => 2）
+      this.maxlength && (content = content.substr(0, Number(this.maxlength)))
+      this.$emit('input', content)
+    },
+  },
 }
 </script>
 
 <style lang="less" scoped>
-.textarea-wrap {
+.c-textarea-input {
   position: relative;
   width: 100%;
+  margin-bottom: 40px;
   height: calc(~"100% + 40px");
-  padding-right: 20px;
   align-self: flex-start;
 
-  .textarea-shadow {
-    opacity: 0;
+  .textarea {
+    width: 100%;
     min-height: 100px;
     word-wrap: break-word;
     word-break: break-all;
+    font-size: inherit;
+    text-align: inherit;
+    line-height: inherit;
+  }
+
+  .textarea-shadow {
+    opacity: 0;
   }
 
   textarea {
     position: absolute;
     top: 0;
     display: block;
-    font-size: 30px;
-    padding-bottom: 28px;
-    width: calc(~"100% - 20px");
     height: 100%;
     overflow: hidden;
     resize: none;
     outline: none;
-    min-height: 100px;
     background-color: transparent;
-    word-wrap: break-word;
-    word-break: break-all;
 
     &[readonly] {
       color: #999;
@@ -80,6 +80,9 @@ export default {
   }
 
   .word-length {
+    position: absolute;
+    bottom: -34px;
+    right: 10px;
     display: block;
     font-size: 22px;
     text-align: right;
diff --git a/resources/spa/src/components/form/FormInputItem.vue b/resources/spa/src/components/form/FormInputItem.vue
index 953d606e1..08e9191f8 100644
--- a/resources/spa/src/components/form/FormInputItem.vue
+++ b/resources/spa/src/components/form/FormInputItem.vue
@@ -97,10 +97,10 @@ export default {
 
 .c-form-textarea-item {
   height: auto !important;
+  padding: 28px 20px;
 
   > label {
     align-self: flex-start;
-    padding-top: 28px;
   }
 
   + .c-form-item {
diff --git a/resources/spa/src/page/UserInfo.vue b/resources/spa/src/page/UserInfo.vue
index 557c09698..5c55a78c5 100644
--- a/resources/spa/src/page/UserInfo.vue
+++ b/resources/spa/src/page/UserInfo.vue
@@ -7,7 +7,7 @@
         <a
           v-else
           :class="{ disabled }"
-          class="m-send-btn"
+          class="submit-btn"
           @click.prevent="handleOk"
         >
           完成
@@ -229,38 +229,7 @@ export default {
 
 <style lang="less" scoped>
 .p-user-info {
-  main {
-    background-color: #fff;
-  }
-
-  input[type="text"] {
-    height: 100%;
-    font-size: 28px;
-    line-height: normal;
-    vertical-align: middle;
-  }
-
-  textarea {
-    font-size: inherit;
-    font-family: inherit;
-    line-height: inherit;
-    background-color: transparent;
-    outline: 0;
-    border: 0;
-    resize: none;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    box-sizing: border-box;
-    -webkit-appearance: none !important;
-    -moz-appearance: none !important;
-  }
-
-  .m-avatar-box {
-    margin-right: 35px;
-  }
-
-  .m-send-btn {
+  .submit-btn {
     color: @primary;
 
     &.disabled {
@@ -268,6 +237,10 @@ export default {
     }
   }
 
+  main {
+    background-color: #fff;
+  }
+
   .m-entry-append {
     margin-right: 20px;
   }
@@ -302,9 +275,3 @@ export default {
   }
 }
 </style>
-
-<style lang="less">
-.c-textarea-input {
-  padding-top: 28px;
-}
-</style>
diff --git a/resources/spa/src/page/post/PostImage.vue b/resources/spa/src/page/post/PostImage.vue
index 34d6657a7..3f50277ed 100644
--- a/resources/spa/src/page/post/PostImage.vue
+++ b/resources/spa/src/page/post/PostImage.vue
@@ -25,14 +25,15 @@
     </CommonHeader>
 
     <main>
-      <TextareaInput
-        v-model="contentText"
-        :rows="11"
-        :maxlength="255"
-        :warnlength="200"
-        placeholder="输入要说的话，图文结合更精彩哦"
-        class="textarea-input"
-      />
+      <div class="content-wrap">
+        <TextareaInput
+          v-model="contentText"
+          :rows="11"
+          :maxlength="255"
+          :warnlength="200"
+          placeholder="输入要说的话，图文结合更精彩哦"
+        />
+      </div>
       <ImageList :edit="pinned" style="padding: 0 .3rem .3rem" />
     </main>
 
@@ -143,8 +144,8 @@ export default {
   background-color: #fff;
 
   main {
-    .textarea-input {
-      padding-left: 20px;
+    .content-wrap {
+      padding: 20px;
     }
   }
 
diff --git a/resources/spa/src/page/post/PostNews.vue b/resources/spa/src/page/post/PostNews.vue
index a30f19495..283dddb91 100644
--- a/resources/spa/src/page/post/PostNews.vue
+++ b/resources/spa/src/page/post/PostNews.vue
@@ -111,7 +111,6 @@
             <div class="m-box m-flex-grow1 m-flex-shrink1 m-aln-center m-justify-end">
               <TextareaInput
                 v-model="news.subject"
-                class="textarea-input"
                 maxlength="200"
                 warnlength="150"
                 placeholder="请输入摘要信息，最多200字"
@@ -510,11 +509,13 @@ export default {
   .m-post-news-row {
     font-size: 30px;
     padding: 40px 30px;
+
     .m-entry-append {
       margin-left: 10px;
     }
     &-label {
-      flex: 0 0 auto;
+      flex: none;
+      align-self: flex-start;
       width: 150px;
     }
     input {
@@ -523,6 +524,10 @@ export default {
       line-height: 30px;
       font-size: 28px;
     }
+
+    .c-textarea-input {
+      text-align: right;
+    }
   }
 
   .placeholder {
@@ -530,16 +535,3 @@ export default {
   }
 }
 </style>
-
-<style lang="less">
-.p-post-news {
-  .textarea-input {
-    padding-right: 0;
-
-    textarea {
-      text-align: right;
-      width: 100%;
-    }
-  }
-}
-</style>
diff --git a/resources/spa/src/page/post/PostText.vue b/resources/spa/src/page/post/PostText.vue
index 9f1702118..fac7e1033 100644
--- a/resources/spa/src/page/post/PostText.vue
+++ b/resources/spa/src/page/post/PostText.vue
@@ -24,13 +24,12 @@
     </CommonHeader>
 
     <main>
-      <div style="height: 100%;">
+      <div class="content-wrap">
         <TextareaInput
           v-model="contentText"
           :maxlength="255"
           :warnlength="200"
           :rows="11"
-          class="textarea-input"
         />
       </div>
     </main>
@@ -163,9 +162,8 @@ export default {
     flex: auto;
     padding-top: 90px;
 
-    .textarea-input {
-      padding-top: 20px;
-      padding-left: 20px;
+    .content-wrap {
+      padding: 20px;
     }
   }
 
diff --git a/resources/spa/src/page/profile/Certificate.vue b/resources/spa/src/page/profile/Certificate.vue
index dc54b831f..3a150ecef 100644
--- a/resources/spa/src/page/profile/Certificate.vue
+++ b/resources/spa/src/page/profile/Certificate.vue
@@ -386,8 +386,12 @@ export default {
         }
       }
 
-      .m-input input {
-        text-align: right;
+      .m-input {
+        padding: 0;
+
+        input {
+          text-align: right;
+        }
       }
 
       &.auto-height {
@@ -397,10 +401,10 @@ export default {
         padding-top: 0.4rem;
         padding-bottom: 0.4rem;
 
-        textarea {
-          width: 100%;
+        .c-textarea-input {
+          text-align: right;
+          font-size: 28px;
           line-height: 1.4;
-          font-size: 0.28rem;
         }
       }
     }
@@ -416,17 +420,3 @@ export default {
   }
 }
 </style>
-
-<style lang="less">
-.p-profile-certificate {
-  .textarea-wrap {
-    padding-right: 0;
-
-    .c-textarea-input {
-      text-align: right;
-      width: 100%;
-      font-size: 28px;
-    }
-  }
-}
-</style>