修改样式

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/file/file.vue

@@ -1,13 +1,13 @@
 <template>
   <span class="upload-btn icon icon-files">
-      <input title="文件" v-if="!isMute" type="file" data-type="file" accept="*" @change="sendUploadMessage" />
-      <slot />
+    <input title="文件" v-if="!isMute" type="file" data-type="file" accept="*" @change="sendUploadMessage" />
+    <slot />
   </span>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, watchEffect } from 'vue';
-import { handleErrorPrompts } from '../../../utils';
+import { defineComponent, reactive, toRefs, watchEffect } from "vue";
+import { handleErrorPrompts } from "../../../utils";
 
 const File = defineComponent({
   props: {
@@ -24,7 +24,7 @@ const File = defineComponent({
       default: () => false,
     },
   },
-  setup(props:any, ctx:any) {
+  setup(props: any, ctx: any) {
     const data = reactive({
       isMute: false,
     });
@@ -34,7 +34,7 @@ const File = defineComponent({
     });
 
     // 发送需要上传的消息：文件
-    const sendUploadMessage = async (e:any) => {
+    const sendUploadMessage = async (e: any) => {
       if (e.target.files.length > 0) {
         try {
           await File.TUIServer.sendFileMessage(e.target);
@@ -42,7 +42,7 @@ const File = defineComponent({
           handleErrorPrompts(error, props);
         }
       }
-      e.target.value = '';
+      e.target.value = "";
     };
 
     return {
@@ -55,13 +55,14 @@ export default File;
 </script>
 
 <style lang="scss" scoped>
-@import url('../../../../styles/common.scss');
-@import url('../../../../styles/icon.scss');
+@import url("../../../../styles/common.scss");
+@import url("../../../../styles/icon.scss");
 .upload-btn {
   position: relative;
   input {
     position: absolute;
     cursor: pointer;
+    font-size: 0;
     left: 0;
     top: 0;
     opacity: 0;

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/image/image.vue

@@ -1,13 +1,13 @@
 <template>
   <span class="upload-btn icon icon-image">
-      <input title="图片" v-if="!isMute" type="file" data-type="image" accept="image/*" @change="sendUploadMessage" />
-      <slot />
+    <input title="图片" v-if="!isMute" type="file" data-type="image" accept="image/*" @change="sendUploadMessage" />
+    <slot />
   </span>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, watchEffect } from 'vue';
-import { handleErrorPrompts } from '../../../utils';
+import { defineComponent, reactive, toRefs, watchEffect } from "vue";
+import { handleErrorPrompts } from "../../../utils";
 
 const Image = defineComponent({
   props: {
@@ -24,7 +24,7 @@ const Image = defineComponent({
       default: () => false,
     },
   },
-  setup(props:any, ctx:any) {
+  setup(props: any, ctx: any) {
     const data = reactive({
       isMute: false,
     });
@@ -33,7 +33,7 @@ const Image = defineComponent({
       data.isMute = props.isMute;
     });
     // 发送需要上传的消息：图片
-    const sendUploadMessage = async (e:any) => {
+    const sendUploadMessage = async (e: any) => {
       if (e.target.files.length > 0) {
         try {
           await Image.TUIServer.sendImageMessage(e.target);
@@ -41,7 +41,7 @@ const Image = defineComponent({
           handleErrorPrompts(error, props);
         }
       }
-      e.target.value = '';
+      e.target.value = "";
     };
 
     return {
@@ -54,13 +54,14 @@ export default Image;
 </script>
 
 <style lang="scss" scoped>
-@import url('../../../../styles/common.scss');
-@import url('../../../../styles/icon.scss');
+@import url("../../../../styles/common.scss");
+@import url("../../../../styles/icon.scss");
 .upload-btn {
   position: relative;
   input {
     position: absolute;
     cursor: pointer;
+    font-size: 0;
     left: 0;
     top: 0;
     opacity: 0;

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/video/video.vue

@@ -1,14 +1,13 @@
 <template>
   <span class="upload-btn icon icon-video">
-      <input title="视频" v-if="!isMute" type="file" data-type="video" accept="video/*" @change="sendUploadMessage" />
-      <slot />
+    <input title="视频" v-if="!isMute" type="file" data-type="video" accept="video/*" @change="sendUploadMessage" />
+    <slot />
   </span>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, watchEffect } from 'vue';
-import { handleErrorPrompts } from '../../../utils';
-
+import { defineComponent, reactive, toRefs, watchEffect } from "vue";
+import { handleErrorPrompts } from "../../../utils";
 
 const Video = defineComponent({
   props: {
@@ -25,7 +24,7 @@ const Video = defineComponent({
       default: () => false,
     },
   },
-  setup(props:any, ctx:any) {
+  setup(props: any, ctx: any) {
     const data = reactive({
       isMute: false,
     });
@@ -34,7 +33,7 @@ const Video = defineComponent({
       data.isMute = props.isMute;
     });
     // 发送需要上传的消息：视频
-    const sendUploadMessage = async (e:any) => {
+    const sendUploadMessage = async (e: any) => {
       if (e.target.files.length > 0) {
         try {
           await Video.TUIServer.sendVideoMessage(e.target);
@@ -42,7 +41,7 @@ const Video = defineComponent({
           handleErrorPrompts(error, props);
         }
       }
-      e.target.value = '';
+      e.target.value = "";
     };
 
     return {
@@ -55,13 +54,14 @@ export default Video;
 </script>
 
 <style lang="scss" scoped>
-@import url('../../../../styles/common.scss');
-@import url('../../../../styles/icon.scss');
+@import url("../../../../styles/common.scss");
+@import url("../../../../styles/icon.scss");
 .upload-btn {
   position: relative;
   input {
     position: absolute;
     cursor: pointer;
+    font-size: 0;
     left: 0;
     top: 0;
     opacity: 0;