装起全部商城菜单

src/views/theme/components/rootcompToolbar/toolModule/tool-single-img.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="module-box single-img">
+    <div class="single-img__box">
+      <el-upload
+        drag
+        :action="fileUploadURL"
+        :on-success="handleAvatarSuccess"
+        :before-upload="beforeAvatarUpload"
+        :show-file-list="false"
+      >
+        <img v-if="imageUrl" :src="imageUrl" class="single-img__img">
+        <i v-else class="el-icon-upload">
+          <div class="el-upload__text"><em>选择图片</em></div>
+          <div class="el-upload__tip" slot="tip">{{tip}}</div>
+        </i>
+      </el-upload>
+      <div class="overlay" v-if="imageUrl">
+        <!-- <i class="iconfont icon-chakan" @click="showImage"></i>
+        <i class="iconfont icon-shanchu1" @click="delImage"></i> -->
+      </div>
+    </div>
+    <el-dialog title="图片展示" :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tool-single-img',
+  data () {
+    return {
+      dialogVisible: false,
+      dialogImageUrl: '',
+      fileUploadURL: ''
+    }
+  },
+  props: {
+    imageUrl: {
+      type: String,
+      default: ''
+    },
+    tip: {
+      type: String,
+      default: '建议尺寸: 1080*900px, 小于1MB'
+    }
+  },
+  mounted () {
+    this.fileUploadURL = process.env.VUE_APP_BASE_API +'/api/canvas/upload?name=demo&type=console'
+  },
+  methods: {
+    handleAvatarSuccess (res, file) {
+      this.$emit('update:imageUrl', res.link)
+    },
+    beforeAvatarUpload (file) {
+      const isLt1M = file.size / 1024 / 1024 < 1
+      if (!isLt1M) {
+        this.$message.error('上传图片大小不能超过 1MB!')
+      }
+      return isLt1M
+    },
+    showImage () {
+      this.dialogImageUrl = this.imageUrl
+      this.dialogVisible = true
+    },
+    delImage () {
+      this.$emit('update:imageUrl', '')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .single-img{
+    &__box{
+      position: relative;
+      >>> .el-upload{
+        width: 100%;
+      }
+      >>> .el-upload-dragger{
+        width: 100%;
+        .el-upload__text{
+          line-height: 40px;
+        }
+        .el-upload__tip{
+          line-height: 1em;
+        }
+      }
+      .overlay{
+        display: none;
+      }
+      &:hover .overlay{
+        position: absolute;
+        top:0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0,0,0,0.3);
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .iconfont{
+          padding: 5px;
+          margin: 0 5px;
+          font-size: 20px;
+          cursor: pointer;
+        }
+      }
+    }
+    &__img{
+      position: absolute;
+      max-width: 100%;
+      height: 100%;
+      max-height: 100%;
+      margin: auto;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+</style>