Richtext ​

<script setup>
	import * as plus from '@/uni_modules/ux-plus'
	
	const showDoc = ref(false)
	
	const title = ref('')

	const html = ref('<h1>富文本</h1><br/><h2>可渲染文字样式、图片、超链接，支持部分HTML标签</h2>')
	
	const nodes = ref<UTSJSONObject[]>([{
		name: 'p',
		attrs: {
			style: 'text-align: center; text-decoration: line-through;'
		},
		children: [
			{
				type: 'text',
				text: 'UxFrame'
			}
		]
	},
	{
		name: 'p',
		attrs: {
			style: 'background-color: green; color: red;'
		},
		children: [
			{
				type: 'text',
				text: '富文本演示'
			}
		]
	},
	{
	  name: 'img',
	  attrs: {
	    src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
	    width: '100',
	    height: '100'
	  }
	}] as UTSJSONObject[])
	
	const protocol = ref<UTSJSONObject[]>([{
		name: 'p',
		attrs: {
			style: 'font-size: 13px;'
		},
		children: [
			{
				type: 'text',
				text: '欢迎您使用我们的服务！在开始使用之前，请仔细阅读以下协议：'
			}, 
			{
				name: 'a',
				attrs: {
					href: 'https://ask.dcloud.net.cn/article/35623',
					style: 'color: #A90000;'
				},
				children: [
					{
						type: 'text',
						text: '《用户使用协议》'
					}
				]
			},
			{
				type: 'text',
				text: '、'
			},
			{
				name: 'a',
				attrs: {
					href: 'https://ask.dcloud.net.cn/article/35623',
					style: 'color: #A90000;'
				},
				children: [
					{
						type: 'text',
						text: '《隐私政策》'
					}
				]
			}
		]
	}] as UTSJSONObject[])

	function click(e : UniRichTextItemClickEvent) {
		console.log(e);
		
		// 点击图片
		if(e.detail.src != null) {
			uni.previewImage({
				urls: [e.detail.src!]
			})
		}
		
		// 点击超链接
		if(e.detail.href != null) {
			uni.navigateTo({
				url: `/pages/webview/webview?title=隐私政策&url=${e.detail.href!}`
			})
		}
	}
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/richtext.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	onLoad((e : OnLoadOptions) => {
		title.value = e['title'] ?? ''
	})
</script>

<script setup>
	import * as plus from '@/uni_modules/ux-plus'
	
	const showDoc = ref(false)
	
	const title = ref('')

	const html = ref('<h1>富文本</h1><br/><h2>可渲染文字样式、图片、超链接，支持部分HTML标签</h2>')
	
	const nodes = ref<UTSJSONObject[]>([{
		name: 'p',
		attrs: {
			style: 'text-align: center; text-decoration: line-through;'
		},
		children: [
			{
				type: 'text',
				text: 'UxFrame'
			}
		]
	},
	{
		name: 'p',
		attrs: {
			style: 'background-color: green; color: red;'
		},
		children: [
			{
				type: 'text',
				text: '富文本演示'
			}
		]
	},
	{
	  name: 'img',
	  attrs: {
	    src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
	    width: '100',
	    height: '100'
	  }
	}] as UTSJSONObject[])
	
	const protocol = ref<UTSJSONObject[]>([{
		name: 'p',
		attrs: {
			style: 'font-size: 13px;'
		},
		children: [
			{
				type: 'text',
				text: '欢迎您使用我们的服务！在开始使用之前，请仔细阅读以下协议：'
			}, 
			{
				name: 'a',
				attrs: {
					href: 'https://ask.dcloud.net.cn/article/35623',
					style: 'color: #A90000;'
				},
				children: [
					{
						type: 'text',
						text: '《用户使用协议》'
					}
				]
			},
			{
				type: 'text',
				text: '、'
			},
			{
				name: 'a',
				attrs: {
					href: 'https://ask.dcloud.net.cn/article/35623',
					style: 'color: #A90000;'
				},
				children: [
					{
						type: 'text',
						text: '《隐私政策》'
					}
				]
			}
		]
	}] as UTSJSONObject[])

	function click(e : UniRichTextItemClickEvent) {
		console.log(e);
		
		// 点击图片
		if(e.detail.src != null) {
			uni.previewImage({
				urls: [e.detail.src!]
			})
		}
		
		// 点击超链接
		if(e.detail.href != null) {
			uni.navigateTo({
				url: `/pages/webview/webview?title=隐私政策&url=${e.detail.href!}`
			})
		}
	}
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/richtext.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	onLoad((e : OnLoadOptions) => {
		title.value = e['title'] ?? ''
	})
</script>