xs-common-plugins 1.2.1 → 1.2.4

package/src/plugins/im/components/send-msg/index.scss

@@ -1,164 +1,164 @@
-   .input-field {
-     width: 100%;
-     position: absolute;
-     bottom: 0;
-     left: 0;
-     background-color: skyblue;
-
-     .rong-editor {
-       position: absolute;
-       bottom: 0;
-       width: 100%;
-       border-top: 1px solid #CCC;
-       background-color: #FFF;
-     }
-
-     input {
-       outline-color: invert;
-       outline-style: none;
-       outline-width: 0px;
-       border: none;
-       border-style: none;
-       text-shadow: none;
-       -webkit-appearance: none;
-       -webkit-user-select: text;
-       outline-color: transparent;
-       box-shadow: none;
-
-     }
-
-     .input-wapper {
-       height: 65px;
-       box-sizing: border-box;
-       padding-top: 5px;
-
-       .rong-editor-input {
-         box-sizing: border-box;
-         display: inline-block;
-         position: absolute;
-         background-color: #F3F3F3;
-         margin: 0 10px 0 20px;
-         width: 71%;
-         height: 50px;
-         border: none;
-         box-shadow: 0px 0px 0px 0px; //去除阴影
-       }
-
-       .rong-icon {
-         width: 35px;
-         height: 35px;
-         float: right;
-         margin-right: 8px;
-         position: relative;
-         top: 7px;
-
-         img {
-           width: 100%;
-           height: 100%;
-         }
-       }
-
-     }
-
-     .input-open {
-       height: 185px;
-       background-color: #F3F3F3;
-
-       .rong-emojis-swiper {
-         height: 185px !important;
-         width: 92% !important;
-         margin: 0 auto !important;
-       }
-
-       .rong-editor-emoji {
-         width: 40px;
-         position: relative;
-         height: 43px;
-         top: 10px;
-         left: 18px;
-         display: inline-block;
-         text-align: center;
-         margin: 7px;
-         font-size: 30px;
-         cursor: pointer;
-
-         span {
-           position: relative;
-           left: -40px;
-           top: 4px;
-         }
-       }
-     }
-
-     .rong-editor-modules {
-       height: 60px;
-       width: 60px;
-       border: 1px solid #d2d2d4;
-       border-radius: 15px;
-       background-color: #fff;
-       padding: 10px 14px 10px 9px;
-       box-sizing: border-box;
-       margin: 20px 32px;
-       float: left;
-       position: relative;
-       cursor: pointer;
-     }
-
-     .rong-editor-modules-solt {
-       float: left;
-       position: relative;
-       margin: 20px 32px;
-     }
-
-     .rong-editor-module {
-       position: absolute;
-       top: 50%;
-       left: 50%;
-       transform: translate(-50%, -50%);
-       height: 35px;
-       width: 35px;
-       background-repeat: no-repeat;
-       background-size: cover;
-       background-position: center;
-
-     }
-
-     .rong-editor-module-image {
-       background-image: url('http://7xogjk.com1.z0.glb.clouddn.com/rc-mini-image.png');
-
-       .rong-editor-module-image-input {
-         width: 60px;
-         height: 60px;
-         opacity: 0;
-       }
-     }
-
-     .rong-editor-btn {
-       margin-right: 20px;
-       margin-top: 4px;
-     }
-
-
-     .rong-editor-btn-emojisent {
-       float: right;
-       font-size: 12px;
-       background: #1BA3FC;
-       border-radius: 6px;
-       color: #FFF;
-       margin-right: 13px;
-       padding: 8px 5px;
-       margin-top: 10px;
-       box-sizing: border-box;
-       cursor: pointer;
-     }
-
-
-
-     .rong-editor-module-file {
-       background-image: url('http://gz.bcebos.com/v1/rongcloud-image/1__RC-2020-6-8_801_1591602970942118ba250-962e-466a-ae75-016c23462b45.png');
-     }
-
-     .el-carousel__indicators--horizontal {
-       display: none;
-     }
-   }
+   .input-field {
+     width: 100%;
+     position: absolute;
+     bottom: 0;
+     left: 0;
+     background-color: skyblue;
+
+     .rong-editor {
+       position: absolute;
+       bottom: 0;
+       width: 100%;
+       border-top: 1px solid #CCC;
+       background-color: #FFF;
+     }
+
+     input {
+       outline-color: invert;
+       outline-style: none;
+       outline-width: 0px;
+       border: none;
+       border-style: none;
+       text-shadow: none;
+       -webkit-appearance: none;
+       -webkit-user-select: text;
+       outline-color: transparent;
+       box-shadow: none;
+
+     }
+
+     .input-wapper {
+       height: 65px;
+       box-sizing: border-box;
+       padding-top: 5px;
+
+       .rong-editor-input {
+         box-sizing: border-box;
+         display: inline-block;
+         position: absolute;
+         background-color: #F3F3F3;
+         margin: 0 10px 0 20px;
+         width: 71%;
+         height: 50px;
+         border: none;
+         box-shadow: 0px 0px 0px 0px; //去除阴影
+       }
+
+       .rong-icon {
+         width: 35px;
+         height: 35px;
+         float: right;
+         margin-right: 8px;
+         position: relative;
+         top: 7px;
+
+         img {
+           width: 100%;
+           height: 100%;
+         }
+       }
+
+     }
+
+     .input-open {
+       height: 185px;
+       background-color: #F3F3F3;
+
+       .rong-emojis-swiper {
+         height: 185px !important;
+         width: 92% !important;
+         margin: 0 auto !important;
+       }
+
+       .rong-editor-emoji {
+         width: 40px;
+         position: relative;
+         height: 43px;
+         top: 10px;
+         left: 18px;
+         display: inline-block;
+         text-align: center;
+         margin: 7px;
+         font-size: 30px;
+         cursor: pointer;
+
+         span {
+           position: relative;
+           left: -40px;
+           top: 4px;
+         }
+       }
+     }
+
+     .rong-editor-modules {
+       height: 60px;
+       width: 60px;
+       border: 1px solid #d2d2d4;
+       border-radius: 15px;
+       background-color: #fff;
+       padding: 10px 14px 10px 9px;
+       box-sizing: border-box;
+       margin: 20px 32px;
+       float: left;
+       position: relative;
+       cursor: pointer;
+     }
+
+     .rong-editor-modules-solt {
+       float: left;
+       position: relative;
+       margin: 20px 32px;
+     }
+
+     .rong-editor-module {
+       position: absolute;
+       top: 50%;
+       left: 50%;
+       transform: translate(-50%, -50%);
+       height: 35px;
+       width: 35px;
+       background-repeat: no-repeat;
+       background-size: cover;
+       background-position: center;
+
+     }
+
+     .rong-editor-module-image {
+       background-image: url('http://7xogjk.com1.z0.glb.clouddn.com/rc-mini-image.png');
+
+       .rong-editor-module-image-input {
+         width: 60px;
+         height: 60px;
+         opacity: 0;
+       }
+     }
+
+     .rong-editor-btn {
+       margin-right: 20px;
+       margin-top: 4px;
+     }
+
+
+     .rong-editor-btn-emojisent {
+       float: right;
+       font-size: 12px;
+       background: #1BA3FC;
+       border-radius: 6px;
+       color: #FFF;
+       margin-right: 13px;
+       padding: 8px 5px;
+       margin-top: 10px;
+       box-sizing: border-box;
+       cursor: pointer;
+     }
+
+
+
+     .rong-editor-module-file {
+       background-image: url('http://gz.bcebos.com/v1/rongcloud-image/1__RC-2020-6-8_801_1591602970942118ba250-962e-466a-ae75-016c23462b45.png');
+     }
+
+     .el-carousel__indicators--horizontal {
+       display: none;
+     }
+   }

package/src/plugins/im/components/send-msg/index.vue

@@ -1,108 +1,108 @@
-<template>
-  <div class="input-field">
-    <div class="rong-editor">
-      <div class="input-wapper">
-        <input
-          class="rong-editor-input"
-          v-model="inputVal"
-          @keyup.enter="sendText"
-        />
-        <div class="rong-icon rong-editor-btn-more" v-if="!inputVal">
-          <img :src="iconPuls" v-if="!inputOpen" @click="handleIcon('plus')" />
-          <img :src="iconClose" v-else @click="inputOpen = ''" />
-        </div>
-        <div
-          class="rong-editor-btn rong-editor-btn-emojisent"
-          @click="sendText"
-          v-else
-        >
-          发送
-        </div>
-        <div
-          class="rong-icon rong-editor-btn-emoji"
-          @click="handleIcon('emoji')"
-        >
-          <img :src="iconEmoji" />
-        </div>
-      </div>
-      <div v-if="inputOpen === 'emoji'" class="input-open">
-        <el-carousel height="175px" :autoplay="false">
-          <el-carousel-item v-for="(group, i) in swiperEmojiList" :key="i">
-            <div class="rong-emojis-swiper">
-              <ul
-                class="rong-editor-emoji"
-                v-for="item in group"
-                :key="item.emoji"
-                @click="handleEmoji(item)"
-              >
-                <span>{{ item.emoji }}</span>
-              </ul>
-            </div>
-          </el-carousel-item>
-        </el-carousel>
-      </div>
-      <div v-if="inputOpen === 'plus'" class="input-open">
-        <div class="rong-editor-modules">
-          <div class="rong-editor-module rong-editor-module-image">
-            <input id="uploadEl" class="rong-editor-module-image-input" @change="uploadEvent" ref="uploadEl" type="file" />
-          </div>
-        </div>
-        <div class="rong-editor-modules-solt">
-          <slot name="slot-tool"></slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import methods from "./methods";
-export default {
-  data() {
-    return {
-      inputOpen: "",
-      inputVal: "",
-      swiperEmojiList: [],
-      iconPuls: require("../../../../../static/im/more.png"),
-      iconEmoji: require("../../../../../static/im/biaoqing.png"),
-      iconClose: require("../../../../../static/im/close.png"),
-      headers: {},
-      uploadData: {},
-      formData: {},
-      imToken: "",
-    };
-  },
-  methods,
-  props: {
-    targetId: {
-      type: [String, Number],
-      default: "",
-    },
-    type: {
-      type: [String, Number],
-      default: "",
-    },
-    targetName: {
-      type: [String, Number],
-      default: "",
-    },
-    userName: {
-      type: [String, Number],
-      default: "",
-    },
-    avatarUrl: {
-      type: [String, Number],
-      default: "",
-    },
-    chatObj: {
-      type: [Object],
-      default: {},
-    },
-  },
-  mounted() {
-    this.imToken = localStorage.getItem("imToken");
-    this.swiperEmojiList = this.formatEmojis();
-    this.initEvent();
-  },
-};
-</script>
+<template>
+  <div class="input-field">
+    <div class="rong-editor">
+      <div class="input-wapper">
+        <input
+          class="rong-editor-input"
+          v-model="inputVal"
+          @keyup.enter="sendText"
+        />
+        <div class="rong-icon rong-editor-btn-more" v-if="!inputVal">
+          <img :src="iconPuls" v-if="!inputOpen" @click="handleIcon('plus')" />
+          <img :src="iconClose" v-else @click="inputOpen = ''" />
+        </div>
+        <div
+          class="rong-editor-btn rong-editor-btn-emojisent"
+          @click="sendText"
+          v-else
+        >
+          发送
+        </div>
+        <div
+          class="rong-icon rong-editor-btn-emoji"
+          @click="handleIcon('emoji')"
+        >
+          <img :src="iconEmoji" />
+        </div>
+      </div>
+      <div v-if="inputOpen === 'emoji'" class="input-open">
+        <el-carousel height="175px" :autoplay="false">
+          <el-carousel-item v-for="(group, i) in swiperEmojiList" :key="i">
+            <div class="rong-emojis-swiper">
+              <ul
+                class="rong-editor-emoji"
+                v-for="item in group"
+                :key="item.emoji"
+                @click="handleEmoji(item)"
+              >
+                <span>{{ item.emoji }}</span>
+              </ul>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+      <div v-if="inputOpen === 'plus'" class="input-open">
+        <div class="rong-editor-modules">
+          <div class="rong-editor-module rong-editor-module-image">
+            <input id="uploadEl" class="rong-editor-module-image-input" @change="uploadEvent" ref="uploadEl" type="file" />
+          </div>
+        </div>
+        <div class="rong-editor-modules-solt">
+          <slot name="slot-tool"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import methods from "./methods";
+export default {
+  data() {
+    return {
+      inputOpen: "",
+      inputVal: "",
+      swiperEmojiList: [],
+      iconPuls: require("../../../../../static/im/more.png"),
+      iconEmoji: require("../../../../../static/im/biaoqing.png"),
+      iconClose: require("../../../../../static/im/close.png"),
+      headers: {},
+      uploadData: {},
+      formData: {},
+      imToken: "",
+    };
+  },
+  methods,
+  props: {
+    targetId: {
+      type: [String, Number],
+      default: "",
+    },
+    type: {
+      type: [String, Number],
+      default: "",
+    },
+    targetName: {
+      type: [String, Number],
+      default: "",
+    },
+    userName: {
+      type: [String, Number],
+      default: "",
+    },
+    avatarUrl: {
+      type: [String, Number],
+      default: "",
+    },
+    chatObj: {
+      type: [Object],
+      default: {},
+    },
+  },
+  mounted() {
+    this.imToken = localStorage.getItem("imToken");
+    this.swiperEmojiList = this.formatEmojis();
+    this.initEvent();
+  },
+};
+</script>
 <style lang="scss" src="./index.scss"></style>