fusions-ui 1.2.6 → 1.2.8

package/components/parse/src/parse.ts

@@ -0,0 +1,156 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const parseProps = {
+	/**
+	 * @description 容器的样式
+	 */
+	containerStyle: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 用于渲染的 html 字符串
+	 */
+	content: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 是否允许外部链接被点击时自动复制
+	 * @default true
+	 */
+	copyLink: {
+		type: [Boolean, String],
+		default: true
+	},
+	/**
+	 * @description 主域名，用于拼接链接
+	 */
+	domain: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 图片出错时的占位图链接
+	 */
+	errorImg: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 是否开启图片懒加载
+	 * @default false
+	 */
+	lazyLoad: {
+		type: [Boolean, String],
+		default: false
+	},
+	/**
+	 * @description 图片加载过程中的占位图链接
+	 */
+	loadingImg: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 是否在播放一个视频时自动暂停其他视频
+	 * @default true
+	 */
+	pauseVideo: {
+		type: [Boolean, String],
+		default: true
+	},
+	/**
+	 * @description 是否允许图片被点击时自动预览
+	 * @default true
+	 */
+	previewImg: {
+		type: [Boolean, String],
+		default: true
+	},
+	/**
+	 * @description 是否给每个表格添加一个滚动层使其能单独横向滚动
+	 * @default false
+	 */
+	scrollTable: {
+		type: [Boolean, String],
+		default: false
+	},
+	/**
+	 * @description 是否开启长按复制
+	 * @default false
+	 */
+	selectable: {
+		type: [Boolean, String],
+		default: false
+	},
+	/**
+	 * @description 是否将 title 标签的内容设置到页面标题
+	 * @default true
+	 */
+	setTitle: {
+		type: [Boolean, String],
+		default: true
+	},
+	/**
+	 * @description 是否允许图片被长按时显示菜单
+	 * @default true
+	 */
+	showImgMenu: {
+		type: [Boolean, String],
+		default: true
+	},
+	/**
+	 * @description 标签的默认样式
+	 */
+	tagStyle: {
+		type: Object,
+		default: () => ({})
+	},
+	/**
+	 * @description 是否使用锚点链接
+	 * @default false
+	 */
+	useAnchor: {
+		type: [Boolean, Number],
+		default: false
+	}
+};
+
+export const parseEmits = {
+	/**
+	 * @description dom 结构加载完毕时触发
+	 */
+	load: () => true,
+	/**
+	 * @description 所有图片加载完毕时触发
+	 */
+	ready: (_e: any) => true,
+	/**
+	 * @description 图片被点击时触发
+	 */
+	imgtap: (_e: any) => true,
+	/**
+	 * @description 链接被点击时触发
+	 */
+	linktap: (_e: any) => true,
+	/**
+	 * @description 音视频播放时触发
+	 */
+	play: () => true,
+	/**
+	 * @description 媒体加载出错时触发
+	 */
+	error: (_e: any) => true,
+	/**
+	 * @description 点击事件
+	 */
+	tap: () => true,
+	/**
+	 * @description 点击事件
+	 */
+	click: () => true
+};
+
+export type ParseProps = ExtractPropTypes<typeof parseProps>;
+export type ParseEmits = typeof parseEmits;

package/components/parse/src/parse.vue

@@ -0,0 +1,131 @@
+<template>
+	<view id="_root" :class="(selectable ? '_select ' : '') + '_root'" :style="containerStyle">
+		<slot v-if="!nodes[0]" />
+		<!-- #ifndef APP-PLUS-NVUE -->
+		<node v-else :childs="nodes" :opts="[lazyLoad, loadingImg, errorImg, showImgMenu, selectable]" name="span" />
+		<!-- #endif -->
+		<!-- #ifdef APP-PLUS-NVUE -->
+		<web-view ref="web" src="./app-plus/html/local.html" :style="'margin-top:-2px;height:' + height + 'px'" @onPostMessage="_onMessage" />
+		<!-- #endif -->
+	</view>
+</template>
+
+<script setup lang="ts">
+	/**
+	 * parse富文本解析器
+	 * @description 一般用于将HTML字符串渲染为富文本内容，支持图片自适应、视频播放、链接跳转等高级功能
+	 * @tutorial http://www.fusions.top/components/parse.html
+	 * @property {String} containerStyle 容器的样式
+	 * @property {String} content 用于渲染的 html 字符串
+	 * @property {Boolean} copyLink 是否允许外部链接被点击时自动复制
+	 * @property {String} domain 主域名，用于拼接链接
+	 * @property {String} errorImg 图片出错时的占位图链接
+	 * @property {Boolean} lazyLoad 是否开启图片懒加载
+	 * @property {string} loadingImg 图片加载过程中的占位图链接
+	 * @property {Boolean} pauseVideo 是否在播放一个视频时自动暂停其他视频
+	 * @property {Boolean} previewImg 是否允许图片被点击时自动预览
+	 * @property {Boolean} scrollTable 是否给每个表格添加一个滚动层使其能单独横向滚动
+	 * @property {Boolean | String} selectable 是否开启长按复制
+	 * @property {Boolean} setTitle 是否将 title 标签的内容设置到页面标题
+	 * @property {Boolean} showImgMenu 是否允许图片被长按时显示菜单
+	 * @property {Object} tagStyle 标签的默认样式
+	 * @property {Boolean | Number} useAnchor 是否使用锚点链接
+	 * 
+	 * @event {Function} load dom 结构加载完毕时触发
+	 * @event {Function} ready 所有图片加载完毕时触发
+	 * @event {Function} imgtap 图片被点击时触发
+	 * @event {Function} linktap 链接被点击时触发
+	 * @event {Function} play 音视频播放时触发
+	 * @event {Function} error 媒体加载出错时触发
+	 */
+	import { parseEmits, parseProps } from './parse';
+	import { useParse } from './composables';
+	// #ifndef APP-PLUS-NVUE
+	import node from './node/node.vue';
+	// #endif
+
+	defineOptions({ name: 'FuParse', options: { virtualHost: true } });
+
+	const props = defineProps(parseProps);
+	const $emit = defineEmits(parseEmits);
+	
+	const {
+		nodes,
+		imgList,
+		_videos,
+		playbackRate,
+		inScrollView,
+		navigateTo,
+		getText,
+		getRect,
+		pauseMedia,
+		setPlaybackRate,
+		setContent,
+		// #ifdef APP-PLUS-NVUE
+		height,
+		_onMessage,
+		// #endif
+	} = useParse(props, $emit);
+	
+	// 暴露方法
+	defineExpose({
+		// 公共 API 方法
+		in: inScrollView,
+		navigateTo,
+		getText,
+		getRect,
+		pauseMedia,
+		setPlaybackRate,
+		setContent,
+		// 内部属性（供子组件访问）
+		get imgList() {
+			return imgList.value
+		},
+		get _videos() {
+			return _videos.value
+		},
+		get _unloadimgs() {
+			return imgList.value._unloadimgs
+		},
+		set _unloadimgs(val) {
+			imgList.value._unloadimgs = val
+		},
+		get lazyLoad() {
+			return props.lazyLoad
+		},
+		get previewImg() {
+			return props.previewImg
+		},
+		get showImgMenu() {
+			return props.showImgMenu
+		},
+		get copyLink() {
+			return props.copyLink
+		},
+		get pauseVideo() {
+			return props.pauseVideo
+		},
+		get playbackRate() {
+			return playbackRate.value
+		},
+		$emit
+	})
+</script>
+
+<style>
+	/* #ifndef APP-PLUS-NVUE */
+	/* 根节点样式 */
+	._root {
+		padding: 1px 0;
+		overflow-x: auto;
+		overflow-y: hidden;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	/* 长按复制 */
+	._select {
+		user-select: text;
+	}
+
+	/* #endif */
+</style>