12 changed files with 215 additions and 14 deletions
@ -1 +1 @@ |
|||
[{"/mnt/c/Users/Administrator/Documents/coding/ccsens/tall-mui-cli/commitlint.config.js":"1","/mnt/c/Users/Administrator/Documents/coding/ccsens/tall-mui-cli/src/main.js":"2","/mnt/c/Users/Administrator/Documents/coding/ccsens/tall-mui-cli/src/registerServiceWorker.js":"3","/mnt/c/Users/Administrator/Documents/coding/ccsens/tall-mui-cli/tailwind.config.js":"4"},{"size":85,"mtime":1623976024000,"results":"5","hashOfConfig":"6"},{"size":222,"mtime":1623976024081,"results":"7","hashOfConfig":"6"},{"size":882,"mtime":1623976024087,"results":"8","hashOfConfig":"6"},{"size":160,"mtime":1623976024089},{"filePath":"9","messages":"10","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"14qqz39",{"filePath":"11","messages":"12","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/mnt/c/Users/Administrator/Documents/coding/ccsens/tall-mui-cli/commitlint.config.js",[],"/mnt/c/Users/Administrator/Documents/coding/ccsens/tall-mui-cli/src/main.js",[],"/mnt/c/Users/Administrator/Documents/coding/ccsens/tall-mui-cli/src/registerServiceWorker.js",[]] |
|||
[{"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/main.js":"1","/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/utils/request.js":"2"},{"size":335,"mtime":1624344979998,"results":"3","hashOfConfig":"4"},{"size":1742,"mtime":1624344980012,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"178d5hk",{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/main.js",[],"/mnt/c/Users/Administrator/Documents/coding/ccsens/demo/tall-v3.0-demo/src/utils/request.js",[]] |
|||
@ -0,0 +1,33 @@ |
|||
export default [ |
|||
{ |
|||
path: '/tasks', |
|||
handler: (req, res) => { |
|||
return res.json({ |
|||
code: 200, |
|||
msg: 'ok', |
|||
success: true, |
|||
data: { |
|||
plugins: [ |
|||
`<button onclick="location.href='https://www.tall.wiki/wl/1'">js打开物流页面</button>`, |
|||
`<a href="https://www.tall.wiki/wl/5">a链接打开现海园区</a>`, |
|||
`<div class="p-3 my-4 text-2xl bg-yellow-400 text-white" onclick="alert(123)">样式继承及简单脚本</div>`, |
|||
`<div class="p-3 my-4 text-2xl bg-red-400 text-white" onclick="openModal()">先是modal, 函数执行</div>
|
|||
<div style="display: none" id="modal">modal</div> |
|||
|
|||
<script> |
|||
function openModal() { |
|||
const modal = document.getElementById('modal'); |
|||
if (modal.style.display === 'block') { |
|||
modal.style.display = 'none'; |
|||
} else { |
|||
modal.style.display = 'block'; |
|||
} |
|||
console.log('modal显示了'); |
|||
} |
|||
</script>`, |
|||
], |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
]; |
|||
@ -1,7 +1,62 @@ |
|||
<template> |
|||
<view> iframe 验证 </view> |
|||
<view> |
|||
<view v-for="(item, index) in iframes" :key="index" style="height: 500rpx" class="p-1"> |
|||
<!-- <web-view :src="item"></web-view> --> |
|||
<iframe :src="item" frameborder="0" class="block w-full h-full" :id="`iframe${index}`"></iframe> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default {}; |
|||
/* eslint-disable max-len */ |
|||
const iframes = [ |
|||
'https://uniapp.dcloud.io/static/web-view.html', |
|||
'https://baidu.com', |
|||
'https://uland.taobao.com/semm/tbsearch?refpid=mm_26632258_3504122_32554087&keyword=%E5%A5%B3%E8%A3%85&clk1=ad91ec4906f3ffe8328566a1bf604aef&upsId=ad91ec4906f3ffe8328566a1bf604aef', |
|||
'https://m.jd.com/', |
|||
'https://www.ccsens.com', |
|||
'https://www.tall.wiki/wl/1', |
|||
'https://h5.m.jd.com/active/yard-channel/index.html?themeId=24883&babelChannel=356440&innerLink=%5B%7B%22matId%22%3A%223203085%22%7D%2C%7B%22matId%22%3A%223205226%22%7D%5D&themeStyle=0&innerIndex=1', |
|||
'https://mitem.jd.hk/product/3205226.html?pdtk=ZenDw7dK%2FC8XmpuZbhgbkp%2BSbyLL5R0S14AvHWdeeAL2Z36jPKDzWg%2BYBNa0HgvE&_fd=jdm&sid=null', |
|||
'https://shop.m.jd.com/shopv2/mzpage?shopId=1000015205&venderId=1000015205&skuId=3205226&categoryId=1319_1523_7052&sceneval=2&jxsid=16243458685744852366&_fd=jdm&_fd=jdm', |
|||
'https://www.tall.wiki/wl/2', |
|||
'https://www.tall.wiki/wl/3', |
|||
'https://www.tall.wiki/wl/4', |
|||
'https://www.tall.wiki/wl/5', |
|||
'https://www.tall.wiki/wl/7', |
|||
'https://www.tall.wiki/wl/6', |
|||
]; |
|||
/* eslint-enable max-len */ |
|||
export default { |
|||
data() { |
|||
return { iframes, createdTime: 0, mountedTime: 0 }; |
|||
}, |
|||
|
|||
created() { |
|||
this.createdTime = Date.now(); |
|||
console.error('created:', new Date().toLocaleString()); |
|||
}, |
|||
|
|||
mounted() { |
|||
this.mountedTime = Date.now(); |
|||
console.error('mounted:', new Date().toLocaleString()); |
|||
this.$nextTick(this.init); |
|||
}, |
|||
|
|||
methods: { |
|||
init() { |
|||
this.iframes.forEach((item, index) => { |
|||
const element = document.getElementById(`iframe${index}`); |
|||
element.addEventListener( |
|||
'load', |
|||
() => { |
|||
const now = Date.now(); |
|||
console.error(`${index} ${item} 加载结束`, new Date().toLocaleString(), now - this.createdTime, now - this.mountedTime); |
|||
}, |
|||
false, |
|||
); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
@ -0,0 +1,73 @@ |
|||
<template> |
|||
<view class="p-3"> |
|||
<!-- <view v-if="!plugins">加载中...</view> |
|||
<template v-else> --> |
|||
<view id="container" class="my-3"></view> |
|||
<!-- </template> --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { plugins: null }; |
|||
}, |
|||
|
|||
mounted() { |
|||
// window.openModal = function () { |
|||
// const modal = document.getElementById('modal'); |
|||
// modal.style.display = 'block'; |
|||
// alert('modal显示了'); |
|||
// }; |
|||
this.getData(); |
|||
}, |
|||
|
|||
methods: { |
|||
async getData() { |
|||
try { |
|||
const data = await this.$u.get('/tasks'); |
|||
console.log(data); |
|||
this.plugins = [...data.plugins] || null; |
|||
this.renderDOM(this.plugins); // 渲染DOM |
|||
} catch (error) { |
|||
console.log('🚀 ~ file: rich-text.vue ~ line 33 ~ getData ~ error', error); |
|||
this.plugins = null; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 渲染DOM |
|||
* @param {Array | null} plugins 拿到的内置插件数据 |
|||
* |
|||
* FIXME: 只处理了1个script标签的情况 |
|||
* FIXME: 插件命名空间 作用域未处理 |
|||
* FIXME: 插件关闭退出时, 应该移除相关的script代码 |
|||
*/ |
|||
renderDOM(plugins) { |
|||
if (!plugins || !plugins.length) return; |
|||
const element = document.getElementById('container'); |
|||
// eslint-disable-next-line no-useless-escape |
|||
const reg = /<script\b[^>]*>([\s\S]*)<\/script>/gim; |
|||
let str = element.innerHTML; |
|||
for (let item of plugins) { |
|||
// console.log(reg.test(item), item.match(reg), RegExp.$1); |
|||
if (reg.test(item)) { |
|||
// code snippets 包含 script |
|||
const scriptElement = document.createElement('script'); |
|||
const text = RegExp.$1; |
|||
try { |
|||
scriptElement.appendChild(document.createTextNode(text)); |
|||
} catch (error) { |
|||
scriptElement.text = text; |
|||
} |
|||
document.body.appendChild(scriptElement); // 动态创建并添加了script内容 |
|||
str += item.replace(reg, ''); // 把script标签的内容去掉 |
|||
} else { |
|||
str += `<div>${item}</div>`; |
|||
} |
|||
} |
|||
element.innerHTML = str; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
Loading…
Reference in new issue