<template>
<web-view :src="htmlDataUrl"></web-view>
</template>
<script setup>
let htmlContent: string = `
<!DOCTYPE html>
<html>
<head>
<!-- 自闭合标签必须加 / -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.red { color: #ff4d4f; }
.blue { color: #36BFFA; font-weight: bold; }
img {
margin: 10px 0;
border-radius: 8px;
max-width: 100%;
height: auto;
}
ul { padding-left: 20px; }
button {
margin-top: 15px;
padding: 8px 16px;
background: #722ED1;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h3>这是 HTML 字符串加载的内容</h3>
<p class="red">使用 <p> 标签和自定义样式</p>
<p class="blue">支持 <img> 标签：</p>
<!-- img 是自闭合标签，不能加 </img> -->
<img src="https://picsum.photos/400/200" alt="示例图片" />
<ul>
<li>列表项 1（<li> 标签）</li>
<li>列表项 2</li>
</ul> <!-- ul 必须闭合 -->
<button onclick="sendMsg()">点击向 UniAppX 发消息</button>
<!-- 外部脚本标签正确闭合 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"><\/script>
<!-- 内联脚本定义交互逻辑，重点注意<\/script> 结束标签不然会报错 -->
<script>
// 向 UniAppX 发送消息的函数
function sendMsg() {
alert("ssss")
}
<\/script>
</body> <!-- 正确闭合 body -->
</html> <!-- 正确闭合 html -->
`;
const htmlDataUrl = computed(() => {
const encodedHtml = encodeURIComponent(htmlContent);
// 拼接为 data URL 格式
return `data:text/html;charset=utf-8,${encodedHtml}`;
});
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx;
background-color: #f8f9fa;
min-height: 100vh;
}
.chart-title {
font-size: 36rpx;
font-weight: bold;
margin: 20rpx 0;
color: #333;
text-align: center;
}
.chart-container {
width: 100%;
height: 450rpx;
display: flex;
justify-content: center;
margin-bottom: 30rpx;
background-color: #fff;
border-radius: 16rpx;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
padding: 20rpx;
box-sizing: border-box;
}
.chart {
width: 100%;
height: 100%;
}
.legend {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 20rpx;
}
.legend-item {
display: flex;
align-items: center;
margin: 0 20rpx 15rpx;
font-size: 28rpx;
}
.color-box {
width: 30rpx;
height: 30rpx;
border-radius: 6rpx;
margin-right: 12rpx;
}
/* 添加响应式设计 */
@media (max-width: 600px) {
.chart-container {
height: 400rpx;
}
.chart-title {
font-size: 32rpx;
}
}
</style>
