build

Author: dolymood

README.md

@@ -42,6 +42,7 @@ npm install vue-simple-uploader@next --save
 ``` js
 import { createApp } from 'vue'
 import uploader from 'vue-simple-uploader'
+import 'vue-simple-uploader/dist/style.css'
 import App from './App.vue'
 
 const app = createApp(App)

README_zh-CN.md

@@ -45,6 +45,7 @@ npm install vue-simple-uploader@next --save
 ``` js
 import { createApp } from 'vue'
 import uploader from 'vue-simple-uploader'
+import 'vue-simple-uploader/dist/style.css'
 import App from './App.vue'
 
 const app = createApp(App)

dist/vue-simple-uploader.es.js

@@ -1,12 +1,12 @@
 <template>
-  <uploader :options="options" :file-status-text="statusText" class="uploader-example" ref="uploader" @file-complete="fileComplete" @complete="complete"></uploader>
+  <uploader :options="options" :file-status-text="statusText" class="uploader-example" ref="uploaderRef" @file-complete="fileComplete" @complete="complete"></uploader>
 </template>
 
 <script>
   import { nextTick, ref, onMounted } from 'vue'
   export default {
     setup () {
-      const uploader = ref(null)
+      const uploaderRef = ref(null)
       const options = {
         target: '//localhost:3000/upload', // '//jsonplaceholder.typicode.com/posts/',
         testChunks: false
@@ -21,19 +21,19 @@
         paused: '暂停中',
         waiting: '等待中'
       }
-      const complete = () => {
+      const complete = function () {
         console.log('complete', arguments)
       }
-      const fileComplete = () => {
+      const fileComplete = function () {
         console.log('file complete', arguments)
       }
       onMounted(() => {
         nextTick(() => {
-          window.uploader = uploader.value.uploader
+          window.uploader = uploaderRef.value.uploader
         })
       })
       return {
-        uploader,
+        uploaderRef,
         options,
         attrs,
         statusText,

dist/vue-simple-uploader.umd.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
-import uploader from '../src'
+import uploader from '../dist/vue-simple-uploader.es'
+import '../dist/style.css'
 import App from './App.vue'
 
 const app = createApp(App)

example/App.vue

@@ -156,26 +156,26 @@ export default {
       }
       return parsedTimeRemaining
     })
-    const _actionCheck = () => {
+    const actionCheck = () => {
       paused.value = props.file.paused
       error.value = props.file.error
       isUploading.value = props.file.isUploading()
     }
     const pause = () => {
       props.file.pause()
-      _actionCheck()
-      _fileProgress()
+      actionCheck()
+      fileProgress()
     }
     const resume = () => {
       props.file.resume()
-      _actionCheck()
+      actionCheck()
     }
     const remove = () => {
       props.file.cancel()
     }
     const retry = () => {
       props.file.retry()
-      _actionCheck()
+      actionCheck()
     }
     const processResponse = (message) => {
       let res = message
@@ -196,28 +196,28 @@ export default {
         instance.setupState[`_${event}`](args)
       }
     }
-    const _fileProgress = () => {
+    const fileProgress = () => {
       progress.value = props.file.progress()
       averageSpeed.value = props.file.averageSpeed
       currentSpeed.value = props.file.currentSpeed
       timeRemaining.value = props.file.timeRemaining()
       uploadedSize.value = props.file.sizeUploaded()
-      _actionCheck()
+      actionCheck()
     }
-    const _fileSuccess = (rootFile, file, message) => {
+    const fileSuccess = (rootFile, file, message) => {
       if (rootFile) {
         processResponse(message)
       }
-      _fileProgress()
+      fileProgress()
       error.value = false
       isComplete.value = true
       isUploading.value = false
     }
-    const _fileComplete = () => {
-      _fileSuccess()
+    const fileComplete = () => {
+      fileSuccess()
     }
-    const _fileError = (rootFile, file, message) => {
-      _fileProgress()
+    const fileError = (rootFile, file, message) => {
+      fileProgress()
       processResponse(message)
       error.value = true
       isComplete.value = false
@@ -285,17 +285,17 @@ export default {
       status,
       statusText,
       formatedTimeRemaining,
-      _actionCheck,
+      actionCheck,
       pause,
       resume,
       remove,
       retry,
       processResponse,
       fileEventsHandler,
-      _fileProgress,
-      _fileSuccess,
-      _fileComplete,
-      _fileError
+      fileProgress,
+      fileSuccess,
+      fileComplete,
+      fileError
     }
   }
 }

example/main.js

@@ -30,7 +30,17 @@ export default defineConfig(
       outDir: path.resolve(__dirname, 'dist'),
       lib: {
         entry: './src/index.js',
-        name: 'vue-uploader.js'
+        name: 'vue-uploader'
+      },
+      rollupOptions: {
+        // 确保外部化处理那些你不想打包进库的依赖
+        external: ['vue'],
+        output: {
+          // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
+          globals: {
+            vue: 'Vue'
+          }
+        }
       },
       cssCodeSplit: false
     },