feat: paste image

JX3BOX · Dec 26, 2024 · d34b0a0 · d34b0a0
1 parent ed6e604
commit d34b0a0
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-comment-ui",
-    "version": "1.9.9",
+    "version": "2.0.0",
     "scripts": {
         "dev": "env DEV_SERVER=true vue-cli-service serve",
         "serve": "vue-cli-service serve",

diff --git a/src/components/comment-input-form.vue b/src/components/comment-input-form.vue
@@ -1,22 +1,60 @@
 <template>
     <el-form ref="form" :model="newComment" class="c-comment-box">
         <el-form-item>
-            <el-input rows="3" type="textarea" :maxlength="maxLength" show-word-limit v-model="newComment.content"
-                placeholder="参与讨论..." :id="inputId"></el-input>
+            <el-input
+                rows="3"
+                type="textarea"
+                :maxlength="maxLength"
+                show-word-limit
+                v-model="newComment.content"
+                placeholder="参与讨论..."
+                :id="inputId"
+                @paste.native="handlePaste"
+            ></el-input>
             <div class="c-comment-tools">
-                <i class="el-icon-picture-outline u-upload-icon" @click="showUploader = !showUploader"></i>
-                <Emotion class="c-comment-emotion" @selected="handleEmotionSelected" type="pop" :max="6"></Emotion>
+                <i
+                    class="el-icon-picture-outline u-upload-icon"
+                    @click="showUploader = !showUploader"
+                ></i>
+                <Emotion
+                    class="c-comment-emotion"
+                    @selected="handleEmotionSelected"
+                    type="pop"
+                    :max="6"
+                ></Emotion>
                 <quickReply @reply="onQuickReply"></quickReply>
                 <div class="c-comment-secret">
-                    <el-checkbox class="u-secret" v-model="is_secret" border size="mini">悄悄话
-                        <el-tooltip class="item" effect="dark" content="勾选悄悄话后仅作者和你可见，并且不可再变更状态" placement="top">
-                            <i class="el-icon-info"></i> </el-tooltip></el-checkbox>
+                    <el-checkbox
+                        class="u-secret"
+                        v-model="is_secret"
+                        border
+                        size="mini"
+                        >悄悄话
+                        <el-tooltip
+                            class="item"
+                            effect="dark"
+                            content="勾选悄悄话后仅作者和你可见，并且不可再变更状态"
+                            placement="top"
+                        >
+                            <i class="el-icon-info"></i> </el-tooltip
+                    ></el-checkbox>
                 </div>
             </div>
-            <Uploader class="u-uploader" ref="uploader" @onFinish="attachmentUploadFinish" @onError="attachmentUplodError"
-                v-if="showUploader" />
+            <Uploader
+                class="u-uploader"
+                ref="uploader"
+                @onFinish="attachmentUploadFinish"
+                @onError="attachmentUplodError"
+                v-show="showUploader"
+            />
             <div class="u-toolbar">
-                <el-button type="primary" @click="onSubmit" class="u-publish" :disabled="disableSubmitBtn">发表评论</el-button>
+                <el-button
+                    type="primary"
+                    @click="onSubmit"
+                    class="u-publish"
+                    :disabled="disableSubmitBtn"
+                    >发表评论</el-button
+                >
             </div>
         </el-form-item>
     </el-form>
@@ -120,6 +158,26 @@ export default {
                 this.newComment.content = value;
             }
         },
+        handlePaste(event) {
+            const clipboardItems = event.clipboardData.items;
+            for (let i = 0; i < clipboardItems.length; i++) {
+                const item = clipboardItems[i];
+                if (item.type.indexOf("image") !== -1) {
+                    // 阻止默认粘贴图片的名字
+                    event.preventDefault();
+                    const blob = item.getAsFile();
+                    const file = new File(
+                        [blob],
+                        new Date().getTime() + "-" + blob.name,
+                        { type: blob.type }
+                    );
+                    this.$refs.uploader.addFile(file);
+                    if (!this.showUploader) {
+                        this.showUploader = true;
+                    }
+                }
+            }
+        },
     },
 };
 </script>
@@ -131,8 +189,8 @@ export default {
     .u-secret {
         display: flex;
         align-items: center;
-        .el-checkbox__inner{
-            display:block;
+        .el-checkbox__inner {
+            display: block;
         }
     }
 }

diff --git a/src/components/upload.vue b/src/components/upload.vue
@@ -87,10 +87,14 @@ export default {
         },
         onSuccess(response) {
             this.successList = this.successList.concat(response.data);
-            if (this.successList.length == this.fileList.length) {
-                this.$emit("onFinish", this.successList || []);
-                this.fileList = [];
-                this.successList = [];
+            if (response.code === 0) {
+                if (this.successList.length == this.fileList.length) {
+                    this.$emit("onFinish", this.successList || []);
+                    this.fileList = [];
+                    this.successList = [];
+                }
+            } else {
+                this.onError(response.msg);
             }
         },
         onError() {
@@ -104,6 +108,10 @@ export default {
             this.$emit("onError");
             this.fileList = [];
         },
+        addFile(file) {
+            this.$refs.upload.handleStart(file);
+            return false;
+        },
     },
 };
 </script>