feat(*): 多图像上传组件demo示例

Author: quanquan2100

src/config/stage/plugins.js

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

src/plugins/ImgsUpload/README.md

@@ -0,0 +1,32 @@
+# 插件名: 图像上传组件示例(ImgsUpload)
+
+插件描述, 图像上传组件示例 用于处于xxx业务场景, 提供了xxx功能
+
+## 舞台视口列表
+
+### TestView
+
+地址: `/ImgsUpload/test.vue`
+显示xxx内容, 可进行xxx操作
+
+## 自由视口列表
+
+### Test
+
+属性:
+
+| Require | Name |  Type  | Default | Desc |
+|:-------:|:----:|:------:|:-------:|:----:|
+|  true   | name | String |   val   | 描述 |
+  
+事件:
+
+| Name |   Argument   | Desc |
+|:----:|:------------:|:----:|
+| name | 事件参数描述 | 描述 |
+
+方法:
+
+| Name |   Argument   |   Result   | Desc |
+|:----:|:------------:|:----------:|:----:|
+| name | 方法参数描述 | 返回值描述 | 描述 |

src/plugins/ImgsUpload/assets/img/logo.png

@@ -0,0 +1,10 @@
+{
+  "name": "lc-plugin-imgs-upload",
+  "title": "图像上传组件示例",
+  "version": "1.0.0",
+  "_linVersion": "0.0.1-alpha.3",
+  "description": "展示图像上传组件能力",
+  "author": "",
+  "dependencies": {},
+  "devDependencies": {}
+}

src/plugins/ImgsUpload/package.json

@@ -0,0 +1,24 @@
+const ImgsUploadRouter = {
+  route: null,
+  name: null,
+  title: '图像上传',
+  type: 'folder',
+  icon: 'iconfont icon-demo',
+  filePath: 'views/ImgsUpload/',
+  order: null,
+  inNav: true,
+  children: [
+    {
+      title: '图像上传展示',
+      type: 'view',
+      name: 'ImgsUploadDemo',
+      route: '/imgs-upload/stage1',
+      filePath: 'plugins/ImgsUpload/views/Demo.vue',
+      inNav: true,
+      icon: 'iconfont icon-demo',
+      right: null,
+    },
+  ],
+}
+
+export default ImgsUploadRouter

src/plugins/ImgsUpload/stage-config.js

@@ -0,0 +1,83 @@
+<template>
+  <div class="lin-container">
+    <div class="lin-title">插件ImgsUpload舞台页面</div>
+    <el-divider></el-divider>
+    <div class="lin-wrap">
+      <el-form label-width="180px">
+        <el-form-item label="带初始化">
+          <upload-imgs
+            :value="initData"
+            :rules="rules"
+            :multiple="true"
+            :max-num="5" />
+        </el-form-item>
+        <el-form-item label="普通示例">
+          <upload-imgs :rules="rules" :multiple="true" />
+        </el-form-item>
+        <el-form-item label="禁用">
+          <upload-imgs :rules="rules2" :multiple="true" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="排序+固定数量">
+          <upload-imgs
+            :rules="rules2"
+            :multiple="true"
+            :min-num="3"
+            :max-num="3"
+            :sortable="true" />
+        </el-form-item>
+        <el-form-item label="最大数量">
+          <upload-imgs :rules="rules" :multiple="true" :max-num="3" />
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import UploadImgs from '@/components/base/upload-imgs'
+
+export default {
+  name: 'ImgsUploadStage1',
+  components: {
+    UploadImgs,
+  },
+  data() {
+    return {
+      rules: {
+        minWidth: 100,
+        minHeight: 100,
+        maxSize: 5,
+      },
+      rules2: {
+        minWidth: 100,
+        maxWidth: 2000,
+      },
+      initData: [{
+        id: '123',
+        display: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+        src: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+      }, {
+        id: '12d3',
+        display: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
+        src: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
+      }],
+    }
+  },
+  // 计算属性设置
+  computed: {},
+  // 数据变更监听
+  watch: {},
+  mounted() {},
+  // 当页面使用路由参数时, 参数部分变化触发的动作在本函数中操作
+  // https://router.vuejs.org/zh/guide/advanced/navigation-guards.htmll#组件内的守卫
+  // beforeRouteUpdate(to, from, next) {
+  //   // this.name = to.params.name
+  //   // this.init()
+  //   // next()
+  // },
+  methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+</style>