vue-handsontable-element - npm Package Compare versions

Comparing version 1.4.6 to 1.4.7

package.json

 {
     "name": "vue-handsontable-element",
-    "version": "1.4.6",
+    "version": "1.4.7",
     "description": "handsontable for vue",
@@ -5,0 +5,0 @@ "author": "Maple <[e-mail]>",

README.md

 # Requirements
 
-- Vue: ^1.0.0 or ^2.0.0
-- 支持图片上传，图片拖拽，自定义图片上传
+-   Vue: ^1.0.0 or ^2.0.0
+-   支持图片上传，图片拖拽，自定义图片上传
 
@@ -10,3 +10,3 @@ ## Install
 
-``` sh
+```sh
 
@@ -19,12 +19,11 @@ $ npm install vue-upload-drag -D
 
-``` javascript
-
-import VueUploadDrag from 'vue-upload-drag'
-Vue.use(VueUploadDrag)
+```javascript
+import VueUploadDrag from "vue-upload-drag";
+Vue.use(VueUploadDrag);
 ```
 
-``` html
+```html
 <!--your.vue-->
 <template>
-  <upload-drag v-model="fileList" :config="config"/>
+    <upload-drag v-model="fileList" :config="config" />
 </template>
@@ -34,43 +33,47 @@ ```
 #### API
-* `{onChange} Function`
-* `{onProgress} Function`
-* `{onError} Function`
-* `{onSuccess} Function 必须接受，并回调exChangeUrl方法`
 
+-   `{onChange} Function`
+-   `{onProgress} Function`
+-   `{onError} Function`
+-   `{onSuccess} Function 必须接受，并回调exChangeUrl方法`
+
 ##### slot
-* `具名插槽：loading，用于自定义loading，结合config.loading用`
-* `具名插槽：imgBtns，用于自定义imgBtns，结合config.imgBtns用`
-* `具名插槽：liItem，该插槽是在li元素根节点`
 
+-   `具名插槽：loading，用于自定义loading，结合config.loading用`
+-   `具名插槽：imgBtns，用于自定义imgBtns，结合config.imgBtns用`
+-   `具名插槽：liItem，该插槽是在li元素根节点`
+
 ###### Arguments:
- * `{config} Object`
- ``` javascript
- export default {
-  name: 'uploadDrag',
-  props: {
-    value: {
-      required: true,
-      type: Array
-    },
-    config: {
-      required: false,
-      type: Object,
-      default: _ => ({
-        accept: "image/*", // 文件上传类型
-        action: "https://jsonplaceholder.typicode.com/posts/", // 上传域名
-        data: {}, // 请求参数
-        limit: 9, // 支持最大上传文件数
-        multiple: true, // 支持多个文件选择
-        imgUrl: "url", // 图片路径字段
-        deleteBtnName: "删除", // 删除按钮名
-        viewBtnName: "查看", // 查看按钮名
-        dragabled: true, // 是否拖拽
-        imgBtns: ["删除", "查看"], // 图片按钮显示集合，另可以通过具名插槽名imgBtns自定义
-        loading: true, // 图片加载loading是否开启，另可以通过具名插槽名Loading自定义
-        isHttpRequest: false, // 是否自定义请求
-        uploadField: "file", // 上传默认字段
-      })
+
+-   `{config} Object`
+
+```javascript
+export default {
+    name: "uploadDrag",
+    props: {
+        value: {
+            required: true,
+            type: Array
+        },
+        config: {
+            required: false,
+            type: Object,
+            default: _ => ({
+                accept: "image/*", // 文件上传类型
+                action: "https://jsonplaceholder.typicode.com/posts/", // 上传域名
+                data: {}, // 请求参数
+                limit: 9, // 支持最大上传文件数
+                multiple: true, // 支持多个文件选择
+                imgUrl: "url", // 图片路径字段
+                deleteBtnName: "删除", // 删除按钮名
+                viewBtnName: "查看", // 查看按钮名
+                dragabled: true, // 是否拖拽
+                imgBtns: ["删除", "查看"], // 图片按钮显示集合，另可以通过具名插槽名imgBtns自定义
+                loading: true, // 图片加载loading是否开启，另可以通过具名插槽名Loading自定义
+                isHttpRequest: false, // 是否自定义请求
+                uploadField: "file" // 上传默认字段
+            })
+        }
     }
-  }
- }
+};
 ```
@@ -80,56 +83,69 @@
 
-``` html
+```html
 <template>
-  <upload-drag v-model="fileList" :config="config" @onChange="onChange" @onProgress="onProgress" @picsExceed="picsExceed" @onError="onError" @onSuccess="onSuccess"/>
+    <upload-drag
+        v-model="fileList"
+        :config="config"
+        @onChange="onChange"
+        @onProgress="onProgress"
+        @picsExceed="picsExceed"
+        @onError="onError"
+        @onSuccess="onSuccess"
+    />
 </template>
 ```
 
-``` javascript
-import VueUploadDrag from 'vue-upload-drag'
-Vue.use(VueUploadDrag)
+```javascript
+import VueUploadDrag from "vue-upload-drag";
+Vue.use(VueUploadDrag);
 
 export default {
-  data() {
-    return {
-      fileList: [
-        {
-          name: "food.jpg",
-          url: "https://www.baidu.com/img/bd_logo1.png",
-          id: 11
+    data() {
+        return {
+            fileList: [
+                {
+                    name: "food.jpg",
+                    url: "https://www.baidu.com/img/bd_logo1.png",
+                    id: 11
+                }
+            ],
+            config: {
+                limit: 1
+            }
+        };
+    },
+    methods: {
+        onChange(f) {
+            // 图片选择改变，且config中isHttpRequest为true
+            console.log(f);
+        },
+        onProgress({ e, file, uid }) {
+            // 上传中
+            console.log(e, file, uid);
+        },
+        onError({ err, file, uid }) {
+            // 上传失败,会自动把图片移除，建议给提示
+            alert("图片上传失败");
+            console.log(err, file, uid);
+        },
+        picsExceed({ uploadBefore, selectCount, files, value }) {
+            // 同时选择多张图片超过限制数会被触发
+            alert("选择的图片数量超过最大数");
+            uploadBefore(files, value); // 过滤多余的图片继续上传
+        },
+        onSuccess({ res, file, _uid, exChangeUrl, handleRemove }) {
+            // 上传成功，请必须接受onSuccess方法
+            console.log(res, file, _uid, exChangeUrl, handleRemove);
+            // 仅是举例而已哦
+            if (res.code === "0") {
+                // 根据后端状态判断
+                const { url } = res.data;
+                exChangeUrl(_uid, url); // url为后端返回的图片链接值，uid是onSuccess传入的
+            } else {
+                alert("图片上传失败");
+                handleRemove(_uid); // 删除图片
+            }
         }
-      ],
-      config: {
-          limit: 1
-      }
-    };
-  },
-  methods: {
-      onChange (f) { // 图片选择改变，且config中isHttpRequest为true
-          console.log(f)
-      },
-      onProgress ({ e, file, uid }) { // 上传中
-          console.log(e, file, uid)
-      },
-      onError ({ err, file, uid }) { // 上传失败,会自动把图片移除，建议给提示
-          alert('图片上传失败')
-          console.log(err, file, uid)
-      },
-      picsExceed ({uploadBefore, selectCount, files, value}) { // 同时选择多张图片超过限制数会被触发
-          alert('选择的图片数量超过最大数')
-          uploadBefore(files, value) // 过滤多余的图片继续上传
-      },
-      onSuccess ({res, file, _uid , exChangeUrl, handleRemove}) { // 上传成功，请必须接受onSuccess方法
-          console.log(res, file, _uid , exChangeUrl, handleRemove)
-          // 仅是举例而已哦
-          if (res.code === '0') { // 根据后端状态判断
-            const {url} = res.data
-            exChangeUrl(_uid, url); // url为后端返回的图片链接值，uid是onSuccess传入的
-          } else {
-            alert('图片上传失败')
-            handleRemove(_uid) // 删除图片
-          }
-      }
-  }
+    }
 };
 ```
-

New alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

148

increased by12.12%

Worsened metrics

Total package byte prevSize

6214

decreased by-99.78%

Number of package files

2

decreased by-33.33%

Lines of code

0

decreased by-100%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes