cropper.vue 1.2 KB

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