liumin
/
NewZkgj
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
563 Commits
7 Branches
28 MiB
 
 
 
Tree: 715586e475
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '715586e475'
${ noResults }
NewZkgj/uview-ui/components/u-parse/libs/trees.vue

501 lines
13 KiB
Raw Blame History 

  1. <template>

  2. 	<view :class="'interlayer '+(c||'')" :style="s">

  3. 		<block v-for="(n, i) in nodes" v-bind:key="i">

  4. 			<!--图片-->

  5. 			<view v-if="n.name=='img'" :class="'_img '+n.attrs.class" :style="n.attrs.style" :data-attrs="n.attrs" @tap="imgtap">

  6. 				<rich-text v-if="controls[i]!=0" :nodes="[{attrs:{src:loading&&(controls[i]||0)<2?loading:(lazyLoad&&!controls[i]?placeholder:(controls[i]==3?errorImg:n.attrs.src||'')),alt:n.attrs.alt||'',width:n.attrs.width||'',style:'-webkit-touch-callout:none;max-width:100%;display:block'+(n.attrs.height?';height:'+n.attrs.height:'')},name:'img'}]" />

  7. 				<image class="_image" :src="lazyLoad&&!controls[i]?placeholder:n.attrs.src" :lazy-load="lazyLoad"

  8. 				 :show-menu-by-longpress="!n.attrs.ignore" :data-i="i" :data-index="n.attrs.i" data-source="img" @load="loadImg"

  9. 				 @error="error" />

  10. 			</view>

  11. 			<!--文本-->

  12. 			<text v-else-if="n.type=='text'" decode>{{n.text}}</text>

  13. 			<!--#ifndef MP-BAIDU-->

  14. 			<text v-else-if="n.name=='br'">\n</text>

  15. 			<!--#endif-->

  16. 			<!--视频-->

  17. 			<view v-else-if="((n.lazyLoad&&!n.attrs.autoplay)||(n.name=='video'&&!loadVideo))&&controls[i]==undefined" :id="n.attrs.id" :class="'_video '+(n.attrs.class||'')"

  18. 			 :style="n.attrs.style" :data-i="i" @tap="_loadVideo" />

  19. 			<video v-else-if="n.name=='video'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay||controls[i]==0"

  20. 			 :controls="!n.attrs.autoplay||n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :poster="n.attrs.poster" :src="n.attrs.source[controls[i]||0]"

  21. 			 :unit-id="n.attrs['unit-id']" :data-id="n.attrs.id" :data-i="i" data-source="video" @error="error" @play="play" />

  22. 			<!--音频-->

  23. 			<audio v-else-if="n.name=='audio'" :ref="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author"

  24. 			 :autoplay="n.attrs.autoplay" :controls="!n.attrs.autoplay||n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster"

  25. 			 :src="n.attrs.source[controls[i]||0]" :data-i="i" :data-id="n.attrs.id" data-source="audio"

  26. 			 @error.native="error" @play.native="play" />

  27. 			<!--链接-->

  28. 			<view v-else-if="n.name=='a'" :id="n.attrs.id" :class="'_a '+(n.attrs.class||'')" hover-class="_hover" :style="n.attrs.style"

  29. 			 :data-attrs="n.attrs" @tap="linkpress">

  30. 				<trees class="_span" c="_span" :nodes="n.children" />

  31. 			</view>

  32. 			<!--广告-->

  33. 			<!--<ad v-else-if="n.name=='ad'" :class="n.attrs.class" :style="n.attrs.style" :unit-id="n.attrs['unit-id']" :appid="n.attrs.appid" :apid="n.attrs.apid" :type="n.attrs.type" :adpid="n.attrs.adpid" data-source="ad" @error="error" />-->

  34. 			<!--列表-->

  35. 			<view v-else-if="n.name=='li'" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:flex'">

  36. 				<view v-if="n.type=='ol'" class="_ol-bef">{{n.num}}</view>

  37. 				<view v-else class="_ul-bef">

  38. 					<view v-if="n.floor%3==0" class="_ul-p1">█</view>

  39. 					<view v-else-if="n.floor%3==2" class="_ul-p2" />

  40. 					<view v-else class="_ul-p1" style="border-radius:50%">█</view>

  41. 				</view>

  42. 				<trees class="_li" c="_li" :nodes="n.children" :lazyLoad="lazyLoad" :loading="loading" />

  43. 			</view>

  44. 			<!--表格-->

  45. 			<view v-else-if="n.name=='table'&&n.c" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:table'">

  46. 				<view v-for="(tbody, o) in n.children" v-bind:key="o" :class="tbody.attrs.class" :style="(tbody.attrs.style||'')+(tbody.name[0]=='t'?';display:table-'+(tbody.name=='tr'?'row':'row-group'):'')">

  47. 					<view v-for="(tr, p) in tbody.children" v-bind:key="p" :class="tr.attrs.class" :style="(tr.attrs.style||'')+(tr.name[0]=='t'?';display:table-'+(tr.name=='tr'?'row':'cell'):'')">

  48. 						<trees v-if="tr.name=='td'" :nodes="tr.children" />

  49. 						<trees v-else v-for="(td, q) in tr.children" v-bind:key="q" :class="td.attrs.class" :c="td.attrs.class" :style="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')"

  50. 						 :s="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')" :nodes="td.children" />

  51. 					</view>

  52. 				</view>

  53. 			</view>

  54. 			<!--#ifdef APP-PLUS-->

  55. 			<iframe v-else-if="n.name=='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder"

  56. 			 :width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" />

  57. 			<embed v-else-if="n.name=='embed'" :style="n.attrs.style" :width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" />

  58. 			<!--#endif-->

  59. 			<!--富文本-->

  60. 			<!--#ifdef MP-WEIXIN || MP-QQ || APP-PLUS-->

  61. 			<rich-text v-else-if="handler.use(n)" :id="n.attrs.id" :class="'_p __'+n.name" :nodes="[n]" />

  62. 			<!--#endif-->

  63. 			<!--#ifndef MP-WEIXIN || MP-QQ || APP-PLUS-->

  64. 			<rich-text v-else-if="!n.c" :id="n.attrs.id" :nodes="[n]" style="display:inline" />

  65. 			<!--#endif-->

  66. 			<trees v-else :class="(n.attrs.id||'')+' _'+n.name+' '+(n.attrs.class||'')" :c="(n.attrs.id||'')+' _'+n.name+' '+(n.attrs.class||'')"

  67. 			 :style="n.attrs.style" :s="n.attrs.style" :nodes="n.children" :lazyLoad="lazyLoad" :loading="loading" />

  68. 		</block>

  69. 	</view>

  70. </template>

  71. <script module="handler" lang="wxs" src="./handler.wxs"></script>

  72. <script>

  73. 	global.Parser = {};

  74. 	import trees from './trees'

  75. 	const errorImg = require('../libs/config.js').errorImg;

  76. 	export default {

  77. 		components: {

  78. 			trees

  79. 		},

  80. 		name: 'trees',

  81. 		data() {

  82. 			return {

  83. 				controls: [],

  84. 				placeholder: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="225"/>',

  85. 				errorImg,

  86. 				loadVideo: typeof plus == 'undefined',

  87. 				// #ifndef MP-ALIPAY

  88. 				c: '',

  89. 				s: ''

  90. 				// #endif

  91. 			}

  92. 		},

  93. 		props: {

  94. 			nodes: Array,

  95. 			lazyLoad: Boolean,

  96. 			loading: String,

  97. 			// #ifdef MP-ALIPAY

  98. 			c: String,

  99. 			s: String

  100. 			// #endif

  101. 		},

  102. 		mounted() {

  103. 			for (this.top = this.$parent; this.top.$options.name != 'parser'; this.top = this.top.$parent);

  104. 			this.init();

  105. 		},

  106. 		// #ifdef APP-PLUS

  107. 		beforeDestroy() {

  108. 			this.observer && this.observer.disconnect();

  109. 		},

  110. 		// #endif

  111. 		methods: {

  112. 			init() {

  113. 				for (var i = this.nodes.length, n; n = this.nodes[--i];) {

  114. 					if (n.name == 'img') {

  115. 						this.top.imgList.setItem(n.attrs.i, n.attrs.src);

  116. 						// #ifdef APP-PLUS

  117. 						if (this.lazyLoad && !this.observer) {

  118. 							this.observer = uni.createIntersectionObserver(this).relativeToViewport({

  119. 								top: 500,

  120. 								bottom: 500

  121. 							});

  122. 							setTimeout(() => {

  123. 								this.observer.observe('._img', res => {

  124. 									if (res.intersectionRatio) {

  125. 										for (var j = this.nodes.length; j--;)

  126. 											if (this.nodes[j].name == 'img')

  127. 												this.$set(this.controls, j, 1);

  128. 										this.observer.disconnect();

  129. 									}

  130. 								})

  131. 							}, 0)

  132. 						}

  133. 						// #endif

  134. 					} else if (n.name == 'video' || n.name == 'audio') {

  135. 						var ctx;

  136. 						if (n.name == 'video') {

  137. 							ctx = uni.createVideoContext(n.attrs.id

  138. 								// #ifndef MP-BAIDU

  139. 								, this

  140. 								// #endif

  141. 							);

  142. 						} else if (this.$refs[n.attrs.id])

  143. 							ctx = this.$refs[n.attrs.id][0];

  144. 						if (ctx) {

  145. 							ctx.id = n.attrs.id;

  146. 							this.top.videoContexts.push(ctx);

  147. 						}

  148. 					}

  149. 				}

  150. 				// #ifdef APP-PLUS

  151. 				// APP 上避免 video 错位需要延时渲染

  152. 				setTimeout(() => {

  153. 					this.loadVideo = true;

  154. 				}, 1000)

  155. 				// #endif

  156. 			},

  157. 			play(e) {

  158. 				var contexts = this.top.videoContexts;

  159. 				if (contexts.length > 1 && this.top.autopause)

  160. 					for (var i = contexts.length; i--;)

  161. 						if (contexts[i].id != e.currentTarget.dataset.id)

  162. 							contexts[i].pause();

  163. 			},

  164. 			imgtap(e) {

  165. 				var attrs = e.currentTarget.dataset.attrs;

  166. 				if (!attrs.ignore) {

  167. 					var preview = true,

  168. 						data = {

  169. 							id: e.target.id,

  170. 							src: attrs.src,

  171. 							ignore: () => preview = false

  172. 						};

  173. 					global.Parser.onImgtap && global.Parser.onImgtap(data);

  174. 					this.top.$emit('imgtap', data);

  175. 					if (preview) {

  176. 						var urls = this.top.imgList,

  177. 							current = urls[attrs.i] ? parseInt(attrs.i) : (urls = [attrs.src], 0);

  178. 						uni.previewImage({

  179. 							current,

  180. 							urls

  181. 						})

  182. 					}

  183. 				}

  184. 			},

  185. 			loadImg(e) {

  186. 				var i = e.currentTarget.dataset.i;

  187. 				if (this.lazyLoad && !this.controls[i]) {

  188. 					// #ifdef QUICKAPP-WEBVIEW

  189. 					this.$set(this.controls, i, 0);

  190. 					this.$nextTick(function() {

  191. 						// #endif

  192. 						// #ifndef APP-PLUS

  193. 						this.$set(this.controls, i, 1);

  194. 						// #endif

  195. 						// #ifdef QUICKAPP-WEBVIEW

  196. 					})

  197. 					// #endif

  198. 				} else if (this.loading && this.controls[i] != 2) {

  199. 					// #ifdef QUICKAPP-WEBVIEW

  200. 					this.$set(this.controls, i, 0);

  201. 					this.$nextTick(function() {

  202. 						// #endif

  203. 						this.$set(this.controls, i, 2);

  204. 						// #ifdef QUICKAPP-WEBVIEW

  205. 					})

  206. 					// #endif

  207. 				}

  208. 			},

  209. 			linkpress(e) {

  210. 				var jump = true,

  211. 					attrs = e.currentTarget.dataset.attrs;

  212. 				attrs.ignore = () => jump = false;

  213. 				global.Parser.onLinkpress && global.Parser.onLinkpress(attrs);

  214. 				this.top.$emit('linkpress', attrs);

  215. 				if (jump) {

  216. 					// #ifdef MP

  217. 					if (attrs['app-id']) {

  218. 						return uni.navigateToMiniProgram({

  219. 							appId: attrs['app-id'],

  220. 							path: attrs.path

  221. 						})

  222. 					}

  223. 					// #endif

  224. 					if (attrs.href) {

  225. 						if (attrs.href[0] == '#') {

  226. 							if (this.top.useAnchor)

  227. 								this.top.navigateTo({

  228. 									id: attrs.href.substring(1)

  229. 								})

  230. 						} else if (attrs.href.indexOf('http') == 0 || attrs.href.indexOf('//') == 0) {

  231. 							// #ifdef APP-PLUS

  232. 							plus.runtime.openWeb(attrs.href);

  233. 							// #endif

  234. 							// #ifndef APP-PLUS

  235. 							uni.setClipboardData({

  236. 								data: attrs.href,

  237. 								success: () =>

  238. 									uni.showToast({

  239. 										title: '链接已复制'

  240. 									})

  241. 							})

  242. 							// #endif

  243. 						} else

  244. 							uni.navigateTo({

  245. 								url: attrs.href,

  246. 								fail() {

  247. 									uni.switchTab({

  248. 										url: attrs.href,

  249. 									})

  250. 								}

  251. 							})

  252. 					}

  253. 				}

  254. 			},

  255. 			error(e) {

  256. 				var target = e.currentTarget,

  257. 					source = target.dataset.source,

  258. 					i = target.dataset.i;

  259. 				if (source == 'video' || source == 'audio') {

  260. 					// 加载其他 source

  261. 					var index = this.controls[i] ? this.controls[i].i + 1 : 1;

  262. 					if (index < this.nodes[i].attrs.source.length)

  263. 						this.$set(this.controls, i, index);

  264. 					if (e.detail.__args__)

  265. 						e.detail = e.detail.__args__[0];

  266. 				} else if (errorImg && source == 'img') {

  267. 					this.top.imgList.setItem(target.dataset.index, errorImg);

  268. 					this.$set(this.controls, i, 3);

  269. 				}

  270. 				this.top && this.top.$emit('error', {

  271. 					source,

  272. 					target,

  273. 					errMsg: e.detail.errMsg

  274. 				});

  275. 			},

  276. 			_loadVideo(e) {

  277. 				this.$set(this.controls, e.target.dataset.i, 0);

  278. 			}

  279. 		}

  280. 	}

  281. </script>

  282. 

  283. <style>

  284. 	/* 在这里引入自定义样式 */

  285. 

  286. 	/* 链接和图片效果 */

  287. 	._a {

  288. 		display: inline;

  289. 		padding: 1.5px 0 1.5px 0;

  290. 		color: #366092;

  291. 		word-break: break-all;

  292. 	}

  293. 

  294. 	._hover {

  295. 		text-decoration: underline;

  296. 		opacity: 0.7;

  297. 	}

  298. 

  299. 	._img {

  300. 		display: inline-block;

  301. 		max-width: 100%;

  302. 		overflow: hidden;

  303. 	}

  304. 

  305. 	/* #ifdef MP-WEIXIN */

  306. 	:host {

  307. 		display: inline;

  308. 	}

  309. 

  310. 	/* #endif */

  311. 

  312. 	/* #ifndef MP-ALIPAY || APP-PLUS */

  313. 	.interlayer {

  314. 		display: inherit;

  315. 		flex-direction: inherit;

  316. 		flex-wrap: inherit;

  317. 		align-content: inherit;

  318. 		align-items: inherit;

  319. 		justify-content: inherit;

  320. 		width: 100%;

  321. 		white-space: inherit;

  322. 	}

  323. 

  324. 	/* #endif */

  325. 

  326. 	._b,

  327. 	._strong {

  328. 		font-weight: bold;

  329. 	}

  330. 

  331. 	/* #ifndef MP-ALIPAY */

  332. 	._blockquote,

  333. 	._div,

  334. 	._p,

  335. 	._ol,

  336. 	._ul,

  337. 	._li {

  338. 		display: block;

  339. 	}

  340. 	

  341. 	/* #endif */

  342. 

  343. 	._code {

  344. 		font-family: monospace;

  345. 	}

  346. 

  347. 	._del {

  348. 		text-decoration: line-through;

  349. 	}

  350. 

  351. 	._em,

  352. 	._i {

  353. 		font-style: italic;

  354. 	}

  355. 

  356. 	._h1 {

  357. 		font-size: 2em;

  358. 	}

  359. 

  360. 	._h2 {

  361. 		font-size: 1.5em;

  362. 	}

  363. 

  364. 	._h3 {

  365. 		font-size: 1.17em;

  366. 	}

  367. 

  368. 	._h5 {

  369. 		font-size: 0.83em;

  370. 	}

  371. 

  372. 	._h6 {

  373. 		font-size: 0.67em;

  374. 	}

  375. 

  376. 	._h1,

  377. 	._h2,

  378. 	._h3,

  379. 	._h4,

  380. 	._h5,

  381. 	._h6 {

  382. 		display: block;

  383. 		font-weight: bold;

  384. 	}

  385. 

  386. 	._image {

  387. 		display: block;

  388. 		width: 100%;

  389. 		height: 360px;

  390. 		margin-top: -360px;

  391. 		opacity: 0;

  392. 	}

  393. 

  394. 	._ins {

  395. 		text-decoration: underline;

  396. 	}

  397. 

  398. 	._li {

  399. 		flex: 1;

  400. 		width: 0;

  401. 	}

  402. 

  403. 	._ol-bef {

  404. 		width: 36px;

  405. 		margin-right: 5px;

  406. 		text-align: right;

  407. 	}

  408. 

  409. 	._ul-bef {

  410. 		margin: 0 12px 0 23px;

  411. 		line-height: normal;

  412. 	}

  413. 

  414. 	._ol-bef,

  415. 	._ul_bef {

  416. 		flex: none;

  417. 		user-select: none;

  418. 	}

  419. 

  420. 	._ul-p1 {

  421. 		display: inline-block;

  422. 		width: 0.3em;

  423. 		height: 0.3em;

  424. 		overflow: hidden;

  425. 		line-height: 0.3em;

  426. 	}

  427. 

  428. 	._ul-p2 {

  429. 		display: inline-block;

  430. 		width: 0.23em;

  431. 		height: 0.23em;

  432. 		border: 0.05em solid black;

  433. 		border-radius: 50%;

  434. 	}

  435. 

  436. 	._q::before {

  437. 		content: '"';

  438. 	}

  439. 

  440. 	._q::after {

  441. 		content: '"';

  442. 	}

  443. 

  444. 	._sub {

  445. 		font-size: smaller;

  446. 		vertical-align: sub;

  447. 	}

  448. 

  449. 	._sup {

  450. 		font-size: smaller;

  451. 		vertical-align: super;

  452. 	}

  453. 

  454. 	/* #ifdef MP-ALIPAY || APP-PLUS || QUICKAPP-WEBVIEW */

  455. 	._abbr,

  456. 	._b,

  457. 	._code,

  458. 	._del,

  459. 	._em,

  460. 	._i,

  461. 	._ins,

  462. 	._label,

  463. 	._q,

  464. 	._span,

  465. 	._strong,

  466. 	._sub,

  467. 	._sup {

  468. 		display: inline;

  469. 	}

  470. 

  471. 	/* #endif */

  472. 

  473. 	/* #ifdef MP-WEIXIN || MP-QQ */

  474. 	.__bdo,

  475. 	.__bdi,

  476. 	.__ruby,

  477. 	.__rt {

  478. 		display: inline-block;

  479. 	}

  480. 

  481. 	/* #endif */

  482. 	._video {

  483. 		position: relative;

  484. 		display: inline-block;

  485. 		width: 300px;

  486. 		height: 225px;

  487. 		background-color: black;

  488. 	}

  489. 

  490. 	._video::after {

  491. 		position: absolute;

  492. 		top: 50%;

  493. 		left: 50%;

  494. 		margin: -15px 0 0 -15px;

  495. 		content: '';

  496. 		border-color: transparent transparent transparent white;

  497. 		border-style: solid;

  498. 		border-width: 15px 0 15px 30px;

  499. 	}

  500. </style>