'a'

mh-two-thousand-and-two

2024-04-12 44d2c92345cd156a59fc327b3060292a282d2893

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
79
80
81
82
83
84
85
86
87
88
89
90
<template>
  <uni-web-view
    ref="webviewContainer"
    :class="{'uni-webview--fullscreen':fullscreen}"
    v-on="$listeners"
  >
    <v-uni-resize-sensor
      ref="sensor"
      @resize="_resize"
    />
  </uni-web-view>
</template>
 
<script>
export default {
  name: 'WebView',
  props: {
    src: {
      type: String,
      default: ''
    },
    fullscreen: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    src (val, oldVal) {
      this.iframe && (this.iframe.src = this.$getRealPath(this.src))
    }
  },
  mounted () {
    this.iframe = document.createElement('iframe')
    Object.keys(this.$attrs).forEach(key => {
      this.iframe[key] = this.$attrs[key]
    })
    this.iframe.src = this.$getRealPath(this.src)
    if (this.fullscreen) {
      document.body.appendChild(this.iframe)
    } else {
      this.$refs.webviewContainer.appendChild(this.iframe)
    }
    this._resize()
  },
  activated () {
    this.fullscreen && (this.iframe.style.display = 'block')
  },
  deactivated () {
    this.fullscreen && (this.iframe.style.display = 'none')
  },
  beforeDestroy () {
    this.fullscreen && document.body.removeChild(this.iframe)
  },
  methods: {
    _resize () {
      if (this.fullscreen) {
        const {
          top,
          left,
          width,
          height
        } = this.$el.getBoundingClientRect()
 
        this.iframe.style.position = 'absolute'
        this.iframe.style.display = 'block'
        this.iframe.style.border = 0
        this.iframe.style.top = top + 'px'
        this.iframe.style.left = left + 'px'
        this.iframe.style.width = width + 'px'
        this.iframe.style.height = height + 'px'
      } else {
        this.iframe.style.width = this.$refs.webviewContainer.style.width || '300px'
        this.iframe.style.height = this.$refs.webviewContainer.style.height || '150px'
      }
    }
  }
}
</script>
<style>
  uni-web-view {
    display: flex;
  }
  uni-web-view.uni-webview--fullscreen {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
</style>