4 changed files with 1 additions and 184 deletions
@ -1,49 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container flex flex-row items-center justify-center"> |
|
||||
<image |
|
||||
class="w-1/2" |
|
||||
mode="aspectFit" |
|
||||
src="https://lupic.cdn.bcebos.com/20200412/3026529107_14_800_566.jpg" |
|
||||
v-finger:pinch="handlePinch" |
|
||||
v-finger:multipoint-start="handlePinchStart" |
|
||||
:style="{ transform: `scale(${scale})` }" |
|
||||
id="image" |
|
||||
></image> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
initScale: 1, |
|
||||
scale: 1, |
|
||||
element: null, |
|
||||
}; |
|
||||
}, |
|
||||
|
|
||||
mounted() { |
|
||||
this.element = document.getElementById('image'); |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
handlePinchStart() { |
|
||||
console.log(this.element.style.transform); |
|
||||
// eslint-disable-next-line no-useless-escape |
|
||||
const reg = /scale\(([0-9]*[\.]?[0-9]*)\)/gi; |
|
||||
const scale = this.element.style.transform; |
|
||||
if (reg.test(scale)) { |
|
||||
this.initScale = RegExp.$1; |
|
||||
console.log(this.initScale); |
|
||||
} |
|
||||
// this.scale = this.element.scaleX; |
|
||||
}, |
|
||||
|
|
||||
handlePinch(event) { |
|
||||
console.log(typeof event.zoom, typeof this.initScale, this.initScale); |
|
||||
this.scale = this.initScale * event.zoom; |
|
||||
console.log('this.scale:', this.scale); |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
|
||||
@ -1,62 +0,0 @@ |
|||||
<template> |
|
||||
<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> |
|
||||
/* 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> |
|
||||
@ -1,73 +0,0 @@ |
|||||
<template> |
|
||||
<view class="p-2"> |
|
||||
<!-- <view v-if="!plugins">加载中...</view> |
|
||||
<template v-else>--> |
|
||||
<view class="my-3" id="container"></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