leisure-core 0.4.77 → 0.4.81

package/index.js

@@ -22,6 +22,7 @@ import LeRichText from "./le-rich-text/index.js";
 import LeButtonUpload from "./le-button-upload/index.js";
 import LeButtonSelectMedia from "./le-button-select-media/index.js";
 import LeImage from "./le-image/index.js";
+import LeImageContainer from "./le-image-container/index.js";
 import LeBackUp from "./le-backup/index.js";
 import LeUpload from "./le-upload/index.js";
 import LeMpurl from "./le-mpurl/index.js";
@@ -54,6 +55,7 @@ const components = [
   LeRichText,
   LeButtonUpload,
   LeButtonSelectMedia,
+  LeImageContainer,
   LeImage,
   LeBackUp,
   LeUpload,
@@ -156,6 +158,7 @@ export default {
   LeRichText,
   LeButtonUpload,
   LeButtonSelectMedia,
+  LeImageContainer,
   LeImage,
   LeBackUp,
   LeUpload,

package/le-image/src/main.vue

@@ -1,155 +1,15 @@
 <template>
-  <div class="le-image">
-    <div
-      class="list"
-      @mouseover="mouseOverImg"
-      @mouseleave="mouseLeaveImg"
-      v-for="(item, index) in imageList"
-      :key="index"
-    >
-      <el-image :src="item" class="img">
-        <div slot="placeholder" class="image-slot">
-          加载中<span class="dot">...</span>
-        </div>
-      </el-image>
-      <span
-        class="delete"
-        @click="delImgList(item)"
-        :id="index"
-        :style="imgDeleCss"
-      >
-        <i class="el-icon-delete"></i>
-      </span>
-    </div>
-    <div style="display: flex">
-      <div class="img">
-        <le-button-upload
-          title="上传素材"
-          @callMdiaUrl="selectContent"
-        ></le-button-upload>
-        <le-button-select-media
-          title="选择素材"
-          :multiple="false"
-          @selectContent="selectContent"
-        ></le-button-select-media>
-      </div>
-    </div>
-  </div>
+  <el-image
+    v-bind="$attrs"
+    v-on="$listeners"
+    :class="['customClass', $attrs.class]"
+    :style="$attrs.style"
+  ></el-image>
 </template>
 <script>
 export default {
   name: "le-image",
-  props: {
-    images: {
-      type: Array,
-      default: () => [],
-    },
-    limit: {
-      type: Number,
-      default: 99999,
-    },
-  },
-  data() {
-    return {
-      imgDeleCss: "display:none",
-      imageList: [],
-    };
-  },
-  watch: {
-    images: {
-      handler(val) {
-        this.imageList = val;
-      },
-      immediate: true,
-      deep: true,
-    },
-  },
-  mounted() {},
-  methods: {
-    mouseOverImg() {
-      this.imgDeleCss = "display:block;cursor:pointer";
-    },
-    mouseLeaveImg() {
-      this.imgDeleCss = "display:none";
-    },
-    delImgList(item) {
-      let lenp = this.imageList.indexOf(item);
-      this.imageList.splice(lenp, 1);
-      this.$emit("getImages", this.imageList);
-    },
-    selectContent(val) {
-      let images = this.imageList;
-      let num = images && images.length > 0 ? images.length : 0;
-      if (num < this.limit) {
-        if (!Array.isArray(val)) {
-          if (!val) return;
-          this.imageList.push(val);
-          this.$emit("getImages", this.imageList);
-        } else {
-          this.imageList.push(...val);
-          this.$emit("getImages", this.imageList);
-        }
-      } else {
-        this.$message.warning(`图片数量最多${this.limit}张!`);
-      }
-    },
-  },
+  props: {},
+  methods: {},
 };
 </script>
-<style lang="scss" scoped>
-.le-image {
-  display: flex;
-  display: -webkit-flex;
-  flex-wrap: wrap;
-  .list {
-    position: relative;
-    width: 100px;
-    height: 100px;
-    left: 0;
-    top: 0;
-    cursor: default;
-    text-align: center;
-    color: #fff;
-    opacity: 100;
-    font-size: 20px;
-    /* background-color: rgba(0, 0, 0, 0.5); */
-    /* transition: opacity 0.3s; */
-    display: inline;
-
-    .img {
-      width: 100px;
-      height: 100px;
-    }
-
-    .delete {
-      position: absolute;
-      right: 0px;
-      bottom: 0;
-      font-size: 20px;
-      color: #fff;
-      display: block;
-      background-color: rgba(0, 0, 0, 0.5);
-      transition: opacity 0.3s;
-      width: 100%;
-      height: 100%;
-      text-align: center;
-      padding-top: 30%;
-    }
-  }
-  .img {
-    background-color: #fbfdff;
-    border: 1px dashed #c0ccda;
-    border-radius: 6px;
-    width: 100px;
-    height: 100px;
-    cursor: pointer;
-    font-size: 16px;
-    color: #8c939d;
-    display: flex;
-    display: -webkit-flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-}
-</style>

package/le-image-container/index.js

@@ -0,0 +1,7 @@
+import LeImageContainer from "./src/main.vue";
+
+LeImageContainer.install = function (Vue) {
+  Vue.component(LeImageContainer.name, LeImageContainer);
+};
+
+export default LeImageContainer;

package/le-image-container/src/main.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="le-image-container">
+    <div
+      class="list"
+      @mouseover="mouseOverImg"
+      @mouseleave="mouseLeaveImg"
+      v-for="(item, index) in imageList"
+      :key="index"
+    >
+      <el-image :src="item" class="img">
+        <div slot="placeholder" class="image-slot">
+          加载中<span class="dot">...</span>
+        </div>
+      </el-image>
+      <span
+        class="delete"
+        @click="delImgList(item)"
+        :id="index"
+        :style="imgDeleCss"
+      >
+        <i class="el-icon-delete"></i>
+      </span>
+    </div>
+    <div style="display: flex">
+      <div class="img">
+        <le-button-upload
+          title="上传素材"
+          @callMdiaUrl="selectContent"
+        ></le-button-upload>
+        <le-button-select-media
+          title="选择素材"
+          :multiple="false"
+          @selectContent="selectContent"
+        ></le-button-select-media>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "le-image-container",
+  props: {
+    images: {
+      type: Array,
+      default: () => [],
+    },
+    limit: {
+      type: Number,
+      default: 99999,
+    },
+  },
+  data() {
+    return {
+      imgDeleCss: "display:none",
+      imageList: [],
+    };
+  },
+  watch: {
+    images: {
+      handler(val) {
+        this.imageList = val;
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  mounted() {},
+  methods: {
+    mouseOverImg() {
+      this.imgDeleCss = "display:block;cursor:pointer";
+    },
+    mouseLeaveImg() {
+      this.imgDeleCss = "display:none";
+    },
+    delImgList(item) {
+      let lenp = this.imageList.indexOf(item);
+      this.imageList.splice(lenp, 1);
+      this.$emit("getImages", this.imageList);
+    },
+    selectContent(val) {
+      let images = this.imageList;
+      let num = images && images.length > 0 ? images.length : 0;
+      if (num < this.limit) {
+        if (!Array.isArray(val)) {
+          if (!val) return;
+          this.imageList.push(val);
+          this.$emit("getImages", this.imageList);
+        } else {
+          this.imageList.push(...val);
+          this.$emit("getImages", this.imageList);
+        }
+      } else {
+        this.$message.warning(`图片数量最多${this.limit}张!`);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.le-image-container {
+  display: flex;
+  display: -webkit-flex;
+  flex-wrap: wrap;
+  .list {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    left: 0;
+    top: 0;
+    cursor: default;
+    text-align: center;
+    color: #fff;
+    opacity: 100;
+    font-size: 20px;
+    /* background-color: rgba(0, 0, 0, 0.5); */
+    /* transition: opacity 0.3s; */
+    display: inline;
+
+    .img {
+      width: 100px;
+      height: 100px;
+    }
+
+    .delete {
+      position: absolute;
+      right: 0px;
+      bottom: 0;
+      font-size: 20px;
+      color: #fff;
+      display: block;
+      background-color: rgba(0, 0, 0, 0.5);
+      transition: opacity 0.3s;
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      padding-top: 30%;
+    }
+  }
+  .img {
+    background-color: #fbfdff;
+    border: 1px dashed #c0ccda;
+    border-radius: 6px;
+    width: 100px;
+    height: 100px;
+    cursor: pointer;
+    font-size: 16px;
+    color: #8c939d;
+    display: flex;
+    display: -webkit-flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leisure-core",
-  "version": "0.4.77",
+  "version": "0.4.81",
   "description": "leisure-core是京心数据基于vue2.x开发的一套后台管理系统桌面端组件库，封装了大量实用的UI控件模板,非常方便开发者快速搭建前端应用",
   "private": false,
   "author": "北方乐逍遥(zcx7878)",