feat(custom): gallery

src/config/stage/plugins.js

@@ -1,10 +1,10 @@
 // 本文件是自动生成, 请勿修改
-import ImgsUpload from '@/plugins/ImgsUpload/stage-config'
 import LinCmsUi from '@/plugins/LinCmsUi/stage-config'
+import custom from '@/plugins/custom/stage-config'
 
 const pluginsConfig = [
-  ImgsUpload,
   LinCmsUi,
+  custom,
 ]
 
 export default pluginsConfig

src/plugins/ImgsUpload/package.json → src/plugins/custom/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "lc-plugin-imgs-upload",
+  "name": "lc-plugin-custom",
   "title": "图像上传组件示例",
   "version": "1.0.0",
   "_linVersion": "0.0.1-alpha.3",

src/plugins/custom/stage-config.js

@@ -0,0 +1,34 @@
+const CustomRouter = {
+  route: null,
+  name: null,
+  title: '自定义组件',
+  type: 'folder',
+  icon: 'iconfont icon-zidingyi',
+  filePath: 'views/custom/',
+  order: null,
+  inNav: true,
+  children: [
+    {
+      title: '图像上传展示',
+      type: 'view',
+      name: 'ImgsUploadDemo',
+      route: '/imgs-upload/stage1',
+      filePath: 'plugins/custom/views/Demo.vue',
+      inNav: true,
+      icon: 'iconfont icon-zidingyi',
+      right: null,
+    },
+    {
+      title: 'gallery 画廊',
+      type: 'view',
+      name: 'GalleryDemo',
+      route: '/custom/gallery',
+      filePath: 'plugins/custom/views/Gallery.vue',
+      inNav: true,
+      icon: 'iconfont icon-zidingyi',
+      right: null,
+    },
+  ],
+}
+
+export default CustomRouter

src/plugins/ImgsUpload/views/Demo.vue → src/plugins/custom/views/Demo.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="lin-container">
     <div class="lin-title">插件ImgsUpload舞台页面</div>
-    <el-divider></el-divider>
     <div class="lin-wrap">
       <el-form label-width="220px">
         <el-form-item label="带初始化至少4张, 至多5张">

src/plugins/custom/views/Gallery.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="lin-container">
+    <div class="lin-title">画廊插件演示</div>
+    <div class="lin-wrap container">
+      <div class="imgs-upload-container">
+        <div
+          class="img-box"
+          @click="preview(index)"
+          v-for="(url, index) in urls"
+          :key="index">
+          <el-image
+            class="thumb-item-img"
+            :src="url"
+            fit="cover"
+            style="width: 100%; height: 100%;"></el-image>
+          <div class="control">
+            <div class="preview">
+              <i class="el-icon-view"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <source-code link="https://github.com/TaleLin/lin-cms-vue/blob/master/src/plugins/LinCmsUi/views/table/TableCombo.vue"></source-code>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      urls: [
+        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/doc-1.png',
+        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/doc-2.png',
+        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/doc-3.png',
+        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/doc-4.png',
+        'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/doc-5.png',
+      ],
+    }
+  },
+  methods: {
+    preview(index) {
+      this.$imagePreview({
+        images: this.urls,
+        index,
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 20px 30px;
+
+  .imgs-upload-container {
+    display: flex;
+    flex-wrap: wrap;
+
+    .img-box {
+      border: 1px dashed #d9d9d9;
+      border-radius: 3px;
+      -webkit-transition: all .1s;
+      transition: all .1s;
+      color: #666666;
+      margin-right: 1em;
+      margin-bottom: 1em;
+      width: 200px;
+      height: 150px;
+      cursor: pointer;
+      font-size: 12px;
+      text-align: center;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      line-height: 1.3;
+      flex-direction: column;
+
+      .el-image {
+        width: 100%;
+        height: 100%;
+      }
+
+      .control {
+        display: flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        background-color: rgba(0, 0, 0, 0.3);
+        -webkit-transition: all .3s;
+        transition: all .3s;
+        -webkit-transition-delay: .1s;
+        transition-delay: .1s;
+
+        .preview {
+          color: white;
+          font-size: 2em;
+          transition: all .2s;
+        }
+
+      }
+
+      &:hover {
+        .control {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+</style>