uview-plus 3.1.22 → 3.1.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,360 +1,482 @@
1
1
  <template>
2
- <view id="_root" :class="(selectable?'_select ':'')+'_root'">
3
- <slot v-if="!nodes[0]" />
4
- <!-- #ifndef APP-PLUS-NVUE -->
5
- <node v-else :childs="nodes" :opts="[lazyLoad,loadingImg,errorImg,showImgMenu]" />
6
- <!-- #endif -->
7
- <!-- #ifdef APP-PLUS-NVUE -->
8
- <web-view ref="web" src="/static/app-plus/mp-html/local.html" :style="'margin-top:-2px;height:' + height + 'px'" @onPostMessage="_onMessage" />
9
- <!-- #endif -->
10
- </view>
2
+ <view id="_root" :class="(selectable ? '_select ' : '') + '_root'" :style="containerStyle">
3
+ <slot v-if="!nodes[0]" />
4
+ <!-- #ifndef APP-PLUS-NVUE -->
5
+ <node v-else :childs="nodes" :opts="[lazyLoad, loadingImg, errorImg, showImgMenu, selectable]" name="span" />
6
+ <!-- #endif -->
7
+ <!-- #ifdef APP-PLUS-NVUE -->
8
+ <web-view ref="web" src="/static/app-plus/mp-html/local.html" :style="'margin-top:-2px;height:' + height + 'px'" @onPostMessage="_onMessage" />
9
+ <!-- #endif -->
10
+ </view>
11
11
  </template>
12
12
 
13
13
  <script>
14
- import props from './props.js';
15
14
  /**
16
- * mp-html v2.0.4
15
+ * mp-html v2.4.1
17
16
  * @description 富文本组件
18
17
  * @tutorial https://github.com/jin-yufeng/mp-html
19
- * @property {String} bgColor 背景颜色,只适用与APP-PLUS-NVUE
20
- * @property {String} content 用于渲染的富文本字符串(默认 true
21
- * @property {Boolean} copyLink 是否允许外部链接被点击时自动复制
22
- * @property {String} domain 主域名,用于拼接链接
23
- * @property {String} errorImg 图片出错时的占位图链接
24
- * @property {Boolean} lazyLoad 是否开启图片懒加载(默认 true
25
- * @property {string} loadingImg 图片加载过程中的占位图链接
26
- * @property {Boolean} pauseVideo 是否在播放一个视频时自动暂停其它视频(默认 true
27
- * @property {Boolean} previewImg 是否允许图片被点击时自动预览(默认 true
28
- * @property {Boolean} scrollTable 是否给每个表格添加一个滚动层使其能单独横向滚动
29
- * @property {Boolean} selectable 是否开启长按复制
30
- * @property {Boolean} setTitle 是否将 title 标签的内容设置到页面标题(默认 true
31
- * @property {Boolean} showImgMenu 是否允许图片被长按时显示菜单(默认 true
32
- * @property {Object} tagStyle 标签的默认样式
33
- * @property {Boolean | Number} useAnchor 是否使用锚点链接
34
- *
35
- * @event {Function} load dom 结构加载完毕时触发
36
- * @event {Function} ready 所有图片加载完毕时触发
37
- * @event {Function} imgTap 图片被点击时触发
38
- * @event {Function} linkTap 链接被点击时触发
39
- * @event {Function} error 媒体加载出错时触发
18
+ * @property {String} container-style 容器的样式
19
+ * @property {String} content 用于渲染的 html 字符串
20
+ * @property {Boolean} copy-link 是否允许外部链接被点击时自动复制
21
+ * @property {String} domain 主域名,用于拼接链接
22
+ * @property {String} error-img 图片出错时的占位图链接
23
+ * @property {Boolean} lazy-load 是否开启图片懒加载
24
+ * @property {string} loading-img 图片加载过程中的占位图链接
25
+ * @property {Boolean} pause-video 是否在播放一个视频时自动暂停其他视频
26
+ * @property {Boolean} preview-img 是否允许图片被点击时自动预览
27
+ * @property {Boolean} scroll-table 是否给每个表格添加一个滚动层使其能单独横向滚动
28
+ * @property {Boolean | String} selectable 是否开启长按复制
29
+ * @property {Boolean} set-title 是否将 title 标签的内容设置到页面标题
30
+ * @property {Boolean} show-img-menu 是否允许图片被长按时显示菜单
31
+ * @property {Object} tag-style 标签的默认样式
32
+ * @property {Boolean | Number} use-anchor 是否使用锚点链接
33
+ * @event {Function} load dom 结构加载完毕时触发
34
+ * @event {Function} ready 所有图片加载完毕时触发
35
+ * @event {Function} imgtap 图片被点击时触发
36
+ * @event {Function} linktap 链接被点击时触发
37
+ * @event {Function} play 音视频播放时触发
38
+ * @event {Function} error 媒体加载出错时触发
40
39
  */
41
- const plugins=[]
42
- // TODO
43
- // 暂时先这样 之后在进行优化
44
- // #ifdef VUE2
45
- const parser = import("./parser");
46
- // #endif
47
- // #ifdef VUE3
48
- import parser from "./parser-es-module";
49
- // #endif
50
-
51
40
  // #ifndef APP-PLUS-NVUE
52
41
  import node from './node/node'
53
42
  // #endif
43
+ import Parser from './parser'
44
+ const plugins = []
54
45
  // #ifdef APP-PLUS-NVUE
55
46
  const dom = weex.requireModule('dom')
56
47
  // #endif
57
48
  export default {
58
- name: 'mp-html',
59
- data() {
60
- return {
61
- nodes: [],
62
- // #ifdef APP-PLUS-NVUE
63
- height: 0
64
- // #endif
65
- }
66
- },
67
- mixins:[props],
68
- // #ifndef APP-PLUS-NVUE
69
- components: {
70
- node
71
- },
72
- // #endif
73
- watch: {
74
- content(content) {
75
- this.setContent(content)
76
- }
77
- },
78
- created() {
79
- this.plugins = []
80
- for (let i = plugins.length; i--;)
81
- this.plugins.push(new plugins[i](this))
82
- },
83
- mounted() {
84
- if (this.content && !this.nodes.length)
85
- this.setContent(this.content)
86
- },
87
- beforeDestroy() {
88
- this._hook('onDetached')
89
- clearInterval(this._timer)
90
- },
91
- methods: {
92
- /**
93
- * @description 将锚点跳转的范围限定在一个 scroll-view 内
94
- * @param {Object} page scroll-view 所在页面的示例
95
- * @param {String} selector scroll-view 的选择器
96
- * @param {String} scrollTop scroll-view scroll-top 属性绑定的变量名
97
- */
98
- in(page, selector, scrollTop) {
99
- // #ifndef APP-PLUS-NVUE
100
- if (page && selector && scrollTop)
101
- this._in = {
102
- page,
103
- selector,
104
- scrollTop
105
- }
106
- // #endif
107
- },
49
+ name: 'u-parse',
50
+ data() {
51
+ return {
52
+ nodes: [],
53
+ // #ifdef APP-PLUS-NVUE
54
+ height: 3
55
+ // #endif
56
+ }
57
+ },
58
+ props: {
59
+ containerStyle: {
60
+ type: String,
61
+ default: ''
62
+ },
63
+ content: {
64
+ type: String,
65
+ default: ''
66
+ },
67
+ copyLink: {
68
+ type: [Boolean, String],
69
+ default: true
70
+ },
71
+ domain: String,
72
+ errorImg: {
73
+ type: String,
74
+ default: ''
75
+ },
76
+ lazyLoad: {
77
+ type: [Boolean, String],
78
+ default: false
79
+ },
80
+ loadingImg: {
81
+ type: String,
82
+ default: ''
83
+ },
84
+ pauseVideo: {
85
+ type: [Boolean, String],
86
+ default: true
87
+ },
88
+ previewImg: {
89
+ type: [Boolean, String],
90
+ default: true
91
+ },
92
+ scrollTable: [Boolean, String],
93
+ selectable: [Boolean, String],
94
+ setTitle: {
95
+ type: [Boolean, String],
96
+ default: true
97
+ },
98
+ showImgMenu: {
99
+ type: [Boolean, String],
100
+ default: true
101
+ },
102
+ tagStyle: Object,
103
+ useAnchor: [Boolean, Number]
104
+ },
105
+ // #ifdef VUE3
106
+ emits: ['load', 'ready', 'imgtap', 'linktap', 'play', 'error'],
107
+ // #endif
108
+ // #ifndef APP-PLUS-NVUE
109
+ components: {
110
+ node
111
+ },
112
+ // #endif
113
+ watch: {
114
+ content(content) {
115
+ this.setContent(content)
116
+ }
117
+ },
118
+ created() {
119
+ this.plugins = []
120
+ for (let i = plugins.length; i--;) {
121
+ this.plugins.push(new plugins[i](this))
122
+ }
123
+ },
124
+ mounted() {
125
+ if (this.content && !this.nodes.length) {
126
+ this.setContent(this.content)
127
+ }
128
+ },
129
+ beforeDestroy() {
130
+ this._hook('onDetached')
131
+ },
132
+ methods: {
133
+ /**
134
+ * @description 将锚点跳转的范围限定在一个 scroll-view 内
135
+ * @param {Object} page scroll-view 所在页面的示例
136
+ * @param {String} selector scroll-view 的选择器
137
+ * @param {String} scrollTop scroll-view scroll-top 属性绑定的变量名
138
+ */
139
+ in(page, selector, scrollTop) {
140
+ // #ifndef APP-PLUS-NVUE
141
+ if (page && selector && scrollTop) {
142
+ this._in = {
143
+ page,
144
+ selector,
145
+ scrollTop
146
+ }
147
+ }
148
+ // #endif
149
+ },
108
150
 
109
- /**
110
- * @description 锚点跳转
111
- * @param {String} id 要跳转的锚点 id
112
- * @param {Number} offset 跳转位置的偏移量
113
- * @returns {Promise}
114
- */
115
- navigateTo(id, offset) {
116
- return new Promise((resolve, reject) => {
117
- if (!this.useAnchor)
118
- return reject('Anchor is disabled')
119
- offset = offset || parseInt(this.useAnchor) || 0
120
- // #ifdef APP-PLUS-NVUE
121
- if (!id) {
122
- dom.scrollToElement(this.$refs.web, {
123
- offset
124
- })
125
- resolve()
126
- } else {
127
- this._navigateTo = {
128
- resolve,
129
- reject,
130
- offset
131
- }
132
- this.$refs.web.evalJs('uni.postMessage({data:{action:"getOffset",offset:(document.getElementById(' + id + ')||{}).offsetTop}})')
133
- }
134
- // #endif
135
- // #ifndef APP-PLUS-NVUE
136
- let deep = ' '
137
- // #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
138
- deep = '>>>'
139
- // #endif
140
- const selector = uni.createSelectorQuery()
141
- // #ifndef MP-ALIPAY
142
- .in(this._in ? this._in.page : this)
143
- // #endif
144
- .select((this._in ? this._in.selector : '._root') + (id ? `${deep}#${id}` : '')).boundingClientRect()
145
- if (this._in)
146
- selector.select(this._in.selector).scrollOffset()
147
- .select(this._in.selector).boundingClientRect() // 获取 scroll-view 的位置和滚动距离
148
- else
149
- selector.selectViewport().scrollOffset() // 获取窗口的滚动距离
150
- selector.exec(res => {
151
- if (!res[0])
152
- return reject('Label not found')
153
- const scrollTop = res[1].scrollTop + res[0].top - (res[2] ? res[2].top : 0) + offset
154
- if (this._in)
155
- // scroll-view 跳转
156
- this._in.page[this._in.scrollTop] = scrollTop
157
- else
158
- // 页面跳转
159
- uni.pageScrollTo({
160
- scrollTop,
161
- duration: 300
162
- })
163
- resolve()
164
- })
165
- // #endif
166
- })
167
- },
151
+ /**
152
+ * @description 锚点跳转
153
+ * @param {String} id 要跳转的锚点 id
154
+ * @param {Number} offset 跳转位置的偏移量
155
+ * @returns {Promise}
156
+ */
157
+ navigateTo(id, offset) {
158
+ return new Promise((resolve, reject) => {
159
+ if (!this.useAnchor) {
160
+ reject(Error('Anchor is disabled'))
161
+ return
162
+ }
163
+ offset = offset || parseInt(this.useAnchor) || 0
164
+ // #ifdef APP-PLUS-NVUE
165
+ if (!id) {
166
+ dom.scrollToElement(this.$refs.web, {
167
+ offset
168
+ })
169
+ resolve()
170
+ } else {
171
+ this._navigateTo = {
172
+ resolve,
173
+ reject,
174
+ offset
175
+ }
176
+ this.$refs.web.evalJs('uni.postMessage({data:{action:"getOffset",offset:(document.getElementById(' + id + ')||{}).offsetTop}})')
177
+ }
178
+ // #endif
179
+ // #ifndef APP-PLUS-NVUE
180
+ let deep = ' '
181
+ // #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
182
+ deep = '>>>'
183
+ // #endif
184
+ const selector = uni.createSelectorQuery()
185
+ // #ifndef MP-ALIPAY
186
+ .in(this._in ? this._in.page : this)
187
+ // #endif
188
+ .select((this._in ? this._in.selector : '._root') + (id ? `${deep}#${id}` : '')).boundingClientRect()
189
+ if (this._in) {
190
+ selector.select(this._in.selector).scrollOffset()
191
+ .select(this._in.selector).boundingClientRect()
192
+ } else {
193
+ // 获取 scroll-view 的位置和滚动距离
194
+ selector.selectViewport().scrollOffset() // 获取窗口的滚动距离
195
+ }
196
+ selector.exec(res => {
197
+ if (!res[0]) {
198
+ reject(Error('Label not found'))
199
+ return
200
+ }
201
+ const scrollTop = res[1].scrollTop + res[0].top - (res[2] ? res[2].top : 0) + offset
202
+ if (this._in) {
203
+ // scroll-view 跳转
204
+ this._in.page[this._in.scrollTop] = scrollTop
205
+ } else {
206
+ // 页面跳转
207
+ uni.pageScrollTo({
208
+ scrollTop,
209
+ duration: 300
210
+ })
211
+ }
212
+ resolve()
213
+ })
214
+ // #endif
215
+ })
216
+ },
168
217
 
169
- /**
170
- * @description 获取文本内容
171
- * @return {String}
172
- */
173
- getText() {
174
- let text = '';
175
- (function traversal(nodes) {
176
- for (let i = 0; i < nodes.length; i++) {
177
- const node = nodes[i]
178
- if (node.type == 'text')
179
- text += node.text.replace(/&amp;/g, '&')
180
- else if (node.name == 'br')
181
- text += '\n'
182
- else {
183
- // 块级标签前后加换行
184
- const isBlock = node.name == 'p' || node.name == 'div' || node.name == 'tr' || node.name == 'li' || (node.name[0] == 'h' && node.name[1] > '0' && node.name[1] < '7')
185
- if (isBlock && text && text[text.length - 1] != '\n')
186
- text += '\n'
187
- // 递归获取子节点的文本
188
- if (node.children)
189
- traversal(node.children)
190
- if (isBlock && text[text.length - 1] != '\n')
191
- text += '\n'
192
- else if (node.name == 'td' || node.name == 'th')
193
- text += '\t'
194
- }
195
- }
196
- })(this.nodes)
197
- return text
198
- },
218
+ /**
219
+ * @description 获取文本内容
220
+ * @return {String}
221
+ */
222
+ getText(nodes) {
223
+ let text = '';
224
+ (function traversal(nodes) {
225
+ for (let i = 0; i < nodes.length; i++) {
226
+ const node = nodes[i]
227
+ if (node.type === 'text') {
228
+ text += node.text.replace(/&amp;/g, '&')
229
+ } else if (node.name === 'br') {
230
+ text += '\n'
231
+ } else {
232
+ // 块级标签前后加换行
233
+ const isBlock = node.name === 'p' || node.name === 'div' || node.name === 'tr' || node.name === 'li' || (node.name[0] === 'h' && node.name[1] > '0' && node.name[1] < '7')
234
+ if (isBlock && text && text[text.length - 1] !== '\n') {
235
+ text += '\n'
236
+ }
237
+ // 递归获取子节点的文本
238
+ if (node.children) {
239
+ traversal(node.children)
240
+ }
241
+ if (isBlock && text[text.length - 1] !== '\n') {
242
+ text += '\n'
243
+ } else if (node.name === 'td' || node.name === 'th') {
244
+ text += '\t'
245
+ }
246
+ }
247
+ }
248
+ })(nodes || this.nodes)
249
+ return text
250
+ },
199
251
 
200
- /**
201
- * @description 获取内容大小和位置
202
- * @return {Promise}
203
- */
204
- getRect() {
205
- return new Promise((resolve, reject) => {
206
- uni.createSelectorQuery()
207
- // #ifndef MP-ALIPAY
208
- .in(this)
209
- // #endif
210
- .select('#_root').boundingClientRect().exec(res => res[0] ? resolve(res[0]) : reject('Root label not found'))
211
- })
212
- },
252
+ /**
253
+ * @description 获取内容大小和位置
254
+ * @return {Promise}
255
+ */
256
+ getRect() {
257
+ return new Promise((resolve, reject) => {
258
+ uni.createSelectorQuery()
259
+ // #ifndef MP-ALIPAY
260
+ .in(this)
261
+ // #endif
262
+ .select('#_root').boundingClientRect().exec(res => res[0] ? resolve(res[0]) : reject(Error('Root label not found')))
263
+ })
264
+ },
213
265
 
214
- /**
215
- * @description 设置内容
216
- * @param {String} content html 内容
217
- * @param {Boolean} append 是否在尾部追加
218
- */
219
- setContent(content, append) {
220
- if (!append || !this.imgList)
221
- this.imgList = []
222
- const nodes = new parser(this).parse(content)
223
- // #ifdef APP-PLUS-NVUE
224
- if (this._ready)
225
- this._set(nodes, append)
226
- // #endif
227
- this.$set(this, 'nodes', append ? (this.nodes || []).concat(nodes) : nodes)
266
+ /**
267
+ * @description 暂停播放媒体
268
+ */
269
+ pauseMedia() {
270
+ for (let i = (this._videos || []).length; i--;) {
271
+ this._videos[i].pause()
272
+ }
273
+ // #ifdef APP-PLUS
274
+ const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].pause()'
275
+ // #ifndef APP-PLUS-NVUE
276
+ let page = this.$parent
277
+ while (!page.$scope) page = page.$parent
278
+ page.$scope.$getAppWebview().evalJS(command)
279
+ // #endif
280
+ // #ifdef APP-PLUS-NVUE
281
+ this.$refs.web.evalJs(command)
282
+ // #endif
283
+ // #endif
284
+ },
228
285
 
229
- // #ifndef APP-PLUS-NVUE
230
- this._videos = []
231
- this.$nextTick(() => {
232
- this._hook('onLoad')
233
- this.$emit('load')
234
- })
286
+ /**
287
+ * @description 设置媒体播放速率
288
+ * @param {Number} rate 播放速率
289
+ */
290
+ setPlaybackRate(rate) {
291
+ this.playbackRate = rate
292
+ for (let i = (this._videos || []).length; i--;) {
293
+ this._videos[i].playbackRate(rate)
294
+ }
295
+ // #ifdef APP-PLUS
296
+ const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].playbackRate=' + rate
297
+ // #ifndef APP-PLUS-NVUE
298
+ let page = this.$parent
299
+ while (!page.$scope) page = page.$parent
300
+ page.$scope.$getAppWebview().evalJS(command)
301
+ // #endif
302
+ // #ifdef APP-PLUS-NVUE
303
+ this.$refs.web.evalJs(command)
304
+ // #endif
305
+ // #endif
306
+ },
235
307
 
236
- // 等待图片加载完毕
237
- let height
238
- clearInterval(this._timer)
239
- this._timer = setInterval(() => {
240
- this.getRect().then(rect => {
241
- // 350ms 总高度无变化就触发 ready 事件
242
- if (rect.height == height) {
243
- this.$emit('ready', rect)
244
- clearInterval(this._timer)
245
- }
246
- height = rect.height
247
- }).catch(() => { })
248
- }, 350)
249
- // #endif
250
- },
308
+ /**
309
+ * @description 设置内容
310
+ * @param {String} content html 内容
311
+ * @param {Boolean} append 是否在尾部追加
312
+ */
313
+ setContent(content, append) {
314
+ if (!append || !this.imgList) {
315
+ this.imgList = []
316
+ }
317
+ const nodes = new Parser(this).parse(content)
318
+ // #ifdef APP-PLUS-NVUE
319
+ if (this._ready) {
320
+ this._set(nodes, append)
321
+ }
322
+ // #endif
323
+ this.$set(this, 'nodes', append ? (this.nodes || []).concat(nodes) : nodes)
251
324
 
252
- /**
253
- * @description 调用插件钩子函数
254
- */
255
- _hook(name) {
256
- for (let i = plugins.length; i--;)
257
- if (this.plugins[i][name])
258
- this.plugins[i][name]()
259
- },
325
+ // #ifndef APP-PLUS-NVUE
326
+ this._videos = []
327
+ this.$nextTick(() => {
328
+ this._hook('onLoad')
329
+ this.$emit('load')
330
+ })
260
331
 
261
- // #ifdef APP-PLUS-NVUE
262
- /**
263
- * @description 设置内容
264
- */
265
- _set(nodes, append) {
266
- this.$refs.web.evalJs('setContent(' + JSON.stringify(nodes) + ',' + JSON.stringify([this.bgColor, this.errorImg, this.loadingImg, this.pauseVideo, this.scrollTable, this.selectable]) + ',' + append + ')')
267
- },
332
+ if (this.lazyLoad || this.imgList._unloadimgs < this.imgList.length / 2) {
333
+ // 设置懒加载,每 350ms 获取高度,不变则认为加载完毕
334
+ let height = 0
335
+ const callback = rect => {
336
+ if (!rect || !rect.height) rect = {}
337
+ // 350ms 总高度无变化就触发 ready 事件
338
+ if (rect.height === height) {
339
+ this.$emit('ready', rect)
340
+ } else {
341
+ height = rect.height
342
+ setTimeout(() => {
343
+ this.getRect().then(callback).catch(callback)
344
+ }, 350)
345
+ }
346
+ }
347
+ this.getRect().then(callback).catch(callback)
348
+ } else {
349
+ // 未设置懒加载,等待所有图片加载完毕
350
+ if (!this.imgList._unloadimgs) {
351
+ this.getRect().then(rect => {
352
+ this.$emit('ready', rect)
353
+ }).catch(() => {
354
+ this.$emit('ready', {})
355
+ })
356
+ }
357
+ }
358
+ // #endif
359
+ },
268
360
 
269
- /**
270
- * @description 接收到 web-view 消息
271
- */
272
- _onMessage(e) {
273
- const message = e.detail.data[0]
274
- switch (message.action) {
275
- // web-view 初始化完毕
276
- case 'onJSBridgeReady':
277
- this._ready = true
278
- if (this.nodes)
279
- this._set(this.nodes)
280
- break
281
- // 内容 dom 加载完毕
282
- case 'onLoad':
283
- this.height = message.height
284
- this._hook('onLoad')
285
- this.$emit('load')
286
- break
287
- // 所有图片加载完毕
288
- case 'onReady':
289
- this.getRect().then(res => {
290
- this.$emit('ready', res)
291
- }).catch(() => { })
292
- break
293
- // 总高度发生变化
294
- case 'onHeightChange':
295
- this.height = message.height
296
- break
297
- // 图片点击
298
- case 'onImgTap':
299
- this.$emit('imgTap', message.attrs)
300
- if (this.previewImg)
301
- uni.previewImage({
302
- current: parseInt(message.attrs.i),
303
- urls: this.imgList
304
- })
305
- break
306
- // 链接点击
307
- case 'onLinkTap':
308
- const href = message.attrs.href
309
- this.$emit('linkTap', message.attrs)
310
- if (href) {
311
- // 锚点跳转
312
- if (href[0] == '#') {
313
- if (this.useAnchor)
314
- dom.scrollToElement(this.$refs.web, {
315
- offset: message.offset
316
- })
317
- }
318
- // 打开外链
319
- else if (href.includes('://')) {
320
- if (this.copyLink)
321
- plus.runtime.openWeb(href)
322
- }
323
- else
324
- uni.navigateTo({
325
- url: href,
326
- fail() {
327
- wx.switchTab({
328
- url: href
329
- })
330
- }
331
- })
332
- }
333
- break
334
- // 获取到锚点的偏移量
335
- case 'getOffset':
336
- if (typeof message.offset == 'number') {
337
- dom.scrollToElement(this.$refs.web, {
338
- offset: message.offset + this._navigateTo.offset
339
- })
340
- this._navigateTo.resolve()
341
- } else
342
- this._navigateTo.reject('Label not found')
343
- break
344
- // 点击
345
- case 'onClick':
346
- this.$emit('tap')
347
- break
348
- // 出错
349
- case 'onError':
350
- this.$emit('error', {
351
- source: message.source,
352
- attrs: message.attrs
353
- })
354
- }
355
- }
356
- // #endif
357
- }
361
+ /**
362
+ * @description 调用插件钩子函数
363
+ */
364
+ _hook(name) {
365
+ for (let i = plugins.length; i--;) {
366
+ if (this.plugins[i][name]) {
367
+ this.plugins[i][name]()
368
+ }
369
+ }
370
+ },
371
+
372
+ // #ifdef APP-PLUS-NVUE
373
+ /**
374
+ * @description 设置内容
375
+ */
376
+ _set(nodes, append) {
377
+ this.$refs.web.evalJs('setContent(' + JSON.stringify(nodes).replace(/%22/g, '') + ',' + JSON.stringify([this.containerStyle.replace(/(?:margin|padding)[^;]+/g, ''), this.errorImg, this.loadingImg, this.pauseVideo, this.scrollTable, this.selectable]) + ',' + append + ')')
378
+ },
379
+
380
+ /**
381
+ * @description 接收到 web-view 消息
382
+ */
383
+ _onMessage(e) {
384
+ const message = e.detail.data[0]
385
+ switch (message.action) {
386
+ // web-view 初始化完毕
387
+ case 'onJSBridgeReady':
388
+ this._ready = true
389
+ if (this.nodes) {
390
+ this._set(this.nodes)
391
+ }
392
+ break
393
+ // 内容 dom 加载完毕
394
+ case 'onLoad':
395
+ this.height = message.height
396
+ this._hook('onLoad')
397
+ this.$emit('load')
398
+ break
399
+ // 所有图片加载完毕
400
+ case 'onReady':
401
+ this.getRect().then(res => {
402
+ this.$emit('ready', res)
403
+ }).catch(() => {
404
+ this.$emit('ready', {})
405
+ })
406
+ break
407
+ // 总高度发生变化
408
+ case 'onHeightChange':
409
+ this.height = message.height
410
+ break
411
+ // 图片点击
412
+ case 'onImgTap':
413
+ this.$emit('imgtap', message.attrs)
414
+ if (this.previewImg) {
415
+ uni.previewImage({
416
+ current: parseInt(message.attrs.i),
417
+ urls: this.imgList
418
+ })
419
+ }
420
+ break
421
+ // 链接点击
422
+ case 'onLinkTap': {
423
+ const href = message.attrs.href
424
+ this.$emit('linktap', message.attrs)
425
+ if (href) {
426
+ // 锚点跳转
427
+ if (href[0] === '#') {
428
+ if (this.useAnchor) {
429
+ dom.scrollToElement(this.$refs.web, {
430
+ offset: message.offset
431
+ })
432
+ }
433
+ } else if (href.includes('://')) {
434
+ // 打开外链
435
+ if (this.copyLink) {
436
+ plus.runtime.openWeb(href)
437
+ }
438
+ } else {
439
+ uni.navigateTo({
440
+ url: href,
441
+ fail() {
442
+ uni.switchTab({
443
+ url: href
444
+ })
445
+ }
446
+ })
447
+ }
448
+ }
449
+ break
450
+ }
451
+ case 'onPlay':
452
+ this.$emit('play')
453
+ break
454
+ // 获取到锚点的偏移量
455
+ case 'getOffset':
456
+ if (typeof message.offset === 'number') {
457
+ dom.scrollToElement(this.$refs.web, {
458
+ offset: message.offset + this._navigateTo.offset
459
+ })
460
+ this._navigateTo.resolve()
461
+ } else {
462
+ this._navigateTo.reject(Error('Label not found'))
463
+ }
464
+ break
465
+ // 点击
466
+ case 'onClick':
467
+ this.$emit('tap')
468
+ this.$emit('click')
469
+ break
470
+ // 出错
471
+ case 'onError':
472
+ this.$emit('error', {
473
+ source: message.source,
474
+ attrs: message.attrs
475
+ })
476
+ }
477
+ }
478
+ // #endif
479
+ }
358
480
  }
359
481
  </script>
360
482
 
@@ -362,13 +484,16 @@ export default {
362
484
  /* #ifndef APP-PLUS-NVUE */
363
485
  /* 根节点样式 */
364
486
  ._root {
365
- overflow: auto;
366
- -webkit-overflow-scrolling: touch;
487
+ padding: 1px 0;
488
+ overflow-x: auto;
489
+ overflow-y: hidden;
490
+ -webkit-overflow-scrolling: touch;
367
491
  }
368
492
 
369
493
  /* 长按复制 */
370
494
  ._select {
371
- user-select: text;
495
+ user-select: text;
372
496
  }
497
+
373
498
  /* #endif */
374
499
  </style>