Blame view

node_modules/mpvue-wxparse/src/components/wxParseImg.vue 2.11 KB
ce4c83ff   wxy   初始提交
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
  <template>
    <image
      :mode="node.attr.mode"
      :lazy-load="node.attr.lazyLoad"
      :class="node.classStr"
      :style="newStyleStr || node.styleStr"
      :data-src="node.attr.src"
      :src="node.attr.src"
      @tap="wxParseImgTap"
      @load="wxParseImgLoad"
      />
  </template>
  
  <script>
  export default {
    name: 'wxParseImg',
    data() {
      return {
        newStyleStr: '',
        preview: true,
      };
    },
    props: {
      node: {
        type: Object,
        default() {
          return {};
        },
      },
    },
    methods: {
      wxParseImgTap(e) {
        if (!this.preview) return;
        const { src } = e.target.dataset;
        if (!src) return;
        this.node.$host.preview(src, e);
      },
      // 图片视觉宽高计算函数区
      wxParseImgLoad(e) {
        const { src } = e.target.dataset;
        if (!src) return;
        const { width, height } = e.mp.detail;
        const recal = this.wxAutoImageCal(width, height);
        const { imageheight, imageWidth } = recal;
        const { padding, mode } = this.node.attr;
        const { styleStr } = this.node;
        const imageHeightStyle = mode === 'widthFix' ? '' : `height: ${imageheight}px;`;
        this.newStyleStr = `${styleStr}; ${imageHeightStyle}; width: ${imageWidth}px; padding: 0 ${+padding}px;`;
      },
      // 计算视觉优先的图片宽高
      wxAutoImageCal(originalWidth, originalHeight) {
        // 获取图片的原始长宽
        const { padding } = this.node.attr;
        const windowWidth = this.node.$screen.width - (2 * padding);
        const results = {};
  
        if (originalWidth < 60 || originalHeight < 60) {
          const { src } = this.node.attr;
          this.node.$host.removeImageUrl(src);
          this.preview = false;
        }
  
        // 判断按照那种方式进行缩放
        if (originalWidth > windowWidth) {
          // 在图片width大于手机屏幕width时候
          results.imageWidth = windowWidth;
          results.imageheight = windowWidth * (originalHeight / originalWidth);
        } else {
          // 否则展示原来的数据
          results.imageWidth = originalWidth;
          results.imageheight = originalHeight;
        }
  
        return results;
      },
    },
  };
  </script>