看看我的用法
<template>
<view class="displayMain fill" style="width: 100%;height: 100%;"
:prop="scope" :change:prop="renderjsxx.create" >
<view ref="diplayMountPoint" style="width: 100%;height: 100%;">
</view>
</view>
</template>
<script>
export default {
props: ['connParams'],
data() {
return {
scope: null,
}
},
mounted() {
this.scope = this.connParams;
}
}
</script>
<script module="renderjsxx" lang="renderjs">
import Vue from "./vue.js" //此VUE为 官方的VUE.min.js
var managedClient = null;
export default {
mounted() {
},
methods: {
/**
* 此函数触发机制为 渲染逻辑层代码中的变量 `scope` 变化时触发,由于uniapp没有renderjs和逻辑层直接通信的方式,
* 并且逻辑层没有 原生WEB的API(例如 window对象,document对象)和一些 Navigator接口
*
*
*
* @param {Object} newConnOptions
* @param {Object} oldConnOptions
* @param {Object} ownerInstance
* @param {Object} instance
*/
create(newConnOptions, oldConnOptions, ownerInstance, instance){
console.log("===========managedClient============", managedClient)
// vue components instance
let pageInstance = ownerInstance.$vm;
let mountPointInstance = pageInstance.$refs.diplayMountPoint;
// console.log(pageInstance.$refs.diplayMountPoint.$el.offsetWidth)
// console.log(pageInstance.$refs.diplayMountPoint.$el.offsetHeight)
// console.log(pageInstance.$refs.diplayMountPoint.$el.clientWidth)
// console.log(pageInstance.$refs.diplayMountPoint.$el.clientHeight)
let data = {
xxx:"xxx"
}
managedClient = new Vue({
template:
`
<div class="displayOuter fill" style="height:100%;width:100%">
<div class="displayMiddle fill">
<div ref="displayContainer" class="fill display software-cursor">
</div>
</div>
</div>
`,
components:{
"uni-view":{
template:`<div><slot></slot></div>` // vue不认识uniapp的uni-view
}
},
el: pageInstance.$refs.diplayMountPoint.$el,
data: data,
methods:{
}
})
}
}
}
</script>
<style lang="scss" scoped>
.displayMain{
height: 100%;
.displayOuter{
height: 100%;
.displayMiddle{
height: 100%;
.displayContainer{
height: 100%;
}
}
}
}
</style>
想要什么逻辑,在下面的VUE里写就好了。。
算是迂回战术
我只适用于APP端
g***@aliyun.com
这是在我的代码删除业务代码出来的,仅供参考
2021-02-22 14:10