vue-image-crop-upload - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

.eslintrc.js

@@ -0,0 +0,0 @@ module.exports = {

gulpfile.js

@@ -62,6 +62,17 @@ /******************************************************
 
-	gulp.src('./example/demo.js').pipe($.plumber({errorHandler: _errrHandler})).pipe(named(function() {
-		return 'demo-src';
-	})).pipe(webpack(webpack_config))/*.pipe($.uglify())*/
-        .pipe(gulp.dest('./example'));
+	gulp.src('./example/demo.js')
+		.pipe($.plumber({errorHandler: _errrHandler}))
+		.pipe(named(function() {
+			return 'demo-src';
+		}))
+		.pipe(webpack(webpack_config))/*.pipe($.uglify())*/
+	    .pipe(gulp.dest('./example'));
+
+	gulp.src('./example-2/demo.js')
+		.pipe($.plumber({errorHandler: _errrHandler}))
+		.pipe(named(function() {
+			return 'demo-src';
+		}))
+		.pipe(webpack(webpack_config))/*.pipe($.uglify())*/
+	    .pipe(gulp.dest('./example-2'));
 });
@@ -76,7 +87,7 @@
 	gulp.watch([
-		'./example/demo.js', './*.vue', './*.css'
+		'./example-2/demo.js','./example/demo.js', './*.vue', './*.css'
 	], ['js']);
 	gulp.watch(['./scss/*.scss'], ['css']);
 	gulp.watch([
-		'./example/**/*.html', './example/demo-src.js'
+		'./example/**/*.html', './example/demo-src.js', './example-2/**/*.html', './example-2/demo-src.js'
 	], function() {
@@ -83,0 +94,0 @@ reload();

package.json

 {
   "name": "vue-image-crop-upload",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "a vue plgin for image upload and crop（vue图片剪裁上传插件）",
@@ -5,0 +5,0 @@ "main": "upload.vue",

README.md

@@ -15,2 +15,5 @@ # vue-image-crop-upload
 ## Change log
+#### @1.2.0
+- Compatible vue2
+
 #### @1.1.0
@@ -31,3 +34,3 @@ - Adjusted Props naming: otherParams=>params, langConf=>langExt
 ## Env
-vue@1.0 + webpack + es6
+vue@1/vue@2 + webpack + es6
 
@@ -107,3 +110,3 @@
 
-#### Example
+#### Example vue@1
 ```html
@@ -185,2 +188,79 @@ <div id="app">
 
+#### Example vue@2
+```html
+<div id="app">
+	<a class="btn" @click="toggleShow">set avatar</a>
+	<my-upload field="img"
+        @crop-success="cropSuccess"
+        @crop-upload-success="cropUploadSuccess"
+        @crop-upload-fail="cropUploadFail"
+        v-model="show"
+		:width="300"
+		:height="300"
+		url="/upload"
+		:params="params"
+		img-format="png"></my-upload>
+	<img :src="imgDataUrl">
+</div>
+
+<script>
+	import 'babel-polyfill'; // es6 shim
+	import Vue from 'vue';
+	import myUpload from 'vue-image-crop-upload/upload-2.vue';
+
+	new Vue({
+		el: '#app',
+		data: {
+			show: true,
+			params: {
+				token: '123456798',
+				name: 'avatar'
+			},
+			imgDataUrl: '' // the datebase64 url of created image
+		},
+		components: {
+			'my-upload': myUpload
+		},
+		methods: {
+			toggleShow() {
+				this.show = !this.show;
+			},
+            /**
+			 * crop success
+			 *
+			 * [param] imgDataUrl
+			 * [param] field
+			 */
+			cropSuccess(imgDataUrl, field){
+				console.log('-------- crop success --------');
+				this.imgDataUrl = imgDataUrl;
+			},
+			/**
+			 * upload success
+			 *
+			 * [param] jsonData  server api return data, already json encode
+			 * [param] field
+			 */
+			cropUploadSuccess(jsonData, field){
+				console.log('-------- upload success --------');
+				console.log(jsonData);
+				console.log('field: ' + field);
+			},
+			/**
+			 * upload fail
+			 *
+			 * [param] status    server api return error status, like 500
+			 * [param] field
+			 */
+			cropUploadFail(status, field){
+				console.log('-------- upload fail --------');
+				console.log(status);
+				console.log('field: ' + field);
+			}
+		}
+	});
+</script>
+```
+
+
 --------------------------------
@@ -190,2 +270,5 @@ # 中文文档
 ## 更新日志
+#### @1.2.0
+- 兼容vue@2版本
+
 #### @1.1.0
@@ -205,3 +288,3 @@ - 调整了Props命名: otherParams=>params, langConf=>langExt
 ## 配置环境
-vue@1.0 + webpack + es6
+vue@1/vue@2 + webpack + es6
 
@@ -281,3 +364,3 @@
 
-#### 使用示例
+#### 使用示例 vue@1
 ```html
@@ -357,1 +440,78 @@ <div id="app">
 ```
+
+#### 使用示例 vue@2
+```html
+<div id="app">
+	<a class="btn" @click="toggleShow">设置头像</a>
+	<my-upload field="img"
+        @crop-success="cropSuccess"
+        @crop-upload-success="cropUploadSuccess"
+        @crop-upload-fail="cropUploadFail"
+        v-model="show"
+		:width="300"
+		:height="300"
+		url="/upload"
+		:params="params"
+		img-format="png"></my-upload>
+	<img :src="imgDataUrl">
+</div>
+
+<script>
+	import 'babel-polyfill'; // es6 shim
+	import Vue from 'vue';
+	import myUpload from 'vue-image-crop-upload/upload-2.vue';
+
+	new Vue({
+		el: '#app',
+		data: {
+			show: true,
+			params: {
+				token: '123456798',
+				name: 'avatar'
+			},
+			imgDataUrl: '' // the datebase64 url of created image
+		},
+		components: {
+			'my-upload': myUpload
+		},
+		methods: {
+			toggleShow() {
+				this.show = !this.show;
+			},
+            /**
+			 * crop success
+			 *
+			 * [param] imgDataUrl
+			 * [param] field
+			 */
+			cropSuccess(imgDataUrl, field){
+				console.log('-------- crop success --------');
+				this.imgDataUrl = imgDataUrl;
+			},
+			/**
+			 * upload success
+			 *
+			 * [param] jsonData   服务器返回数据，已进行json转码
+			 * [param] field
+			 */
+			cropUploadSuccess(jsonData, field){
+				console.log('-------- upload success --------');
+				console.log(jsonData);
+				console.log('field: ' + field);
+			},
+			/**
+			 * upload fail
+			 *
+			 * [param] status    server api return error status, like 500
+			 * [param] field
+			 */
+			cropUploadFail(status, field){
+				console.log('-------- upload fail --------');
+				console.log(status);
+				console.log('field: ' + field);
+			}
+		}
+	});
+
+</script>
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1591100

increased by65.54%

Number of package files

20

increased by33.33%

Lines of code

38118

increased by86.33%

Number of lines in readme file

510

increased by45.71%

Worsened metrics

Number of low supply chain risk alerts

77

increased by4.05%

Number of medium supply chain risk alerts

14

increased by75%

No dependency changes