index.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. new Vue({
  2. el: '#pageContainer',
  3. data: {
  4. errorMessage: '',
  5. errorHighlight: false
  6. },
  7. mounted: function () {
  8. // 错误处理器
  9. let errorHandler = (which, ok) => {
  10. let message = '';
  11. if (ok) {
  12. message = '两侧JSON比对完成!';
  13. this.errorHighlight = false;
  14. } else {
  15. let side = {'left': '左', 'right': '右', 'left-right': '两'}[which];
  16. if(!jsonBox.left.getValue().trim().length) {
  17. message = '请在<span class="x-hlt1">左侧</span>填入待比对的JSON内容!'
  18. }else if(!jsonBox.right.getValue().trim().length) {
  19. message = '请在<span class="x-hlt1">右侧</span>填入待比对的JSON内容!'
  20. }else{
  21. message = '<span class="x-hlt1">' + side + '侧</span>JSON不合法!';
  22. }
  23. this.errorHighlight = true;
  24. }
  25. this.errorMessage = '<span class="x-hlt">Tips:</span>' + message;
  26. };
  27. // diff处理器
  28. let diffHandler = (diffs) => {
  29. if (!this.errorHighlight) {
  30. if (diffs.length) {
  31. this.errorMessage += '共有 <span class="x-hlt">' + diffs.length + '</span> 处不一致!';
  32. } else {
  33. this.errorMessage += '且JSON内容一致!';
  34. }
  35. }
  36. };
  37. // 代码比对
  38. let jsonBox = JsonDiff.init(this.$refs.srcLeft, this.$refs.srcRight, errorHandler, diffHandler);
  39. }
  40. });