cropper.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  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. that.url = data.url.tempFilePath;
  34. })
  35. },
  36. methods: {
  37. oncancel(e) {
  38. uni.navigateBack();
  39. },
  40. // 3.定义自己的回调函数
  41. uploadSuccess(tempFilePath) {
  42. this.eventChannel.emit('uploadSuccess', tempFilePath.path);
  43. // 后退回原来的页面
  44. uni.navigateBack();
  45. },
  46. }
  47. }
  48. </script>
  49. <style>
  50. </style>