l***@126.com
l***@126.com
  • 发布:2021-02-21 16:04
  • 更新:2021-02-22 14:09
  • 阅读:1096

通过renderjs可以使用 for web的vue组件吗?

分类:uni-app

有一些操作了window,document的vue组件,比如he-tree-vue
可以通过renderjs在APP上使用吗?

<Tree :value="root" :eachDroppable="eachDroppable" ref="heTree"  
              :draggable="isDraggable" triggerClass="drag-handle">  

        <view class="uni-panel" slot-scope="{node, index, path, tree}">  
          <view class="uni-panel-h" v-if="isRootNode(node) || canShow(node)">  
            <view class="flex-space-between">  
              <text v-if="isDraggable()" class="iconfont drag-handle">&#xe6af;</text>  
              <text class="uni-panel-text">{{node.task.title}}</text>  
           </view>  
         </view>  
       </view>  
</Tree>
2021-02-21 16:04 负责人:无 分享
已邀请:
g***@aliyun.com

g***@aliyun.com

看看我的用法

<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

该问题目前已经被锁定, 无法添加新回复