@ddwl/ddwl-ui 1.0.30 → 1.0.31-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ddwl/ddwl-ui",
-  "version": "1.0.30",
+  "version": "1.0.31-beta.1",
   "private": false,
   "main": "src/main.js",
   "style": "lib/theme/index.css",

package/src/lib/install/index.js

@@ -0,0 +1,15 @@
+import previewVue from './packages/file-preview/index.vue'
+
+export default (Vue) => {
+  console.log(Vue)
+  // 文件预览
+  Vue.prototype.$preview = ({ defaultIndex = 0, list = [] }) => {
+    console.log(2, defaultIndex, list)
+    const Preview = Vue.extend(previewVue)
+    const instance = new Preview()
+    document.body.appendChild(instance.$mount().$el)
+    instance.value = true
+    instance.defaultIndex = defaultIndex
+    instance.list = list
+  }
+}

package/src/main.js

@@ -3,7 +3,6 @@ import Descriptions from './packages/descriptions'
 import Dialog from './packages/dialog'
 import DialogConfirm from './packages/dialog-confirm'
 import Drawer from './packages/drawer'
-import FilePreview from './packages/file-preview'
 import FilterTree from './packages/filter-tree'
 import Form from './packages/form'
 import FormItem from './packages/form-item'
@@ -17,6 +16,8 @@ import SearchTable from './packages/search-table'
 import SvgIcon from './packages/svg-icon'
 import Table from './packages/table'
 import Upload from './packages/upload'
+import extendComponentInstall from './lib/install/index.js'
+
 import './lib/theme/index.css'
 
 const components = [
@@ -25,7 +26,6 @@ const components = [
   Dialog,
   DialogConfirm,
   Drawer,
-  FilePreview,
   FilterTree,
   Form,
   FormItem,
@@ -50,6 +50,8 @@ const install = (Vue, opts = {}) => {
 
   if (install.installed) return
   components.forEach((component) => Vue.component(component.name, component))
+
+  extendComponentInstall(Vue)
 }
 
 if (typeof window !== 'undefined' && window.Vue) {

package/src/packages/file-preview/index.js

@@ -0,0 +1,14 @@
+import previewVue from './index.vue'
+
+export default {
+  install (Vue) {
+    Vue.prototype.$preview = ({ defaultIndex = 0, list = [] }) => {
+      const Preview = Vue.extend(previewVue)
+      const instance = new Preview()
+      document.body.appendChild(instance.$mount().$el)
+      instance.value = true
+      instance.defaultIndex = defaultIndex
+      instance.list = list
+    }
+  }
+}

package/src/packages/file-preview/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="visible && fileArr.length"
+    v-if="visible && list.length"
     class="container"
   >
     <div
@@ -79,16 +79,12 @@ const audioExts = ['mp3', 'wav', 'ogg']
 export default {
   name: 'DFilePreview',
   components: { ElImageViewer },
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
   props: {
     value: {
       type: Boolean,
       default: false
     },
-    fileArr: {
+    list: {
       type: Array,
       default: () => {
         return [
@@ -97,30 +93,27 @@ export default {
           { name: '音频', type: 'audio', urls: [] }
         ]
       }
-    }
+    },
+    defaultIndex: {
+      type: Number,
+      default: 0
+    } 
   },
   data () {
     return {
       fileList: [],
       currentFileIndex: 0,
-      activeTab: ''
+      activeTab: 'image',
+      visible: true
     }
   },
   computed: {
     currentFileList () {
       return this.fileList.find(item => item.type === this.activeTab)?.urls || []
-    },
-    visible: {
-      get () {
-        return this.value
-      },
-      set (value) {
-        this.$emit('change', value)
-      }
     }
   },
   watch: {
-    fileArr: {
+    list: {
       handler (val) {
         if (val.length && typeof (val[0]) === 'string') {
           let arr = [
@@ -128,22 +121,23 @@ export default {
             { name: '视频', type: 'video', urls: [] },
             { name: '音频', type: 'audio', urls: [] }
           ]
-          val.map(url => {
-            if (imgExts.includes(url.substring(url.lastIndexOf('.') + 1))) {
-              arr[0].urls.push(url)
-            }
-            if (videoExts.includes(url.substring(url.lastIndexOf('.') + 1))) {
-              arr[1].urls.push(url)
-            }
-            if (audioExts.includes(url.substring(url.lastIndexOf('.') + 1))) {
-              arr[2].urls.push(url)
-            }
+          const exts = [imgExts, videoExts, audioExts]
+          val.map((url, index) => {
+            exts.forEach((item, i) => {
+              if (item.includes(url.substring(url.lastIndexOf('.') + 1))) {
+                arr[i].urls.push(url)
+                // 判断初始化tab、index
+                if (this.defaultIndex === index) {
+                  this.activeTab = arr[i].type
+                  this.currentFileIndex = arr[i].urls.length - 1
+                }
+              }
+            })
           })
           this.fileList = arr.filter(item => item.urls.length)
         } else {
           this.fileList = val
         }
-        this.activeTab = this.fileList[0].type
       },
       immediate: true,
       deep: true