forked from ccsens_fe/tall-mui-3
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