cropper.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <view>
  3. <ksp-cropper mode="fixed" :width="minPicWidth" :height="minPicHeight" :maxWidth="1024" :maxHeight="1024"
  4. :url="url" @cancel="oncancel" @ok="uploadSuccess"></ksp-cropper>
  5. </view>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. // 保存触发事件
  12. eventChannel: '',
  13. minPicWidth: 100, //保存图片最小宽
  14. minPicHeight: 100, //保存图片最小高
  15. url: '' //图片
  16. }
  17. },
  18. onLoad(opt) {
  19. const that = this;
  20. if (opt.width) {
  21. that.minPicWidth = +opt.width;
  22. }
  23. if (opt.height) {
  24. that.minPicHeight = +opt.height;
  25. }
  26. // #ifdef APP-NVUE
  27. that.eventChannel = that.$scope.eventChannel; // 兼容APP-NVUE
  28. // #endif
  29. // #ifndef APP-NVUE
  30. that.eventChannel = that.getOpenerEventChannel();
  31. // #endif
  32. that.eventChannel.on('urlNext', function(data) {
  33. console.log(data);
  34. that.url = data.url.tempFilePath;
  35. })
  36. },
  37. methods: {
  38. oncancel(e) {
  39. uni.navigateBack();
  40. console.log(e, 'on');
  41. },
  42. // 3.定义自己的回调函数
  43. uploadSuccess(tempFilePath) {
  44. this.eventChannel.emit('uploadSuccess', tempFilePath.path);
  45. // 后退回原来的页面
  46. uni.navigateBack();
  47. },
  48. }
  49. }
  50. </script>
  51. <style>
  52. </style>